ui-pattern
Generates interface blocks like cards or forms using basic design elements. Assembles complex interfaces.
What it does
This tool creates visual interface blocks for websites or apps, like cards, lists, or forms, using pre-made pieces from a design system.
When to use it
- ✓When you need a card with a title and content.
- ✓When you want a horizontally scrolling list of items.
- ✓When you need a simple form inside a card.
Example of what to ask your AI
“Create a card with a title and content to display product information.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
You specify the type of visual block you want (e.g., card, list, form), and the tool uses ready-made components to assemble it, following defined design rules.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill ui-patternOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/ui-pattern/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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 action buttons
- filter-bar: Horizontal filter/tab bar
- search-header: Search input in header area
Instructions
Read the design system reference:
CLAUDE.mdfor conventionscomponents/ui/for available primitivescomponents/patterns/for existing patterns
Compose the pattern from existing components — DO NOT recreate primitives.
Follow the design system layout rules:
- Cards:
bg-card rounded-2xl p-6 shadow-[var(--shadow-card)] - Section wrapper:
mx-6for horizontal margin - Section title:
text-foreground font-bold text-[18px] mb-4 - List gap:
space-y-3 - Grid gap:
gap-4
- Cards:
Use semantic tokens for all visual properties.
Make the pattern a reusable component with props for dynamic content.
Example
User request:
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
FAQ
What are 'primitives' or 'components'?
These are the basic building blocks of the interface, like a button, a text field, or an icon, that are already available in the design system.
When should I NOT use this tool?
Don't use it to create a single button or field, nor to build an entire screen or a multi-page flow. Other tools are available for those tasks.
What are 'semantic tokens'?
These are names that represent visual values, like 'primary color' or 'medium spacing', instead of using direct values like '#FFFFFF' or '16px'.
Details
Original description by the author
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
Popularity
- GitHub stars
- 48k
- Ranking position
- #4427
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC