2672 Task 11 Project Skills Generation V23 A0b374c7

TASK-11: Project-Specific Skills Generation (v2.3)

Created: 2025-10-19 Status: Planning Priority: High Complexity: Medium

Context

Following the successful implementation of nav-skill-creator in v2.2, we now use it to generate the 5 project-specific skills outlined in the v2.1-v2.2 roadmap (TASK-08). This validates the self-improving capability and provides high-value automation for common development patterns.

Current State (v2.2.0)

Core Navigator skills (7 total):

• nav-start (session initialization)
• nav-marker (context save points)
• nav-compact (smart context management)
• nav-task (task documentation)
• nav-sop (standard operating procedures)
• nav-skill-creator (skill generation)
• plugin-slash-command (first project-specific skill)

What's missing: Generic framework skills for common development patterns

Problem Statement

Developers repeat common patterns manually:

• Creating React/Vue components (boilerplate, tests, styles)
• Adding REST/GraphQL API endpoints (routes, validation, tests)
• Database migrations (schema changes, rollbacks)
• Writing backend tests (unit, integration, mocks)
• Writing frontend tests (component, snapshot, e2e)

Without project-specific skills:

• Read 3-5 examples manually (~15k tokens)
• Copy-paste and modify patterns
• Inconsistent implementations
• Missing tests
• Token waste

With project-specific skills:

• Auto-invoke on trigger phrases
• Consistent output via templates
• Generated with tests
• 80% token reduction (15k → 3k)

Objectives

Primary Goal

Generate 5 project-specific skills using nav-skill-creator to automate common development patterns.

Success Criteria

• 5 skills generated and working
• Each skill has functions, templates, examples
• Auto-invocation works correctly
• Skills produce consistent output
• Documentation complete
• Token efficiency validated (80% reduction)

Skills to Generate

1. frontend-component

Purpose: Create React/Vue/Svelte components with tests and styles

Trigger phrases:

• "create component"
• "add component"
• "new component"
• "build a component"

Components:

• functions/component_generator.py - Generate component code
• functions/style_generator.py - Generate styled-components/CSS
• functions/test_generator.py - Generate component tests
• templates/component-template.tsx - Base component structure
• templates/test-template.spec.tsx - Test structure
• examples/example-button.tsx - Example functional component
• examples/example-hook.ts - Example custom hook

Token savings: 15k → 3k (80% reduction)

2. backend-endpoint

Purpose: Create REST/GraphQL API endpoints with validation and tests

Trigger phrases:

• "add endpoint"
• "create API"
• "new route"
• "add route"

Components:

• functions/endpoint_generator.py - Generate route handler
• functions/route_validator.py - Validate route structure
• functions/middleware_generator.py - Generate middleware
• templates/endpoint-template.ts - REST endpoint structure
• templates/test-template.spec.ts - API test structure
• examples/rest-endpoint.ts - Example REST route
• examples/graphql-resolver.ts - Example GraphQL resolver

Token savings: 15k → 3k (80% reduction)

3. database-migration

Purpose: Create database migrations with rollback capability

Trigger phrases:

• "create migration"
• "add table"
• "modify schema"
• "change database"

Components:

• functions/migration_generator.py - Generate migration SQL
• functions/schema_validator.py - Validate schema changes
• functions/rollback_generator.py - Generate rollback SQL
• templates/migration-template.sql - Migration structure
• templates/rollback-template.sql - Rollback structure
• examples/add-table-migration.sql - Example table creation
• examples/modify-column-migration.sql - Example column change

Token savings: 12k → 3k (75% reduction)

4. backend-test

Purpose: Write backend tests (unit, integration, mocks)

Trigger phrases:

• "write test for"
• "add test"
• "test this"
• "create test"

Components:

• functions/test_generator.py - Generate test code
• functions/fixture_generator.py - Generate test fixtures
• functions/mock_generator.py - Generate mocks
• templates/unit-test-template.spec.ts - Unit test structure
• templates/integration-test-template.spec.ts - Integration test structure
• examples/api-test-example.ts - Example API test
• examples/service-test-example.ts - Example service test

Token savings: 18k → 3k (83% reduction)

5. frontend-test

Purpose: Write frontend component tests (unit, snapshot, e2e)

Trigger phrases:

• "test this component"
• "write component test"
• "test component"
• "add component test"

Components:

• functions/component_test_generator.py - Generate component tests
• functions/snapshot_generator.py - Generate snapshot tests
• templates/component-test-template.spec.tsx - Component test structure
• templates/e2e-test-template.spec.ts - E2E test structure
• examples/button-test-example.tsx - Example button test
• examples/form-test-example.tsx - Example form test

Token savings: 16k → 3k (81% reduction)

Implementation Plan

Phase 1: Generate frontend-component Skill

Steps:

1. Invoke nav-skill-creator with task: "Generate frontend-component skill"
2. Provide context:
   • Common React component patterns
   • TypeScript/JSX syntax
   • styled-components or CSS modules
   • Testing patterns (Jest, React Testing Library)
3. Review generated skill structure
4. Test generated skill in nav-test project
5. Refine if needed

Validation:

• Skill auto-invokes on "create component"
• Generates component with tests
• Follows React best practices
• Output is consistent

Phase 2: Generate backend-endpoint Skill

Steps:

1. Invoke nav-skill-creator with task: "Generate backend-endpoint skill"
2. Provide context:
   • Express/Fastify/NestJS patterns
   • REST API conventions
   • Request validation
   • Error handling
3. Review generated skill structure
4. Test generated skill in nav-test project
5. Refine if needed

Validation:

• Skill auto-invokes on "add endpoint"
• Generates route with validation
• Includes error handling
• Includes tests

Phase 3: Generate database-migration Skill

Steps:

1. Invoke nav-skill-creator with task: "Generate database-migration skill"
2. Provide context:
   • SQL migration patterns
   • Knex/Prisma/TypeORM conventions
   • Rollback strategies
   • Schema validation
3. Review generated skill structure
4. Test generated skill in nav-test project
5. Refine if needed

Validation:

• Skill auto-invokes on "create migration"
• Generates migration + rollback
• Validates schema changes
• Follows migration tool conventions

Phase 4: Generate backend-test Skill

Steps:

1. Invoke nav-skill-creator with task: "Generate backend-test skill"
2. Provide context:
   • Jest/Vitest testing patterns
   • Mock strategies (dependency injection)
   • Fixture management
   • Integration test patterns
3. Review generated skill structure
4. Test generated skill in nav-test project
5. Refine if needed

Validation:

• Skill auto-invokes on "write test for"
• Generates comprehensive tests
• Includes fixtures and mocks
• Follows testing best practices

Phase 5: Generate frontend-test Skill

Steps:

1. Invoke nav-skill-creator with task: "Generate frontend-test skill"
2. Provide context:
   • React Testing Library patterns
   • Snapshot testing
   • E2E testing (Playwright/Cypress)
   • User interaction testing
3. Review generated skill structure
4. Test generated skill in nav-test project
5. Refine if needed

Validation:

• Skill auto-invokes on "test this component"
• Generates component tests
• Includes user interaction tests
• Follows testing best practices

Phase 6: Integration & Testing

Steps:

1. Test all 5 skills together in realistic workflow
2. Verify auto-invocation doesn't conflict
3. Measure token usage before/after
4. Document edge cases
5. Refine trigger phrases if needed

Validation:

• No skill trigger conflicts
• Consistent output quality
• 80%+ token reduction validated
• User workflow feels natural

Phase 7: Documentation & Release

Steps:

1. Update plugin.json with new skills
2. Update README.md with 5 new skills
3. Update DEVELOPMENT-README.md with TASK-11 completion
4. Create release notes for v2.3.0
5. Bump version to 2.3.0
6. Commit and push to GitHub
7. Create GitHub release

Validation:

• All docs reference correct version
• README shows all 12 skills (7 core + 5 project-specific)
• Release notes comprehensive
• GitHub release published

Token Impact Analysis

Before v2.3 (Manual Pattern Implementation)

Frontend component:

• Read 3 examples (~9k tokens)
• Read docs (~6k tokens)
• Total: ~15k tokens

Backend endpoint:

• Read 3 examples (~9k tokens)
• Read API docs (~6k tokens)
• Total: ~15k tokens

Database migration:

• Read migration tool docs (~7k tokens)
• Read examples (~5k tokens)
• Total: ~12k tokens

Backend test:

• Read testing framework docs (~10k tokens)
• Read examples (~8k tokens)
• Total: ~18k tokens

Frontend test:

• Read React Testing Library docs (~8k tokens)
• Read examples (~8k tokens)
• Total: ~16k tokens

Total per feature: ~76k tokens Over 10 features: ~760k tokens

After v2.3 (Skills Auto-Invoke)

Each skill usage:

• Skill description: 50 tokens (already loaded)
• Skill instructions: ~3k tokens (loaded on invoke)
• Functions: 0 tokens (execute separately)
• Total: ~3k tokens per use

Total per feature: ~15k tokens (5 skills × 3k) Over 10 features: ~150k tokens

Savings: 760k → 150k = 610k tokens saved (80% reduction)

Plugin Baseline Token Cost

v2.2: 350 tokens (7 skills) v2.3: 600 tokens (12 skills) Increase: +250 tokens

Trade-off: +250 token baseline for 610k+ token savings over project lifecycle

ROI: 2,440x return on investment

Success Metrics

Quality Metrics

• All 5 skills generate working code
• Generated code follows best practices
• Tests included and passing
• Consistent output across invocations

Token Efficiency

• 80%+ reduction in token usage per pattern
• <5k tokens per skill invocation
• Baseline stays under 1k tokens

User Experience

• Auto-invocation feels natural
• No trigger phrase conflicts
• Output matches user expectations
• Minimal manual refinement needed

Self-Improvement Validation

• nav-skill-creator successfully generates all 5 skills
• Minimal manual editing required
• Pattern proves repeatable
• Foundation for future skills established

Risks & Mitigation

Risk 1: Generated Skills Produce Low-Quality Output

Likelihood: Medium Impact: High

Mitigation:

• Test each skill thoroughly before moving to next
• Refine nav-skill-creator instructions based on learnings
• Include comprehensive examples in skill generation
• Iterate on templates until quality is high

Risk 2: Auto-Invocation Trigger Conflicts

Likelihood: Low Impact: Medium

Mitigation:

• Choose distinct trigger phrases
• Test all skills together for conflicts
• Document trigger phrase design in nav-skill-creator
• Allow manual skill selection if ambiguous

Risk 3: Skills Too Generic (Don't Match Project Patterns)

Likelihood: Medium Impact: Medium

Mitigation:

• Skills should analyze actual project patterns
• Include codebase exploration in skill generation
• Provide customization hooks in templates
• Document how to refine generated skills

Risk 4: Token Baseline Creeps Too High

Likelihood: Low Impact: Low

Mitigation:

• Keep skill descriptions concise (max 100 chars)
• Functions and examples load on-demand only
• Monitor baseline after each skill added
• Target: Keep baseline under 1k tokens

Related Tasks

• TASK-08: v2.1-v2.2 roadmap (defined these 5 skills)
• TASK-10: nav-skill-creator implementation (tool for generating skills)
• TASK-07: Skills migration strategy (foundation)

Notes

Why These 5 Skills?

Frontend component:

• Most common frontend task
• High value (every UI feature needs components)
• Clear patterns (React has well-established conventions)

Backend endpoint:

• Most common backend task
• High value (every API feature needs routes)
• Clear patterns (REST/GraphQL conventions)

Database migration:

• Tedious and error-prone manually
• High value (schema changes common)
• Critical (rollbacks prevent data loss)

Backend test:

• Often skipped due to effort
• High value (prevents regressions)
• Automatable (patterns are consistent)

Frontend test:

• Often skipped due to effort
• High value (UI regression prevention)
• Automatable (React Testing Library patterns)

Learning Opportunities

From Phase 1 (frontend-component):

• Quality of nav-skill-creator output
• Whether templates need refinement
• How much manual editing is typical
• Auto-invocation trigger effectiveness

From Phase 2-5:

• Refinement strategy for nav-skill-creator
• Common patterns across skill generation
• Edge cases to document
• Best practices for skill design

From Phase 6 (Integration):

• Real-world workflow with multiple skills
• Trigger phrase design patterns
• Token usage in realistic scenarios
• User experience insights

Future Enhancements (v2.4+)

More framework-specific skills:

• Next.js-specific (pages, API routes, SSR)
• Django-specific (views, models, serializers)
• Vue-specific (SFCs, composition API)

Generic infrastructure skills:

• Docker configuration
• CI/CD pipeline setup
• Deployment automation

Advanced testing skills:

• Load testing
• Security testing
• Performance profiling

Skill marketplace:

• Share community-generated skills
• Version and distribute skills
• Cross-project skill sync

Timeline

Phase 1 (frontend-component): 1-2 hours Phase 2 (backend-endpoint): 1-2 hours Phase 3 (database-migration): 1-2 hours Phase 4 (backend-test): 1-2 hours Phase 5 (frontend-test): 1-2 hours Phase 6 (Integration): 1-2 hours Phase 7 (Documentation): 1 hour

Total estimated time: 8-14 hours (1-2 days)

Task created: 2025-10-19 Priority: High Effort: Medium Target completion: v2.3.0