UI Skillbook
  • Skills
  • Design.md
  • Learn
  • Agents
2

Skills

Instructions your agent can follow for layout, type, motion, forms and more.

By role
  • Designers
  • Engineers
  • Founders
  • Product
  • Motion designers
By topic
  • Layout
    203
  • Typography
    11
  • Motion
    63
  • Interaction
    107
  • Accessibility
    79
  • Responsive
    8
  • Forms
    32
  • Navigation
    12
  • Visual
    147
  • Performance
    34
  • Design Systems
    98
  • Taste
    73
  • Writing
    5
By agent
  • Claude Code
    117
  • Codex
    117
  • Cursor
    117
  • OpenCode
    117
  • Copilot
    1
  • Command Code
    1
  • Universal
    386

4 skills

SortRecommendedNewestStarsA–Z

Results

Color Contrast for Taste, Not Just Complianceby UI Skillbook

Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.

Visual

Empty States That Do Somethingby UI Skillbook

Treat empty states as an onboarding opportunity, not a placeholder to fill later.

Visual

Siteplane Empty Stateby UI Skillbook

A centred block, with optional media and actions, telling people why there is nothing here yet and how to proceed.

Siteplane UI

Siteplane Glassby UI Skillbook

Frosted, see-through takes on Card, Button, Menu, Context Menu, Popover and Tooltip, meant to sit on top of photos.

Siteplane UI

UI Skillbook

The field guide for building interfaces with AI.

npx uiskillbook start

Discover

  • All skills
  • Playbook
  • Collections
  • Design.md
  • Authors
  • Agents

Developers

  • CLI
  • API
  • Design system
  • MCP server
  • Registry
  • llms.txt
  • RSS

Community

  • GitHub
  • X
  • Submit a skill
  • About

Topics

  • Layout
  • Visual
  • Interaction
  • Design Systems
  • Accessibility
  • Taste
  • All topics

Collections

  • Audit accessibility
  • Build a great dashboard
  • Fix an ugly AI-generated interface
  • Improve interface motion
  • Ship a polished landing page
  • Siteplane UI
  • All collections

Agents

  • Claude Code
  • Codex
  • Cursor
  • OpenCode
  • Copilot
  • Command Code
  • All agents

Popular skills

  • Accessible Focus States
  • Color Contrast for Taste, Not Just Compliance
  • Copy Editing
  • Copywriting
  • Dashboard Information Density
  • Data Table Scannability
  • All skills

Playbook

  • Making buttons feel right
  • Spacing that doesn't look AI-generated
  • Designing dense dashboards
  • Motion without annoying people
  • Prevent layout shifts with aspect ratio
  • Balance heading text
  • All guides
© 2026 UI SkillbookBuilt by Ali Arain/@realaliarain