gsp-project-build

To convert design files into production-ready frontend code, this Skill implements designs into a repository using a phased pipeline. It orchestrates agents to scaffold foundations, generate components, and construct screens with compile verification.

You can automate shadcn component generation by running the gsp-project-build pipeline. It spawns builder agents in component execution mode to apply tokenized brand systems and shadcn composition rules, generating UI components directly from designs.

The design-to-code pipeline process moves through scaffold, foundations, components, screens, extraction review, and finalize phases. It runs build commands at compile checkpoints, merges per-phase logs, and writes build artifacts to the project directory.

Yes, this frontend build automation works specifically with tokenized brand systems. It integrates design tokens during the foundations phase and applies them across generated components and screens to maintain brand consistency throughout the codebase.

Before running automated frontend scaffolding, you need completed design chunks and an active GSP project with a defined brand system. The pipeline uses these inputs to orchestrate agents and write build logs into your project directory.

Compile checkpoints are needed during component generation to verify code builds successfully at each phase. Running build commands ensures generated frontend code remains functional and traceable before moving to screen construction.