SKILL.md
$27
Architectural rules
- Modular components: Break the design into independent files. Avoid large, single-file outputs.
- Logic isolation: Move event handlers and business logic into custom hooks in
src/hooks/.
- Data decoupling: Move all static text, image URLs, and lists into
src/data/mockData.ts.
- Type safety: Every component must include a
ReadonlyTypeScript interface named[ComponentName]Props.
- Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
- Style mapping:
- Extract the
tailwind.configfrom the HTML<head>.
- Sync these values with
resources/style-guide.json.
- Use theme-mapped Tailwind classes instead of arbitrary hex codes.
Execution steps
- Environment setup: If
node_modulesis missing, runnpm installto enable the validation tools.
- Data layer: Create
src/data/mockData.tsbased on the design content.
- Component drafting: Use
resources/component-template.tsxas a base. Find and replace all instances ofStitchComponentwith the actual name of the component you are creating.
- Application wiring: Update the project entry point (like
App.tsx) to render the new components.
- Quality check:
- Run
npm run validate <file_path>for each component.
- Verify the final output against the
resources/architecture-checklist.md.
- Start the dev server with
npm run devto verify the live result.
Troubleshooting
- Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
- Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.