skills.rest
grvpanchal
grvpanchalCOMMUNITY
Explore all skills by this author →
Website𝕏@grvpanchalGitHub

ui-story

Create Storybook stories with CSF and cover edge states.

1|3|Updated Sep 4, 2023
Search Tags:#storybook#interaction testing#ui-component#csf#edge states
One-click install
npx skills add https://github.com/grvpanchal/elegant --skill ui-story
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-story
Source: https://github.com/grvpanchal/elegant/tree/main/skills/ui-story
Command: npx skills add https://github.com/grvpanchal/elegant --skill ui-story

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the process of creating and reviewing Storybook stories, ensuring that all component states and edge cases are thoroughly covered.

Core Features & Use Cases

  • Component Story Format (CSF) Support: Standardized approach for writing Storybook stories with metadata and named exports.
  • Edge State Coverage: Includes support for empty, error, loading, long-text, and icon-only states.
  • Play Functions for Interaction Tests: Enables the creation of play functions for interactive testing of components.

Quick Start

Use the ui-story skill to write a Storybook story for a component and cover all its edge cases.

Frequently Asked Questions about ui-story

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

FAQPage Schema
How do I automate Storybook story creation for UI components?▼

Automate Storybook story creation by using the ui-story Skill to generate Component Story Format (CSF) files with named exports and metadata. This ensures standardized documentation for front-end UI components.

What is the best way to cover edge states in Storybook?▼

Cover edge states in Storybook by generating stories that explicitly include empty, error, loading, long-text, and icon-only states. This ensures comprehensive documentation and testing of UI components.

How do I write play functions for Storybook interaction testing?▼

Write play functions for Storybook interaction testing by utilizing this Skill to automate interactive test coverage. It creates play functions that simulate user interactions with your UI components.

Does this approach support Component Story Format (CSF) for UI documentation?▼

Yes, this approach fully supports Component Story Format (CSF) by standardizing the way Storybook stories are written. It uses a structured approach with metadata and named exports for UI components.

Can I use this to test loading and error states in Storybook?▼

Yes, you can use this to test loading and error states in Storybook. The Skill explicitly covers these edge states along with empty, long-text, and icon-only variations for thorough UI component testing.

Related Skills

Explore More Software Engineering Skills→
dylantarredylantarre
38

storybook

Generate Storybook CSF 3.0 stories and MDX documentation for UI components.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

storybook-play-functions

Automate Storybook interaction tests with userEvent and waitFor assertions.

Official
Intermediate
ZiadNagarZiadNagar

testing

Plan, generate, and refine tests for JavaScript/TypeScript projects across unit to end-to-end levels.

Community
Advanced
kaeligkaelig
7

story-author

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

Community
Advanced