66 lines
3.6 KiB
Markdown
66 lines
3.6 KiB
Markdown
# Execute TypeScript PRP
|
|
|
|
## PRP File: $ARGUMENTS
|
|
|
|
## Mission: One-Pass TypeScript Implementation Success
|
|
|
|
PRPs enable working TypeScript/React code on the first attempt through:
|
|
|
|
- **Context Completeness**: Everything needed, nothing guessed
|
|
- **Progressive Validation**: 4-level gates catch errors early
|
|
- **Pattern Consistency**: Follow existing TypeScript/React codebase approaches
|
|
- **Type Safety**: Leverage TypeScript's compile-time error detection
|
|
- Read PRPs/README.md to understand PRP concepts
|
|
|
|
**Your Goal**: Transform the PRP into working TypeScript code that passes all validation gates and maintains type safety.
|
|
|
|
## Execution Process
|
|
|
|
1. **Load PRP**
|
|
- Read the specified TypeScript PRP file completely
|
|
- Absorb all context, patterns, requirements and gather codebase intelligence
|
|
- Use the provided documentation references and file patterns, consume the right documentation before the appropriate todo/task
|
|
- Trust the PRP's context and guidance - it's designed for one-pass success
|
|
- If needed do additional codebase exploration and research as needed
|
|
- Pay special attention to TypeScript interfaces, component patterns, and Next.js App Router structure
|
|
|
|
2. **ULTRATHINK & Plan**
|
|
- Create comprehensive implementation plan following the PRP's task order
|
|
- Break down into clear todos using TodoWrite tool
|
|
- Use subagents for parallel work when beneficial (always create prp inspired prompts for subagents when used)
|
|
- Follow the TypeScript/React patterns referenced in the PRP
|
|
- Use specific file paths, interface names, component names, and type definitions from PRP context
|
|
- Never guess - always verify the codebase patterns and examples referenced in the PRP yourself
|
|
- Consider TypeScript compilation dependencies (types before components, components before pages)
|
|
|
|
3. **Execute Implementation**
|
|
- Follow the PRP's Implementation Tasks sequence, add more detail as needed, especially when using subagents
|
|
- Use the TypeScript/React patterns and examples referenced in the PRP
|
|
- Create files in locations specified by the desired codebase tree
|
|
- Apply TypeScript naming conventions from the task specifications and CLAUDE.md
|
|
- Ensure proper TypeScript typing throughout (interfaces, props, return types)
|
|
- Follow Next.js App Router patterns for file-based routing
|
|
|
|
4. **Progressive Validation**
|
|
|
|
**Execute the 4-level validation system from the TypeScript PRP:**
|
|
- **Level 1**: Run TypeScript syntax & style validation commands from PRP (ESLint, tsc, Prettier)
|
|
- **Level 2**: Execute component and hook unit test validation from PRP
|
|
- **Level 3**: Run Next.js integration testing commands from PRP (dev server, API routes, production build)
|
|
- **Level 4**: Execute TypeScript/React-specific validation from PRP (E2E, performance, accessibility)
|
|
|
|
**Each level must pass before proceeding to the next.**
|
|
|
|
5. **Completion Verification**
|
|
- Work through the Final Validation Checklist in the PRP
|
|
- Verify all Success Criteria from the "What" section are met
|
|
- Confirm all Anti-Patterns were avoided (especially TypeScript/React-specific ones)
|
|
- Verify TypeScript compilation is successful with no errors
|
|
- Ensure proper Server/Client component separation if using Next.js
|
|
- Implementation is ready and working with full type safety
|
|
|
|
**Failure Protocol**: When validation fails, use the TypeScript/React patterns and gotchas from the PRP to fix issues, then re-run validation until passing. Pay special attention to:
|
|
- TypeScript compilation errors and type mismatches
|
|
- React hydration issues between server and client
|
|
- Next.js App Router specific requirements
|
|
- Component prop interface violations |