dev-coding

Original：🇺🇸 English
Translated

Implement features from specs with backend and frontend skills

2installs
Sourcecodihaus/claude-skills
Added on

NPX Install

npx skill4agent add codihaus/claude-skills dev-coding

Tags

Translated version includes tags in frontmatter
dev-codingspec-based-implementationfull-stack-developmentbackend-codingfrontend-coding

SKILL.md Content

View Translation Comparison →

/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
  • After: 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 docs-graph for dependencies
   → plans/docs-graph.json

4. 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 ContainsWork TypeSkill to Load
API endpoints, schemaBackenddev-coding-backend
UI components, pagesFrontenddev-coding-frontend
BothFull-stackBackend 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

Before marking complete:
[ ] Code follows project conventions (from scout)
[ ] No linting errors
[ ] No type errors
[ ] Tests pass (if project has tests)
[ ] No console.log / debug code left
[ ] No hardcoded secrets
[ ] Error handling in place

Phase 7: Complete

  1. Update spec status
    markdown
    <!-- In specs/{UC-ID}/README.md -->
> **Status**: Complete
> **Completed**: {date}
  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)

### Next Steps
- UC-AUTH-002 can now proceed (depends on this)
  3. Update docs-graph (automatic via hook)

Communication Protocol

When to Ask

SituationAction
Spec unclearAsk for clarification
Multiple valid approachesPresent options, ask preference
Stuck > 15 minDocument attempts, ask for help
Spec seems wrongFlag it, propose alternative
Scope creep detectedStop, 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

DeviationAction
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

ToolPurpose
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

Integration

SkillRelationship
/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
/docs-graph
Auto-updates on file changes
/dev-review
Review after implementation

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
   → Test with Playwright ✓

5. Integration test
   → Fill form → Submit → Verify redirect ✓

6. Quality checks
   → Lint ✓, Types ✓, No debug code ✓

7. Complete
   → Update spec status
   → Document changes
   → Suggest: "UC-AUTH-002 (Signup) is now unblocked"