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

3 skills

SortRecommendedNewestStarsA–Z

Results

Pressed Button Feedbackby UI Skillbook

Give every interactive control an immediate, physical-feeling response to a press.

Interaction

Siteplane Animated Buttonsby UI Skillbook

Buttons that animate on hover with sweeping or pass-through fills, a moving arrow, actions that expand, and entrance effects.

Siteplane UI

Siteplane Theme Togglesby UI Skillbook

Animated sun and moon toggles that switch an app between light and dark mode.

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