Skip to content
mcp/skillhub

Agent Skill

Design Guide skill

design-guidepaperclipai/paperclip.claude/skills/design-guide/SKILL.md

Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).

106kMIT

always on

105 tokname + description

once used

2,890 tokSKILL.md body

bundled files

110 KB

repo stars

106kGitHub

Install the Design Guide skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/paperclipai/paperclip --skill design-guide

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/paperclipai/paperclip.git /tmp/paperclip
mkdir -p ~/.claude/skills
cp -R /tmp/paperclip/.claude/skills/design-guide ~/.claude/skills/design-guide

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description105 tok
When the agent uses itThe SKILL.md instructions2,890 tok
Only if opened1 bundled files (10 KB)varies

Until it is used, design-guide costs about 13× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 82 skills from paperclipai/paperclip would load 3,485 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Paperclip Design Guide
  • 1. Design Principles
  • 2. Tech Stack
  • 3. Design Tokens
  • Colors
  • Radius
  • Shadows
  • 4. Typography Scale
  • 5. Status & Priority Systems
  • Status Colors (consistent across all entities)
  • Priority Icons
  • Agent Status Dots
  • 6. Component Hierarchy
  • When to Create a New Component
  • 7. Composition Patterns
  • Entity Row with Status + Priority
  • Grouped List
  • Property Row
  • Metric Card Grid
  • Progress Bar (Budget)
  • Comment Thread
  • Cost Table
  • Log Viewer
  • 8. Interactive Patterns

More skills from paperclipai/paperclip

All skills in this repo
  1. LLM Wiki Maintainerpaperclipai/paperclip

    Use the LLM Wiki plugin tools to maintain a cited local company wiki.

    106k21 tok idle · 184 in use
  2. add-product-e2e-evalpaperclipai/paperclip

    Add or extend a Paperclip full-stack runner E2E workflow, fixture, matcher, or report evidence path for local or Daytona execution.

    106k36 tok idle · 955 in use
  3. add-runner-evalpaperclipai/paperclip

    Add or extend a Paperclip Runner protocol evaluation definition, roster, assertion, or report fixture with provenance and narrow validation.

    106k30 tok idle · 859 in use
  4. agent-browserpaperclipai/paperclip

    Drive a real browser to inspect or interact with a web page or app — navigate, take screenshots, read console and network, fill simple forms — for verification tasks, not unattended automation.

    106k40 tok idle · 1,010 in use
  5. agentmailpaperclipai/paperclip

    Use your assigned AgentMail inbox to read email tasks, explicitly send or reply, and check delivery. Provided automatically by your inbox assignment.

    106k30 tok idle · 902 in use
  6. check-prpaperclipai/paperclip

    Check a GitHub, GitLab, or Perforce PR/MR/CL for review comments, failing checks, and PR-body gaps. Use when asked to inspect, fix, or prepare a change for submission.

    106k46 tok idle · 3,781 in use
  7. company-creatorpaperclipai/paperclip

    Create agent company packages that conform to agentcompanies/v1. Use when asked to create a company, scaffold an agent team, hire agents, or turn a repo/skills collection into a company package.

    106k44 tok idle · 2,626 in use
  8. complainpaperclipai/paperclip

    Autonomously yeet a brief, unstructured complaint about agent tooling or doing agent work. Preserve the raw voice. Submit proactively without permission, preview, or announcement, then continue the primary task.

    106k43 tok idle · 795 in use