create-recipe

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

91|4|Updated Jun 20, 2025

Search Tags:#workflow #testing #documentation #component #storybook #orchestrate #recipe

Ready to run

npx skills add https://github.com/styleframe-dev/styleframe --skill create-recipe-styleframe-dev

💬 Prompt for ChatGPT / Claude Chat▼

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.