frontend-component

# Frontend Component Generator Generate production-ready React/Vue components with TypeScript, tests, and styles following modern best practices. ## When to Invoke Auto-invoke when user mentions: - "Create a component" - "Add a component" - "New component" - "Build a component" - "Generate component for [feature]" ## What This Does 1. Generates component file with TypeScript and props interface 2. Creates test file with React Testing Library 3. Generates CSS module for styling 4. Creates barrel export (index.ts) 5. Validates naming conventions 6. Follows project patterns ## Execution Steps ### Step 0: Check Existing Patterns (Phase 0) Before gathering requirements, query the knowledge graph for what we already know about frontend/component work in this project. This mirrors `navigator-research`'s Phase 0 and prevents re-deriving patterns we've already decided on. ```bash PLUGIN_DIR="${CLAUDE_PLUGIN_ROOT:-$HOME/.claude/plugins/cache/navigator-marketplace/navigator}" [ -d "$PLUGIN_DIR" ] || PLUGIN_DIR="$HOME/.claude/plugins/marketplaces/navigator-marketplace" python3 "$PLUGIN_DIR/skills/nav-graph/functions/graph_manager.py" \ --action query --concept frontend \ --graph-path .agent/knowledge/graph.json 2>/dev/null | head -40 ``` If memories surface (look for `PATTERN`, `PITFALL`, `DECISION` entries), read the full memory files for any directly relevant ones: ```bash ls .agent/knowledge/memories/{patterns,pitfalls,decisions}/ 2>/dev/null ``` **What to do with what ...