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

Ready to run

npx skills add https://github.com/grvpanchal/elegant --skill ui-story

💬 Prompt for ChatGPT / Claude Chat▼

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.