create-recipe

Orchestrate six sub-skills to create Styleframe recipes with tests, Storybook, and docs.

91|4|Updated Jun 20, 2025
One-click install
npx skills add https://github.com/styleframe-dev/styleframe --skill create-recipe-styleframe-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-recipe
Source: https://github.com/styleframe-dev/styleframe/tree/main/.claude/skills/create-recipe
Command: npx skills add https://github.com/styleframe-dev/styleframe --skill create-recipe-styleframe-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Orchestrates an end-to-end Styleframe recipe creation by coordinating six sub-skills to produce a complete recipe with tests, a Storybook showcase, and docs.

Core Features & Use Cases

  • Chain six steps: /research-component, /design-recipe, /implement-recipe, /showcase-recipe, /document-recipe, /verify-recipe, with artifacts stored under .context/recipe-<name>/ and final sources under theme/src/recipes/<name>/, apps/storybook, and apps/docs.
  • Supports resumability: can resume or re-run any single step via its sub-skills, reusing existing artifacts when present.
  • Automatic artifact flow: validates presence of prior steps before proceeding and summarizes progress after each step.

Quick Start

Provide a component name to begin the six-step recipe chain and let the orchestrator manage the full workflow.

Frequently Asked Questions about create-recipe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate component creation workflow with testing and Storybook documentation?

You can automate end-to-end component creation by orchestrating a six-step recipe chain that produces tests, a Storybook showcase, and docs automatically. The workflow coordinates research, design, implementation, showcase, documentation, and verification steps sequentially.

Can I resume an interrupted component recipe workflow from a specific step?

Yes, the recipe workflow supports resumability, allowing you to re-run or resume any single step via its sub-skills. It reuses existing artifacts stored under the recipe context directory when they are present, preventing redundant work.

What is the correct step-by-step process for generating a complete component recipe?

The process chains six ordered steps: research-component, design-recipe, implement-recipe, showcase-recipe, document-recipe, and verify-recipe. Each step validates the presence of prior step artifacts before proceeding and summarizes progress after completion.

Where are component recipe artifacts and final source files stored during orchestration?

Artifacts are stored under the .context/recipe-<component-name>/ directory during execution. Final sources are placed under theme/src/recipes/<name>/, apps/storybook, and apps/docs to ensure proper project organization.

Do I need to manually invoke each sub-skill when orchestrating a recipe?

No, the orchestrator manages the full workflow automatically once you provide a component name. It invokes each of the six sub-skills in order and handles artifact flow and validation between steps without manual intervention.