Is this skill specific to Rust development?

While optimized for the zTerm terminal UI ecosystem which uses Rust, the patterns it generates are applicable to developers following similar component-driven design patterns.

How does this skill ensure consistency?

It specifically follows existing patterns in the zTerm repository, such as those found in crates/story/src/stories, and uses the section! macro for organization.

What is a component story in this context?

A story is a specialized example that demonstrates a UI component's appearance, variants, and behavior within a design system or gallery.

Can it handle complex component states?

Yes, the skill is designed to include basic usage, interactive examples, edge cases, and error states to provide comprehensive coverage.

Component Story Generator

Name: Component Story Generator
Author: zerx-lab

byzerx-lab

•

デザインツール

Automates the creation of comprehensive UI component stories and usage examples following Rust-based design patterns.

概要

This skill streamlines the development workflow for terminal UI components by generating standardized stories and usage examples. By adhering to established patterns within the zTerm ecosystem, it ensures that every component is documented with consistent structure, using specific macros like `section!` to organize variants. It is an essential tool for developers looking to maintain a high-quality design system, providing a framework to showcase basic usage, interactive states, and edge cases for any new or existing component.

主な機能

17 GitHub stars
Consistent structural organization using section! macros
Adherence to project-specific architectural patterns
Comprehensive coverage of component states and variants
Automated Rust-based story template generation
Scaffolding for interactive and error-state examples

ユースケース

Ensuring architectural consistency across a library's component gallery
Adding interactive usage examples to a terminal design system
Documenting a newly created terminal UI component with diverse visual states

概要

主な機能

17 GitHub stars
Consistent structural organization using section! macros
Adherence to project-specific architectural patterns
Comprehensive coverage of component states and variants
Automated Rust-based story template generation
Scaffolding for interactive and error-state examples

ユースケース

Ensuring architectural consistency across a library's component gallery
Adding interactive usage examples to a terminal design system
Documenting a newly created terminal UI component with diverse visual states