pencil-before-index-workflow

To align prototype design and implementation, enforce a spec-first workflow by sequencing spec.md generation, Pencil artifact creation, and index.tsx output. This prevents misalignment between design specs and code.

The correct sequence for creating design-led components is spec first, then Pencil, then index.tsx. You must generate or update spec.md, create Pencil artifacts based on that spec, and validate alignment before finally outputting the index.tsx file.

To start building a new prototype in src/prototypes, first ensure a spec.md file exists. Then generate the Pencil file based on that spec, and finally produce the index.tsx code after validating alignment between the spec and Pencil artifacts.

Yes, you need an existing spec.md before generating Pencil files. The workflow requires spec.md as a prerequisite, provides guardrails to prevent proceeding if it is missing, and validates alignment before outputting index.tsx.

When dependencies are missing during component refactoring, the workflow provides safeguards to prevent proceeding. It validates alignment and checks for missing prerequisites, stopping the generation of Pencil artifacts or index.tsx output to avoid errors.