Ui component creation

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

Creates UI components using shadcn/ui and design system patternsFrom its SKILL.md

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.
5 stars5 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.

SKILL.md

1.7 KB, 421 tokens by cl100k_base, 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

What ships with it: 1 file

17.0 KB alongside SKILL.md

skill-report.json17.0 KB