Complete AI Training
Sign inBecome a member

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Skill · Design

Ui pattern

Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives

Agentic Awesome SkillsLicense: MITAdded Sep 5, 2026
Design & UXCreative & Media
Use it in my AI

How to use it

  1. Start your plan and connect your AI once
  2. Add the skill to your AI, one time only: press Copy skill and paste it into your AI's instructions: a project in ChatGPT, Claude or Grok, a Gem in Gemini, an agent in Microsoft 365 Copilot, or a rule in Cursor. It stays there for every new chat. In Kimi, paste it at the start of a new chat.
  3. Ask for the task in your own words, or say it directly:
Use the Ui pattern skill to help me with this.
SKILL.md

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

  1. Read the design system reference:
  • CLAUDE.md for conventions
  • components/ui/ for available primitives
  • components/patterns/ for existing patterns
  1. Compose the pattern from existing components — DO NOT recreate primitives.
  1. 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
  1. Use semantic tokens for all visual properties.
  1. 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.

More design skills

All design skills