Navigator Skill Creator

Create project-specific skills by analyzing codebase patterns and automating repetitive workflows.

When to Invoke

Auto-invoke when user mentions:

• "Create a skill for [pattern]"
• "Automate this workflow"
• "We keep doing X manually"
• "Enforce this pattern"
• "Generate boilerplate for [feature type]"
• "We need consistency for [task type]"

What This Does

1. Analyzes codebase to understand project patterns
2. Identifies best practices from existing code
3. Generates skill with:
   • Auto-invocation triggers
   • Predefined functions
   • Templates
   • Examples
4. Tests the generated skill
5. Documents the new skill

Execution Steps

Step 1: Understand Skill Request

Ask clarifying questions:

• What pattern/workflow to automate?
• What triggers should invoke this skill?
• What output format is expected?
• Are there existing examples in the codebase?

Example dialogue:

User: "Create a skill for adding React components"
Assistant: "I'll analyze your codebase to understand React component patterns.
- What directory are components in?
- Do you use TypeScript or JavaScript?
- Do you want tests generated automatically?
- Are there style files (CSS/SCSS) per component?"

Step 2: Analyze Codebase Patterns

Use Task agent to explore (saves 60-80% tokens):

Use Task agent with subagent_type=Explore:
"Find existing [pattern type] in codebase:
 - Locate all [files matching pattern]
 - Identify common structure
 - Extract best practices
 - Find configuration files
 - Return summary of findings"

What to look for:

• File naming conventions (kebab-case, PascalCase, etc.)
• Directory structure patterns
• Import/export patterns
• Testing patterns
• Configuration patterns
• Documentation patterns

Example for React components:

Task agent finds:
- Components in src/components/
- PascalCase naming (UserProfile.tsx)
- Co-located tests (UserProfile.test.tsx)
- Props interfaces defined above component
- Export default at bottom

Step 3: Design Skill Structure

Determine skill metadata:

name: [project]-[pattern-type]
description: [When to auto-invoke + what it does]
allowed-tools: [Read, Write, Edit, Grep, Glob, Bash, Task]
version: 1.0.0

Plan directory structure:

skills/[skill-name]/
├── SKILL.md              # Main instructions
├── functions/            # Python helper scripts
│   └── [generator].py
├── examples/             # Reference implementations
│   └── [example].[ext]
└── templates/            # Output format templates
    └── [template].[ext]

Design predefined functions:

• What repetitive logic can be automated?
• What validation should be enforced?
• What formatting ensures consistency?

Example functions for frontend-component skill:

• component_generator.py - Generate component boilerplate
• test_generator.py - Generate test file
• style_generator.py - Generate style file
• name_validator.py - Validate component naming

Step 4: Generate Skill Files

4.1 Create SKILL.md

---
name: [skill-name]
description: [Auto-invocation triggers + purpose]
allowed-tools: [List of tools]
version: 1.0.0
---

# [Skill Title]

[Brief description of what this skill does]

## When to Invoke

Auto-invoke when user says:
- "[trigger phrase 1]"
- "[trigger phrase 2]"
- "[trigger phrase 3]"

## What This Does

1. [Step 1 overview]
2. [Step 2 overview]
3. [Step 3 overview]

## Execution Steps

### Step 1: [Step Name]

[Detailed instructions for this step]

**Use predefined function**: `functions/[function-name].py`

4.2 Create Predefined Functions

# functions/[generator].py

def generate_[output](name, config):
    """
    Generate [output type] based on project patterns.

    Args:
        name: [Description]
        config: [Description]

    Returns:
        [output]: [Description]
    """
    # Implementation based on codebase analysis
    pass

4.3 Create Examples

examples/
└── [reference-implementation].[ext]
    - Real example from codebase (best practice)
    - Shows expected structure
    - Demonstrates conventions

4.4 Create Templates

templates/
└── [output-template].[ext]
    - Skeleton structure with placeholders
    - ${VAR_NAME} for substitution
    - Comments explaining sections

Step 5: Test Generated Skill

5.1 Verify skill loads:

# In project root
grep -r "name: [skill-name]" skills/

5.2 Test auto-invocation:

In Claude Code conversation:
"[Use one of the auto-invoke trigger phrases]"

Expected: Skill should be detected and loaded

5.3 Test execution:

• Run through skill steps
• Verify functions work correctly
• Check output matches template
• Validate generated code follows patterns

5.4 Iterate if needed:

• Fix function bugs
• Improve templates
• Add missing examples
• Clarify instructions

Step 6: Document New Skill

Update project documentation:

1. CLAUDE.md - Add

...