Autonomous development workflow that proactively asks questions, verifies implementation with tools, and auto-fixes linter errors. Use when implementing features to ensure quality through self-driven verification.
Proactively asks clarifying questions before coding, then runs full verification (linter, type checks, tests, build) and browser testing after implementation. Automatically fixes linter errors and reports all findings.
/plugin marketplace add shabaraba/shabaraba-cc-plugins/plugin install dev-org@shabaraba-cc-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/example-workflows.mdreferences/question-templates.mdThis skill enables Claude Code to work autonomously with proactive quality assurance. It emphasizes asking clarifying questions, verifying implementations, and automatically fixing issues.
ALWAYS ask clarifying questions when:
Use AskUserQuestion tool proactively:
Examples:
- "Should I use Redux or Context API for state management?"
- "Do you want error boundaries at the page or component level?"
- "Should validation happen on the client, server, or both?"
- "What should happen if the API times out?"
DON'T:
After implementing any feature, ALWAYS perform these verification steps:
# Run linter immediately after changes
npm run lint
# or
pnpm lint
# or
eslint src/
# If errors found, fix them automatically
npm run lint:fix
# Verify TypeScript types
tsc --noEmit
# or
npm run typecheck
# Run relevant tests
npm test -- --run
# or specific test file
npm test -- path/to/test.spec.ts
# Ensure build succeeds
npm run build
For web applications, ALWAYS:
npm run dev
Check browser console for errors
Test actual functionality
Common checks:
ALWAYS report verification results to user:
✅ Verification Results:
- Linter: Passed (auto-fixed 3 formatting issues)
- Type Check: Passed
- Tests: 12/12 passed
- Build: Success
- Browser: ✅ No console errors, functionality works as expected
When linter errors are found:
npm run lint:fix
# or
eslint --fix src/
If auto-fix doesn't work, manually fix:
Report what was fixed:
Fixed linter errors:
- Removed 5 unused imports
- Added missing React dependencies to useEffect
- Fixed 12 indentation issues
When encountering issues:
# Check logs
npm run dev # Watch console output
# Run specific tests
npm test -- --run ComponentName
# Check type errors
tsc --noEmit
Use AskUserQuestion if:
BEFORE committing code, check:
# All-in-one verification
npm run lint && npm run typecheck && npm test -- --run && npm run build
# Frontend verification
npm run dev # Then manually check browser DevTools
# ESLint
eslint --fix src/
# Prettier
prettier --write src/
# Both
npm run format # if configured
F12 or Cmd+Option+I - Open DevToolsCmd+Shift+C - Inspect elementCmd+K - Clear consoleCmd+R - Hard reloadCmd+Shift+R - Hard reload (clear cache)Always active for:
Especially critical for:
User: "Add a dark mode toggle to the settings page"
Claude:
1. ❓ ASK: "Should dark mode preference persist across sessions?
Should it respect system preferences?"
2. 💻 IMPLEMENT: Create toggle component and theme context
3. ✅ VERIFY:
- Run: npm run lint:fix
- Run: tsc --noEmit
- Run: npm test -- --run
- Run: npm run dev
- Open browser DevTools
- Toggle dark mode
- Check for console errors
- Verify localStorage persistence
4. 📊 REPORT:
"✅ Dark mode toggle implemented and verified:
- Linter: Passed (auto-fixed 2 issues)
- Types: Passed
- Tests: All passing
- Browser: No console errors
- Functionality: Toggle works, persists in localStorage,
respects system preference on first load"
❌ Don't:
✅ Do:
Run them in order - fix issues at each level before proceeding.
This skill transforms Claude Code into a proactive, quality-focused developer that:
By following this workflow, you ensure high-quality, well-tested code with minimal back-and-forth.
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.