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

5 skills

SortRecommendedNewestStarsA–Z

Results

Optical Alignmentby UI Skillbook

Align interface elements by perceived visual weight, not just mathematical geometry.

Visual

Siteplane Codeby UI Skillbook

Inline code and code blocks with optional highlighting, titles, line numbers, marked lines, masking and copy.

Siteplane UI

Siteplane Kbdby UI Skillbook

Styled notation for a keyboard key or a key combination inside text, buttons or menus.

Siteplane UI

Siteplane Truncateby UI Skillbook

Cuts text after one line or a set number of lines with an ellipsis and shows the full text in a tooltip.

Siteplane UI

Siteplane Typesetby UI Skillbook

Applies the kit's typography to rendered markdown, like chat replies or docs, by mapping elements to components.

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