From adlc-react-frontend
Implement new React components using spec-driven development. Phase 1: Plan with Figma/requirements, Phase 2: Implement with TDD.
npx claudepluginhub sumanpapanaboina1983/adlc-accelerator-kit-pluginsImplement new React components using spec-driven development.
## Your Task
$ARGUMENTS
## Process: Plan → Implement (Two-Phase)
### Phase 1: Create Implementation Specification
**Use agent: frontend-planner**
1. **Gather Requirements**
- If Jira ticket referenced: `mcp__jira__get_issue` for requirements
- If Figma design referenced:
- `mcp__figma__get_file` for structure
- `mcp__figma__get_node` for specific components
- Extract: colors, typography, spacing, states
2. **Design the Component Architecture**
Create an Implementation Specification with:
- Componen.../frontendOptimizes frontend architecture and performance for a given requirement (required) and optional focus (e.g., "Optimize bundle size" performance).
/frontendScaffold React/Vite frontend with TypeScript, routing, state management, and deployment
/frontendReview frontend codebase for code quality, performance, and best practices
/frontendFrontend Dependabot remediation for triage, execution, and remediation release summary.
Implement new React components using spec-driven development.
$ARGUMENTS
Use agent: frontend-planner
Gather Requirements
mcp__jira__get_issue for requirementsmcp__figma__get_file for structuremcp__figma__get_node for specific componentsDesign the Component Architecture Create an Implementation Specification with:
Output the Specification Write a complete Implementation Specification following the spec-driven-planning skill format:
Use agent: frontend-implementer
Execute Test Phase (RED)
npm test -- ComponentName.test.tsx --run
# MUST FAIL - proves tests are valid
Execute Implementation Phase (GREEN)
npx tsc --noEmit
npm test -- ComponentName.test.tsx --run
# MUST PASS
Full Verification
npx tsc --noEmit
npm test -- --run
npm run lint
npm run build
Provide both: