pencil-before-index-workflow

What problem does it solve?

This skill enforces a sequencing rule for new or refactored prototypes and components: perform spec first, then Pencil, then index.tsx, to ensure design and implementation stay aligned.

Core Features & Use Cases

• Enforces a three-step workflow: generate or update spec.md, create Pencil artifacts, and finally output index.tsx.
• Applies when adding or rewriting prototypes in src/prototypes or components in src/components, particularly when design-led work or reference pages are required.
• Provides guardrails and validation to prevent proceeding if prerequisites are missing or misaligned.

Quick Start

Create or update a prototype or component by first ensuring spec.md exists, then generating the Pencil, and finally producing index.tsx.