ui-component-creation
Creates UI components using shadcn/ui and design system patterns
Best use case
ui-component-creation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Creates UI components using shadcn/ui and design system patterns
Teams using ui-component-creation should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ui-component-creation/SKILL.mdinside 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 | Not specified | 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
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 accessibilityRelated Skills
vue-component-generator
Vue Component Generator - Auto-activating skill for Frontend Development. Triggers on: vue component generator, vue component generator Part of the Frontend Development skill category.
styled-components-helper
Styled Components Helper - Auto-activating skill for Frontend Development. Triggers on: styled components helper, styled components helper Part of the Frontend Development skill category.
react-component-generator
React Component Generator - Auto-activating skill for Frontend Development. Triggers on: react component generator, react component generator Part of the Frontend Development skill category.
oo-component-documentation
Create or update standardized object-oriented component documentation using a shared template plus mode-specific guidance for new and existing docs.
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
ui-component-patterns
Build reusable, maintainable UI components following modern design patterns. Use when creating component libraries, implementing design systems, or building scalable frontend architectures. Handles React patterns, composition, prop design, TypeScript, and component best practices.
hig-components-system
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Use when asked about: "widget design", "live activity", "notification design", "complication", "home screen quick action", "top shelf", "watch face", "app clip", "app shortcut", "system experience". Also use when the user says "how do I design a widget," "what should my notification look like," "how do Live Activities work," "should I make an App Clip," or asks about surfaces outside the main app. Cross-references: hig-components-status for progress in widgets, hig-inputs for interaction patterns, hig-technologies for Siri and system integration.
hig-components-status
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading spinner", "status bar", "activity ring", "progress display", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says "how do I show loading state," "should I use a spinner or progress bar," "what goes in the status bar," or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.
hig-components-search
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says "how should search work in my app," "I need a breadcrumb," "how do I paginate content," or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.
hig-components-menus
Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure controls, and standard buttons. Use this skill when the user says "how should my buttons look," "what goes in the menu bar," "should I use a context menu or action sheet," "how do I design a toolbar," or asks about button design, menu design, context menu, toolbar, menu bar, action button, pop-up button, pull-down button, disclosure control, dock menu, edit menu, or any menu/button component layout and behavior. Cross-references: hig-components-search, hig-components-controls, hig-components-dialogs.
hig-components-layout
Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about sidebar, split view, tab bar, tab view, scroll view, window design, panel, list view, table view, column view, outline view, navigation structure, app layout, boxes, ornaments, or organizing content hierarchically in Apple apps. Also use when the user says how should I organize my app, what navigation pattern should I use, my layout breaks on iPad, how do I build a sidebar, should I use tabs or a sidebar, or my app doesn't adapt to different screen sizes. Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.