Ui component creation

Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/cleanexpo/ui-component-creation

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill ui-component-creation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Creates UI components using shadcn/ui and design system patterns

SKILL.md

1.7 KB, as published. Nobody here has run it

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

'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