How does this improve design system maintenance?

By automating the boilerplate for states and documentation, it ensures that all contributors follow the same implementation patterns, reducing technical debt.

What are prefix and suffix slots?

These are standardized areas within components (like Inputs or Buttons) designed to house icons or secondary actions before or after the main content.

Does this skill handle documentation?

Yes, after creating a component in the UI package, it prompts for and helps structure MDX documentation in the demo package.

What UI states are supported by default?

The skill includes patterns for Neutral, Primary, Success, Warning, and Danger states to ensure hierarchical and semantic consistency.

Design System Component Creator

Name: Design System Component Creator
Author: eqtylab

byeqtylab

0•

Design Tools

Generates standardized UI components for the Equality design system with built-in state management and documentation hooks.

This skill automates the process of adding new UI components to the Equality design system, ensuring strict adherence to established architectural patterns. It handles the scaffolding of common states—including Neutral, Primary, Success, Warning, and Danger—and implements flexible prefix/suffix slots for layout consistency. Beyond code generation, the skill streamlines the maintenance of the design system by enforcing the creation of corresponding MDX documentation within the demo package, ensuring that every new interface element is production-ready and well-documented.

Key Features

01Implements consistent prefix and suffix slots for icon and button placement

02Enforces Equality design system architectural patterns and naming conventions

03Reduces boilerplate code when expanding the component library

04Scaffolds UI components with standardized state variations (Success, Warning, Danger, etc.)

050 GitHub stars

06Integrates with the documentation workflow by targeting MDX content paths

Use Cases

01Automating the synchronization between UI component creation and documentation

02Ensuring design system consistency across decentralized development teams

03Adding new interactive elements like buttons or inputs that require multiple state variations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eqtylab/equality create-component

For use in Claude.ai and ChatGPT

Download Skill