skills.rest
simota
simotaCOMMUNITY
Explore all skills by this author →
GitHub

Showcase

Create and maintain Storybook stories and React Cosmos fixtures for UI components.

68|14|Updated Jan 7, 2026
Search Tags:#documentation#accessibility#storybook#visual regression#ui components#react cosmos
One-click install
npx skills add https://github.com/simota/agent-skills --skill showcase
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Showcase
Source: https://github.com/simota/agent-skills/tree/main/showcase
Command: npx skills add https://github.com/simota/agent-skills --skill showcase

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of effectively documenting, testing, and cataloging UI components, ensuring they are well-presented, visually consistent, and accessible.

Core Features & Use Cases

  • Storybook/Cosmos Integration: Create and maintain stories/fixtures for UI components using Storybook or React Cosmos.
  • Visual Regression: Set up and integrate visual regression testing to catch UI bugs.
  • Use Case: When developing a new design system, use this Skill to generate Storybook stories for all new components, ensuring they are documented, testable, and visually validated against a baseline.

Quick Start

Use the Showcase skill to create Storybook stories for the Button component.

Frequently Asked Questions about Showcase

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

FAQPage Schema
How do I set up Storybook stories for UI components using CSF 3.0?▼

Yes, you can integrate visual regression testing using Chromatic, Playwright, or Lost Pixel. This Skill facilitates setting up visual regression to catch UI bugs and validate components against a baseline.

Can I use React Cosmos fixtures instead of Storybook for UI component cataloging?▼

Yes, you can use React Cosmos fixtures as an alternative to Storybook. This Skill supports creating and maintaining React Cosmos fixtures to effectively document and catalog your UI components.

How do I add accessibility testing to my UI component documentation?▼

You can add accessibility testing directly through your UI component documentation. This Skill supports accessibility auditing alongside visual regression to ensure components are well-presented and accessible.

What is the best way to automate visual regression and documentation for a design system?▼

The best way to automate visual regression and documentation for a design system is using this Skill, which generates Storybook stories, integrates visual regression tools, and ensures components are visually validated.

Do I need MDX 3 to maintain UI component documentation with this approach?▼

Yes, MDX 3 is supported for maintaining UI component documentation. This Skill uses MDX 3 alongside CSF 3.0 to automate the transformation of prototypes into production-ready component documentation.

Related Skills

Explore More Design & Creative Skills→
iButtersiButters
3

storybook

Create CSF 3.0 Storybook stories for React components with MDX documentation.

Community
Advanced
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
zinohomezinohome
1

storybook-setup

Automate Storybook setup and configuration for UI component documentation.

Community
Intermediate