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

Ready to run

npx skills add https://github.com/simota/agent-skills --skill showcase

💬 Prompt for ChatGPT / Claude Chat▼

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.