skills.rest
styleframe-dev
styleframe-devOFFICIAL
Explore all skills by this author →
Website𝕏@styleframe_devGitHub

showcase-recipe

Generate Storybook showcases and Vue components from design.md and implementation.md.

91|4|Updated Jun 20, 2025
Search Tags:#documentation#vue#storybook#design-system#recipe#styleframe
One-click install
npx skills add https://github.com/styleframe-dev/styleframe --skill showcase-recipe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: showcase-recipe
Source: https://github.com/styleframe-dev/styleframe/tree/main/.claude/skills/showcase-recipe
Command: npx skills add https://github.com/styleframe-dev/styleframe --skill showcase-recipe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Step 4 of the Styleframe recipe creation chain. Build a Storybook showcase that demonstrates every variant, color, and size of the recipe, plus a main Vue component that consumers can adopt directly.

Core Features & Use Cases

  • Automates the creation of Storybook artifacts: styleframe.ts, stories.ts, the main Vue component, and per-variant previews for multi-part recipes.
  • Reads design.md and implementation.md to assemble the showcase and registers story IDs for document-recipe integration.
  • Produces a cohesive, ready-to-run showcase in apps/storybook with per-variant and per-color previews.
  • For multi-part recipes, generates per-sub-part Vue components and documents the created files in .context/recipe-<name>/showcase.md.

Quick Start

Run the showcase recipe to generate the complete Storybook showcase and all related Vue components from design.md and implementation.md.

Frequently Asked Questions about showcase-recipe

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

FAQPage Schema
How do I automate Storybook showcase generation for Vue design system components?▼

Generate per-sub-part Vue components and story IDs by assembling multi-part recipe inputs, then document all created files in .context/recipe-<name>/showcase.md to wire story IDs for automated documentation previews.

Can I generate per-variant and per-color Storybook previews from markdown inputs?▼

Generate per-variant and per-color previews by consuming design.md and implementation.md inputs, producing a cohesive ready-to-run Storybook showcase that demonstrates every variant, color, and size of your recipe.

How do I wire Storybook story IDs to enable automated previews in documentation?▼

Wire story IDs by writing .context/recipe-<name>/showcase.md with the generated story IDs, enabling document-recipe integration and automated previews for your Vue components within your documentation.

Does the Styleframe recipe showcase handle multi-part Vue components?▼

Multi-part recipes are handled by generating individual per-sub-part Vue components and documenting the created files in .context/recipe-<name>/showcase.md, ensuring every sub-part component is registered for Storybook.

What inputs do I need to prepare before building a Storybook showcase for a recipe?▼

Prepare design.md and implementation.md files as inputs before running the showcase recipe, which consumes these documents to automate the complete generation of Storybook artifacts and Vue components.

Related Skills

Explore More Design & Creative Skills→
styleframe-devstyleframe-dev
91

implement-recipe

Convert design.md files into TypeScript recipe implementations, barrel indices, and tests.

Official
Advanced
styleframe-devstyleframe-dev
91

design-recipe

Classify Styleframe component recipes into color and variant patterns with user-approved design documentation.

Official
Advanced
styleframe-devstyleframe-dev
91

create-recipe

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

Official
Intermediate
DiologIRDiologIR

create-storyboard

Convert design specifications and DEIS.md files into interactive StyleX and Storybook storyboards.

Official
Advanced