multiAI Summary Pending

ui-component-creation

Creates UI components using shadcn/ui and design system patterns

231 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-component-creation/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/cleanexpo/ui-component-creation/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/ui-component-creation/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How ui-component-creation Compares

Feature / Agent	ui-component-creation	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Creates UI components using shadcn/ui and design system patterns

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# UI Component Creation Skill
## shadcn/ui + Design System Patterns

**When to Use**: Creating new UI components

---

## CRITICAL: Read Design System First

**BEFORE generating any UI**: Read `/DESIGN-SYSTEM.md`

**Quality Gate**: 9/10 minimum on:
- Visual distinctiveness
- Brand alignment
- Accessibility

---

## Pattern: shadcn/ui Component

```typescript
'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export function MyComponent({ data }: { data: any }) {
  return (
    <Card className="p-6 border-border-subtle bg-bg-card">
      <h2 className="text-xl font-semibold text-text-primary mb-4">
        {data.title}
      </h2>
      <p className="text-text-secondary mb-4">
        {data.description}
      </p>
      <Button variant="default" className="bg-accent-500 hover:bg-accent-600">
        Action
      </Button>
    </Card>
  );
}
```

---

## Design Tokens (Required)

**Use these, not raw values**:

**Colors**:
- `bg-bg-card` (not `bg-white`)
- `text-text-primary` (not `text-gray-900`)
- `accent-500` (#ff6b35 orange)
- `border-border-subtle`

**Spacing**:
- Tailwind classes (p-4, mb-6, etc.)

---

## Forbidden Patterns

❌ `bg-white` (use `bg-bg-card`)
❌ `text-gray-600` (use `text-text-secondary`)
❌ `grid grid-cols-3 gap-4` without responsive (add `md:`, `lg:`)

---

## Required Patterns

✅ Design tokens from system
✅ All states (hover, focus, disabled)
✅ Responsive breakpoints
✅ Accessibility (aria-labels)

---

**Standard**: Use design tokens, implement all states, ensure accessibility