storybook-playground-parity

name: storybook-playground-parity description: Keep Storybook setup and generated preview stories aligned across playground apps. Use when adding or updating framework playground experiences. compatibility: Requires Storybook dependencies in each playground app. metadata: owner: shadcnui-foundry version: "1.0"

Storybook Playground Parity

When to use this skill

Use when adding Storybook support or maintaining parity across framework playground apps.

Required structure

• Storybook config location per app: /.storybook-cjs/
• Story files location per app: /stories/

Steps

1. Ensure app scripts exist:
   • storybook
   • storybook:build
2. Ensure framework-specific Storybook package dependencies are installed.
3. Add generated source preview stories for Button, Input, and Card.
4. Build Storybook for the app:
   • pnpm --filter <playground-package> storybook:build
5. Do not commit storybook-static/ output.

Validation matrix

• React playground Storybook build passes.
• Vue playground Storybook build passes.
• Svelte playground Storybook build passes.
• Angular playground Storybook build passes.
• Lit playground Storybook build passes.