@codihaus/claude-skills 1.0.0

package/skills/dev-coding/SKILL.md

@@ -0,0 +1,470 @@
+---
+name: dev-coding
+description: Implement features from specs with backend and frontend skills
+version: 1.2.0
+---
+
+# /dev-coding - Implementation Skill
+
+> **Skill Awareness**: See `skills/_registry.md` for all available skills.
+> - **Before**: Ensure `/dev-specs` completed, `/dev-scout` for patterns
+> - **During**: Auto-loads `/dev-coding-backend`, `/dev-coding-frontend`
+> - **Reads**: `_quality-attributes.md` (Implementation Level)
+> - **After**: Auto-triggers `/dev-test` to verify implementation
+> - **After test**: Suggest `/dev-review` for code review
+
+Implement features based on specs. Orchestrates backend and frontend work.
+
+## When to Use
+
+- Implement a use case from /dev-specs
+- Build feature end-to-end (API + UI)
+- Make changes defined in implementation plan
+
+## Usage
+
+```
+/dev-coding UC-AUTH-001              # Implement specific UC
+/dev-coding auth                     # Implement all UCs for feature
+/dev-coding UC-AUTH-001 --backend    # Backend only
+/dev-coding UC-AUTH-001 --frontend   # Frontend only
+```
+
+## Prerequisites
+
+Before using, ensure:
+1. `/debrief` completed → BRD exists
+2. `/dev-specs` completed → Implementation plan exists
+3. `/dev-scout` completed → Codebase patterns known
+
+## Output
+
+Updates to codebase:
+- New/modified files
+- Tests (if required)
+- Updated docs-graph
+
+Updates to specs:
+- Task status in `plans/features/{feature}/specs/`
+- Implementation notes
+
+## Workflow
+
+### Phase 0: Load Context
+
+```
+1. Read UC spec
+   → plans/features/{feature}/specs/{UC-ID}/README.md
+
+2. Read scout for patterns
+   → plans/features/{feature}/scout.md OR plans/scout/README.md
+
+3. Read architecture decisions
+   → plans/features/{feature}/architecture.md
+
+4. Read quality attributes (Implementation Level)
+   → skills/_quality-attributes.md
+   → Focus on: query efficiency, memory, concurrency, error handling
+
+5. Read docs-graph for dependencies
+   → plans/docs-graph.json
+
+6. Check: Are dependencies complete?
+   → If UC depends on another UC, verify it's done
+   → Warn if not, let user decide to proceed
+```
+
+### Phase 1: Determine Work Type
+
+Based on spec, determine what's needed:
+
+| Spec Contains | Work Type | Skill to Load |
+|---------------|-----------|---------------|
+| API endpoints, schema | Backend | dev-coding-backend |
+| UI components, pages | Frontend | dev-coding-frontend |
+| Both | Full-stack | Backend first, then Frontend |
+
+```
+Read spec → Extract:
+- API changes needed?
+- Schema/DB changes needed?
+- UI components needed?
+- Pages/routes needed?
+```
+
+### Phase 2: Load Sub-Skills
+
+**If backend work needed:**
+```
+Read: skills/dev-coding-backend/SKILL.md
+Read: skills/dev-coding-backend/references/{tech}.md (if exists)
+
+Tech detected from scout:
+- directus → directus.md
+- node → node.md
+- prisma → prisma.md
+```
+
+**If frontend work needed:**
+```
+Read: skills/dev-coding-frontend/SKILL.md
+Read: skills/dev-coding-frontend/references/{tech}.md (if exists)
+
+Tech detected from scout:
+- nextjs → nextjs.md
+- vue → vue.md
+- react → react.md
+```
+
+### Phase 3: Execute Backend (if needed)
+
+Follow dev-coding-backend workflow:
+
+1. **Schema changes** (if needed)
+   - Create/modify collections, tables, models
+   - Run migrations
+   - Verify schema
+
+2. **API implementation**
+   - Create endpoints per spec
+   - Implement business logic
+   - Add validation, error handling
+
+3. **Backend verification**
+   ```bash
+   # Test API works
+   curl -X POST http://localhost:3000/api/auth/login \
+     -H "Content-Type: application/json" \
+     -d '{"email":"test@test.com","password":"test"}'
+   ```
+
+4. **Document what was created**
+   - Endpoints available
+   - Request/response shapes
+   - Auth requirements
+
+### Phase 4: Execute Frontend (if needed)
+
+Follow dev-coding-frontend workflow:
+
+1. **Components** (if needed)
+   - Create/modify UI components
+   - Follow project conventions from scout
+
+2. **Pages/Routes** (if needed)
+   - Create page files
+   - Set up routing
+
+3. **API Integration**
+   - Connect to backend (use info from Phase 3)
+   - Handle loading, error states
+
+4. **Frontend verification**
+   - Visual check (Playwright screenshot or manual)
+   - Interaction test
+
+### Phase 5: Integration Test
+
+End-to-end verification:
+
+```
+1. Start from UI
+2. Perform user action
+3. Verify API called correctly
+4. Verify response handled
+5. Verify UI updated
+```
+
+**Methods:**
+- Playwright for automated
+- Manual walkthrough
+- curl + UI check
+
+### Phase 6: Quality Checks
+
+Run through `_quality-attributes.md` Implementation Level checklists:
+
+**From quality attributes:**
+```
+[ ] Scalability
+    - No N+1 queries (use joins/includes)
+    - Select only needed fields
+    - Limit result sets
+    - Connection pooling used
+
+[ ] Maintainability
+    - Functions do one thing
+    - Names describe intent
+    - No magic numbers/strings
+
+[ ] Performance
+    - Database queries optimized
+    - Heavy computation cached or async
+    - No unnecessary re-renders (frontend)
+
+[ ] Security
+    - All input validated
+    - SQL injection prevented
+    - XSS prevented
+    - No hardcoded secrets
+
+[ ] Reliability
+    - Errors caught and handled
+    - User-friendly error messages
+    - Timeouts on external calls
+
+[ ] Testability
+    - Pure functions where possible
+    - Dependencies injected
+```
+
+**Project-specific:**
+```
+[ ] Code follows project conventions (from scout)
+[ ] No linting errors
+[ ] No type errors
+[ ] Tests pass (if project has tests)
+[ ] No console.log / debug code left
+```
+
+### Phase 7: Auto-Test
+
+**Automatically run testing to verify implementation:**
+
+```
+1. Load dev-test skill
+   → Read skills/dev-test/SKILL.md
+
+2. Determine test URL
+   → From project config or spec
+   → Default: http://localhost:3000/{path}
+
+3. Run E2E test
+   → Navigate to page
+   → Execute user flow from spec
+   → Capture errors
+
+4. Analyze results
+   → Console errors?
+   → Network failures?
+   → Visual issues?
+
+5. Handle results:
+   - All pass → Proceed to Phase 8
+   - Issues found → Report and fix
+```
+
+**Test Flow:**
+
+```typescript
+// 1. Navigate
+await mcp__playwright__browser_navigate({ url: testUrl });
+
+// 2. Execute user flow
+// (based on UC spec steps)
+
+// 3. Collect errors
+const consoleErrors = await mcp__playwright__browser_console_messages({
+  level: 'error'
+});
+const networkRequests = await mcp__playwright__browser_network_requests({});
+
+// 4. Report or fix
+if (hasErrors) {
+  // Fix and re-test (max 3 iterations)
+}
+```
+
+**On Test Failure:**
+
+```markdown
+⚠️ **Testing found issues:**
+
+1. [Console] TypeError in LoginForm.tsx:45
+2. [Network] POST /api/auth/login returned 500
+
+**Auto-fixing...** (if straightforward)
+**Or reporting for manual fix** (if complex)
+```
+
+### Phase 8: Complete
+
+1. **Update spec status**
+   ```markdown
+   <!-- In specs/{UC-ID}/README.md -->
+   > **Status**: Complete
+   > **Completed**: {date}
+   > **Tested**: ✓ Pass
+   ```
+
+2. **Document changes**
+   ```markdown
+   ## Implementation Notes
+
+   ### Files Changed
+   - `src/api/auth/login.ts` - Created login endpoint
+   - `src/components/LoginForm.tsx` - Created form component
+
+   ### Deviations from Spec
+   - Added rate limiting (not in spec, but security best practice)
+
+   ### Test Results
+   - E2E flow: ✓ Pass
+   - Console errors: None
+   - API responses: All 2xx
+
+   ### Next Steps
+   - UC-AUTH-002 can now proceed (depends on this)
+   ```
+
+3. **Update docs-graph** (automatic via hook)
+
+4. **Suggest next action**
+   ```markdown
+   ✅ **Implementation complete and tested.**
+
+   💡 **Suggestions:**
+   - Run `/dev-review` to review changes before commit
+   - UC-AUTH-002 (Signup) is now unblocked
+   ```
+
+## Communication Protocol
+
+### When to Ask
+
+| Situation | Action |
+|-----------|--------|
+| Spec unclear | Ask for clarification |
+| Multiple valid approaches | Present options, ask preference |
+| Stuck > 15 min | Document attempts, ask for help |
+| Spec seems wrong | Flag it, propose alternative |
+| Scope creep detected | Stop, suggest CR |
+
+### How to Ask
+
+```markdown
+**Blocker**: {What's blocking}
+
+**Tried**:
+1. {Attempt 1} → {Result}
+2. {Attempt 2} → {Result}
+
+**Options**:
+A) {Option A} - {Tradeoff}
+B) {Option B} - {Tradeoff}
+
+**Recommendation**: {Your suggestion}
+```
+
+### Scope Creep Protocol
+
+| Deviation | Action |
+|-----------|--------|
+| Tiny (typo) | Fix silently |
+| Small (edge case) | Ask + proceed |
+| Medium (new field) | Document + ask |
+| Large (approach wrong) | Stop + create CR |
+
+## Dependency Handling
+
+When UC depends on another:
+
+```
+1. Check docs-graph for dependencies
+2. For each dependency:
+   - Is UC marked complete? → OK
+   - Is code actually there? → Check (more reliable)
+3. If dependency missing:
+   - Warn user
+   - Ask: Proceed anyway? / Do dependency first?
+```
+
+## Tools Used
+
+| Tool | Purpose |
+|------|---------|
+| `Read` | Load specs, scout, sub-skills |
+| `Write` | Create new files |
+| `Edit` | Modify existing files |
+| `Bash` | Run commands, curl tests |
+| `Glob` | Find files |
+| `Grep` | Search code |
+| `mcp__playwright__*` | UI verification |
+| `Context7` | Look up library documentation |
+
+### Context7 for Implementation
+
+When coding, use Context7 to look up library APIs:
+
+```
+1. Resolve library
+   → mcp__context7__resolve-library-id({
+       libraryName: "zod",
+       query: "form validation schema"
+     })
+
+2. Query specific API
+   → mcp__context7__query-docs({
+       libraryId: "/colinhacks/zod",
+       query: "custom error messages"
+     })
+```
+
+**Use for:**
+- Library APIs you're less familiar with
+- Framework-specific patterns
+- Error handling approaches
+- Best practices
+
+## Integration
+
+| Skill | Relationship |
+|-------|--------------|
+| `/dev-specs` | Reads implementation plan from |
+| `/dev-scout` | Reads patterns/conventions from |
+| `/dev-coding-backend` | Loads for API/schema work |
+| `/dev-coding-frontend` | Loads for UI work |
+| `/dev-test` | Auto-triggers after implementation |
+| `/utils/docs-graph` | Auto-updates on file changes |
+| `/dev-review` | Review after testing passes |
+
+## Example Flow
+
+```
+User: /dev-coding UC-AUTH-001
+
+1. Load UC-AUTH-001 spec
+   → Backend: POST /api/auth/login
+   → Frontend: LoginForm component, /login page
+
+2. Check dependencies
+   → None for UC-AUTH-001 (it's first)
+
+3. Load dev-coding-backend
+   → Create login endpoint
+   → Test with curl ✓
+
+4. Load dev-coding-frontend
+   → Create LoginForm component
+   → Create /login page
+   → Connect to API
+
+5. Integration test
+   → Fill form → Submit → Verify redirect ✓
+
+6. Quality checks
+   → Lint ✓, Types ✓, No debug code ✓
+
+7. Auto-test (dev-test)
+   → Navigate to /login
+   → Fill form, submit
+   → Check console: No errors ✓
+   → Check network: All 2xx ✓
+   → Visual check: Form renders ✓
+
+8. Complete
+   → Update spec status (with test results)
+   → Document changes
+   → Suggest: "Run /dev-review before committing"
+   → Note: "UC-AUTH-002 (Signup) is now unblocked"
+```