skills.rest
lushly-dev
lushly-devOFFICIAL
Explore all skills by this author →
GitHub

build-stories

Create Storybook stories for web components using CSF3 and CEM.

4|1|Updated Dec 30, 2025
Search Tags:#testing#documentation#storybook#web components#csf3#cem
One-click install
npx skills add https://github.com/lushly-dev/afd --skill build-stories-lushly-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-stories
Source: https://github.com/lushly-dev/afd/tree/main/.claude/skills/build-stories
Command: npx skills add https://github.com/lushly-dev/afd --skill build-stories-lushly-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and testing of web component stories, ensuring consistent documentation, interactive examples, and automated interaction tests.

Core Features & Use Cases

  • CSF3 Story Authoring: Write stories using the latest Component Story Format.
  • CEM Integration: Leverage Custom Elements Manifest for autodocs and prop tables.
  • Play Function Testing: Turn stories into executable interaction tests.
  • Headless Testing: Run story tests automatically in CI environments.
  • Use Case: When developing a new web component, use this Skill to quickly generate its *.stories.ts file, configure Storybook for autodocs, and write play functions to test its core interactions.

Quick Start

Use the build-stories skill to write a new story for the 'my-element' component.

Frequently Asked Questions about build-stories

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

FAQPage Schema
How do I write Storybook stories for web components using CSF3?▼

To write Storybook stories for web components using CSF3, author story files using the latest Component Story Format and integrate Custom Elements Manifest for autodocs. This ensures consistent component documentation and interactive examples.

How do I automate interaction tests for web components in Storybook?▼

Automate interaction tests for web components in Storybook by implementing play functions within your stories. These functions turn stories into executable tests that run headlessly via addon-vitest in CI environments.

How does Custom Elements Manifest work with Storybook autodocs?▼

Custom Elements Manifest (CEM) works with Storybook autodocs by providing component metadata that automatically generates documentation and prop tables. This integration streamlines maintaining accurate web component documentation.

Can I run Storybook play function tests in headless CI environments?▼

Yes, you can run Storybook play function tests in headless CI environments using addon-vitest. This allows web component interaction tests to execute automatically without a browser UI during continuous integration.

What is the best way to test shadow DOM interactions in Storybook stories?▼

The best way to test shadow DOM interactions in Storybook stories is using assertion patterns within play functions. This approach validates web component interactions and accessibility checks directly within the story file structure.

Do I need Custom Elements Manifest to generate Storybook documentation for web components?▼

While not strictly required, leveraging Custom Elements Manifest (CEM) is recommended to automatically generate autodocs and prop tables. It significantly improves Storybook documentation accuracy for web components.

Related Skills

Explore More Software Engineering Skills→
Higashi-KotaHigashi-Kota

storybook

Document UI components with Storybook CSF3 showcase stories.

Community
Advanced
david-nossebrodavid-nossebro

storybook-expert

Fix fragile Storybook stories and tests to match the repo's setup.

Community
Advanced
adobeadobe
1.5k

migration-testing

Automate Vitest, Playwright, and Storybook tests for migrated components.

Official
Intermediate
matthewharwoodmatthewharwood
1

storybook-play-functions

Attach play functions to StoryObj for in-story interaction tests.

Community
Intermediate