Ui component creation

Skill bg-szy/TOP-SKILLS/skills/marketplace/ui-component-creation

全球最大的 Claude Code 技能聚合库 · 收录 3900+ 来自 12+ 来源的技能，提供在线搜索与趋势分析看板 / The world's largest Claude Code skill aggregation hub — 3900+ skills from 12+ sources with online search and trend dashboard

Install

npx -y skills add bg-szy/TOP-SKILLS --skill ui-component-creation

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

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

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