linter-driven-development

# Linter-Driven Development Workflow (TypeScript + React)

META ORCHESTRATOR for implementation workflow: design → test → lint → refactor → review → commit.
Use for any commit: features, bug fixes, refactors.

## When to Use
- Implementing any code change that should result in a commit
- Need automatic workflow management with quality gates
- Want to ensure: clean code + tests + linting + design validation + accessibility

## Workflow Phases

### Phase 1: Design (if needed)
- If new components/types/major changes needed → invoke @component-designing skill
- Output: Component design plan with types, hooks, and structure

### Phase 2: Implementation
- Follow @testing skill principles (Jest + React Testing Library)
- Write tests + implementation in parallel (not necessarily test-first)
- Aim for 100% coverage on new leaf components/hooks (pure logic with no external dependencies)
  - Leaf types: Pure logic (can compose other leaf types), no API/DB/file system access
  - Orchestrating types: Coordinate leaf types and external systems, need integration tests
- Test from user perspective (public API only)

### Phase 3: Linter Loop
Run quality checks in this order:
1. **Type Check**: `npm run typecheck` (TypeScript compiler)
2. **Lint Check**: `npm run lintcheck` (ESLint validation)
3. **Format Check**: `npm run formatcheck` (Prettier validation)
4. **Style Check**: `npm run stylecheck` (Stylelint for SCSS)

If any failures detected:
- Run auto-fixes:
  - `npm run lint` (ESLint --fix)
  - `npm run format` (Prettier --write)
  - `npm run stylefix` (Stylelint --fix)
- Re-run quality checks
- If still failing (complexity, design issues):
  - Interpret failures (cognitive complexity, cyclomatic complexity, etc.)
  - Invoke @refactoring skill to fix (use storifying, extract functions/hooks, early returns)
  - Re-run checks
- Repeat until all checks pass clean

**Alternative**: If project has combined commands:
- Check: `npm run checkall` or `npm run check`
- Fix: `npm run fix`