Can it document complex interactive components?

Absolutely. It is designed to include basic usage, different variants, interactive examples, and even error states or edge cases.

What is a component story?

A component story is a documented example of a UI component that demonstrates its various states, configurations, and interactive behaviors for developers and designers.

Why use an AI skill for component stories?

It significantly reduces the manual effort required to document every prop and state, ensuring your design system remains up-to-date as components evolve.

Does this skill work with Rust-based UI frameworks?

Yes, it is specifically designed to follow patterns found in Rust projects, such as using section macros and generating .rs story files.

How does this skill ensure documentation consistency?

The skill analyzes existing patterns in your repository and uses structured section calls to ensure new stories match the established style and depth of your documentation.

Component Story Generator

Name: Component Story Generator
Author: samurmaykrr

bysamurmaykrr

•

113

•

设计工具

Generates comprehensive component stories and interactive usage examples for UI design systems.

This skill automates the creation of component stories, specifically tailored for documenting UI design systems. It enables developers to quickly generate structured examples that follow established project patterns, ensuring that every component variant, state, and interactive edge case is thoroughly documented. By organizing content into logical sections, it helps maintain a high-quality, consistent component library that serves as both a development playground and live documentation.

主要功能

01Automated section organization for logical component grouping

02Comprehensive coverage of all component variants and states

03113 GitHub stars

04Standardized Rust-based UI documentation structure

05Generation of interactive usage examples and edge cases

06Pattern-based story generation following existing codebase styles

使用场景

01Documenting new UI components within a design system library

02Generating edge-case documentation to improve component robustness

03Creating interactive playgrounds for component testing and visual regression

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add samurmaykrr/zqlz generate-component-story

For use in Claude.ai and ChatGPT

Download Skill