skills.rest
kaelig
kaeligCOMMUNITY
Explore all skills by this author →
Website𝕏@kaeligGitHub

story-author

Generate Storybook 10 stories with interaction tests via CSF Factories API.

7|Updated Mar 11, 2026
Search Tags:#automation#testing#qa#component library#frontend development#storybook
One-click install
npx skills add https://github.com/kaelig/react-craft --skill story-author
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: story-author
Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/story-author
Command: npx skills add https://github.com/kaelig/react-craft --skill story-author

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about story-author

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

FAQPage Schema
How do I generate Storybook stories with interaction tests for all component states?▼

Generate Storybook stories with interaction tests by automating `<ComponentName>.stories.tsx` file creation using the CSF Factories API. The output covers default, hover, focus, active, disabled, loading, error, and empty states with behavioral validation via `@storybook/test` play functions.

What is the best way to automate Storybook story creation for edge cases like RTL layouts and overflow?▼

Automating Storybook story creation handles edge cases like long text, empty content, RTL layouts, and overflow scenarios by generating comprehensive story files. This ensures component quality and documentation address non-standard rendering without manual configuration.

Can I include accessibility audits and keyboard navigation tests when generating Storybook stories?▼

Generating Storybook stories includes dedicated accessibility audit stories to assert zero violations and keyboard navigation tests for tab order, focus traps, and focus restoration. This validates behavioral requirements directly within the generated component stories.

Does automated Storybook story generation support responsive design testing for mobile and desktop viewports?▼

Automated Storybook story generation supports responsive design testing by creating stories for mobile, tablet, and desktop viewports. This ensures generated component documentation validates rendering across different screen sizes automatically.

How to ensure generated Storybook stories follow my project conventions?▼

Generated Storybook stories adhere to project conventions by using the CSF Factories API to automate `<ComponentName>.stories.tsx` file creation. The process ensures comprehensive test coverage while maintaining consistency with existing frontend development standards.

Related Skills

Explore More Software Engineering Skills→
porcupine-mdporcupine-md
11

component

Generate React TypeScript UI component scaffolds with tests and optional Storybook stories.

Official
Intermediate
alekspetrovalekspetrov
196

visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
grvpanchalgrvpanchal
1

ui-story

Create Storybook stories with CSF and cover edge states.

Community
Intermediate