# Create Component

> Add a new component to the design system

- Skill: `majiayu000/create-component` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/create-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/create-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/create-component

---


# Create Component

When creating Equality components,

## Common Patterns

### States

We commonly use the following states for components:

- Neutral (Default)
- Primary (A hierarchical increase, uses the primary brand color)
- Success (Something has worked correctly)
- Warning (The user should be informed that something may not be working as intended or requires attention)
- Danger (Destructive actions or serious errors)

### Prefix and Suffix Slots

Components like "Button" and "Input" have `prefix` and `suffix` slots to place icons or buttons before, or after the primary component content.

## Documentation

After creating the component in the "ui" package, always create a corresponding docs MDX under `packages/demo/src/content/components`.

Review the `create-documentation` skill for instructions on how to format the docs.