write-stories

Create and update Storybook stories and MDX documentation for BEEQ web components.

160|24|Updated Feb 22, 2023
One-click install
npx skills add https://github.com/Endava/BEEQ --skill write-stories-endava
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: write-stories
Source: https://github.com/Endava/BEEQ/tree/main/.agents/skills/write-stories
Command: npx skills add https://github.com/Endava/BEEQ --skill write-stories-endava

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual work of authoring and maintaining Storybook stories and MDX documentation for BEEQ web components, so component APIs and states stay discoverable and consistent.

Core Features & Use Cases

  • Story Creation: Build or update Storybook stories for new or changed bq-* components using @storybook/web-components-vite and lit-html.
  • Documentation Pages: Write MDX pages that present component usage, behavior, and API details alongside the stories.
  • State Coverage: Add required variants such as default, disabled, prefix, suffix, and primary appearance states to reflect real component behavior.
  • Example Use Case: When a button component gains a new size prop and event, use this Skill to update argTypes, controls, and stories so the documentation matches the implementation.

Quick Start

Generate the Storybook stories and MDX docs for the bq-button component following the BEEQ conventions and include the default, disabled, and primary variants.

Frequently Asked Questions about write-stories

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

FAQPage Schema
How do I create Storybook stories for web components using lit-html?

Create Storybook stories for web components using lit-html by configuring @storybook/web-components-vite and defining argTypes controls to render bq-* components and document their API behavior.

How do I write MDX documentation pages for BEEQ components?

Write MDX documentation pages for BEEQ components by placing MDX files in the component _storybook directory to present usage, behavior, and API details alongside the rendered Storybook stories.

How do I add state variants like disabled and primary to Storybook stories?

Add state variants like disabled and primary to Storybook stories by defining separate story templates using lit-html that reflect real component behavior for default, disabled, prefix, suffix, and primary appearance states.

Can I use @storybook/web-components-vite to update argTypes for new component props?

Yes, you can use @storybook/web-components-vite to update argTypes and controls for new component props, ensuring the Storybook documentation matches the updated implementation of your web components.

How do I handle Chromatic-safe snapshot testing for Storybook web components?

Handle Chromatic-safe snapshot testing for Storybook web components by configuring stable lit-html templates and argTypes to prevent flaky visual regressions during Chromatic snapshot capture.