Skills
.Work. You
Rest

ui-story

Community

Streamline Storybook story authoring with CSF and edge-state coverage.

Software Engineering#storybook#interaction testing#ui-component#csf#edge states
Authorgrvpanchal
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: ui-story
Download link: https://github.com/grvpanchal/elegant/archive/main.zip#ui-story

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 620,000+ vetted skills library on demand.