What frameworks does this skill support?

It supports Rails (ViewComponents), React/Next.js, Vue/Nuxt, Svelte/SvelteKit, and Astro, as well as plain HTML projects.

Can I skip the showcase update for small changes?

While the skill enforces a strict rule for documentation, you can explicitly override it after Claude explains the long-term maintenance costs.

Does it work with Tailwind CSS?

Yes, it can scan Tailwind configurations and CSS files to extract color tokens, spacing, and typography for the foundations section.

How does the Audit mode work?

Audit mode scans your project's component directories and compares them against the showcase page to identify and fix any missing entries.

Design System Showcase

Name: Design System Showcase
Author: ZoranSpirkovski

byZoranSpirkovski

0•

Herramientas de Diseño

Automatically builds and maintains a living component library to ensure every UI element is visually documented and tested.

Design System Showcase transforms how teams build frontends by mandating a living documentation page for every UI component. It automatically detects your framework—whether React, Rails, Vue, Svelte, or Astro—and generates a comprehensive showcase where components are rendered in all their variants, states, and sizes. By enforcing an 'Iron Law' that no component work is complete without a showcase entry, it eliminates invisible components, prevents visual regressions, and provides a single source of truth for both developers and designers.

Características Principales

01Supports interactive state rendering including hover, active, and disabled states

02Automatic framework detection for Next.js, Rails, Vue, Svelte, and Astro

030 GitHub stars

04Enforces documentation-first development with mandatory showcase entries

05Generates foundations for color palettes, typography, spacing, and shadows

06Visual audit mode to identify and fix missing components in the library

Casos de Uso

01Creating a developer-friendly reference for design system handoffs

02Maintaining visual consistency during large-scale UI refactoring

03Bootstrapping a new project with a standardized component reference page

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zoranspirkovski/skills design-system-showcase

For use in Claude.ai and ChatGPT

Características Principales

01Supports interactive state rendering including hover, active, and disabled states

02Automatic framework detection for Next.js, Rails, Vue, Svelte, and Astro

030 GitHub stars

04Enforces documentation-first development with mandatory showcase entries

05Generates foundations for color palettes, typography, spacing, and shadows

06Visual audit mode to identify and fix missing components in the library

Casos de Uso

01Creating a developer-friendly reference for design system handoffs

02Maintaining visual consistency during large-scale UI refactoring

03Bootstrapping a new project with a standardized component reference page

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zoranspirkovski/skills design-system-showcase

For use in Claude.ai and ChatGPT