Skills
.Work. You
Rest

story-author

Community

Generate comprehensive Storybook stories.

Software Engineering#automation#testing#qa#component library#frontend development#storybook
Authorkaelig
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of detailed Storybook stories, ensuring all states, variants, and interaction tests are covered, thereby improving component quality and documentation.

Core Features & Use Cases

  • Comprehensive State Coverage: Generates stories for default, variants, interactive states (hover, focus, active, disabled), loading, error, and empty states.
  • Interaction Testing: Integrates @storybook/test for behavioral validation via play functions.
  • Accessibility Audits: Includes a dedicated story to assert zero accessibility violations.
  • Responsive Design Testing: Creates stories for mobile, tablet, and desktop viewports.
  • Edge Case Handling: Addresses long text, empty content, RTL layouts, and overflow scenarios.
  • Keyboard Navigation: Tests tab order, focus traps, and focus restoration.

Quick Start

Use the story-author skill to generate a <ComponentName>.stories.tsx file based on the provided component files and documentation.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: story-author
Download link: https://github.com/kaelig/react-craft/archive/main.zip#story-author

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.