ui-pattern
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
Profile →npx skills add sickn33/agentic-awesome-skills --skill ui-pattern --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# UI Pattern Generator ## When to Use Use this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives. ## When NOT to use - For a single primitive component → use `/ss-component` - For a full mobile screen → use `/ss-page` - For an entire multi-page user flow → use `/ss-flow` - For design tokens and color/spacing decisions → use `/ss-tokens` Pattern type: **$0** Description: $ARGUMENTS ## Available Pattern Types ### Layout Patterns - **card-section**: Card with title + content inside page section (`mx-6`) - **grid-2col**: 2-column grid of cards (`grid grid-cols-2 gap-4 px-6`) - **scroll-horizontal**: Horizontal scrolling card list (`flex gap-3 overflow-x-auto scrollbar-hide`) - **list-section**: Vertical list of items inside a card - **form-section**: Form with labeled inputs in a card - **stat-grid**: Grid of StatCard components ### Data Display Patterns - **data-table**: Table with header and rows - **detail-card**: Key-value pair display - **chart-card**: Card wrapper for a Recharts chart - **ranking-list**: Numbered ranking with highlight ### Interactive Patterns - **action-sheet**: Bottom sheet with actio
- When to Use
- When NOT to use
- Available Pattern Types
- Layout Patterns
- Data Display Patterns
- Interactive Patterns
- Instructions
- Limitations
What does the ui-pattern skill do?
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill ui-pattern --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.