How do I install the UI Pattern skill?

Run npx skillmds@latest add humaisali/ui-pattern in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI Pattern safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Pattern?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Pattern free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published UI Pattern?

humaisali (@humaisali) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Pattern by humaisali — Agent Skill

Name: UI Pattern
Author: humaisali

File contents

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.md for conventions
- components/ui/ for available primitives
- components/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-6 for horizontal margin
- Section title: text-foreground font-bold text-[18px] mb-4
- List gap: space-y-3
- Grid gap: gap-4
Use semantic tokens for all visual properties.
Make the pattern a reusable component with props for dynamic content.

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.

---name: ui-patterndescription: Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitiveslicense: MIT---# UI Pattern Generator## When to UseUse 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## Instructions1. Read the design system reference: - `CLAUDE.md` for conventions - `components/ui/` for available primitives - `components/patterns/` for existing patterns2. Compose the pattern from existing components — DO NOT recreate primitives.3. Follow the design system layout rules: - Cards: `bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]` - Section wrapper: `mx-6` for horizontal margin - Section title: `text-foreground font-bold text-[18px] mb-4` - List gap: `space-y-3` - Grid gap: `gap-4`4. Use semantic tokens for all visual properties.5. Make the pattern a reusable component with props for dynamic content.## 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.

Frequently asked questions

UI Pattern