design-guide
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).
Before you install
- Last update
- Files in folder
- 2
- Scripts
- No script files found
- SKILL.md size
- 12 KB (about 3,171 tokens of context each time it loads)
- License
- MIT
- Source on GitHub
- paperclipai/paperclip
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Install
npx skills add paperclipai/paperclip@design-guideRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add paperclipai/paperclip@design-guide --agent claude-code -y- Project install writes to
.claude/skills/design-guide- Global install writes to
~/.claude/skills/design-guide
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /design-guide.
What it does
Paperclip Design Guide Paperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place. Always use with: frontend-design (visual polish) and web-design-guidelines (web best practices). --- 1. Design Principles - Dense but scannable. Maximum information without clicks to reveal. Whitespace separates, not pads. - Keyboard-first. Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse. - Contextual, not modal. Inline editing over dialog boxes. Dropdowns over page navigations. - Dark theme default. Neutral grays…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
Categories
Related skills
- paperclip
paperclipai/paperclip
Interact with the Paperclip control plane API for task coordination and governance. Use when checking assignments, updating issue status, posting comments, delegating work, managing routines, or calling Paperclip API endpoints.
- paperclip
paperclipai/paperclip
Interact with the Paperclip control plane API for task coordination and governance. Use when checking assignments, updating issue status, posting comments, delegating work, managing routines, or calling Paperclip API endpoints.
- paperclip
paperclipai/paperclip
Use for Paperclip-managed tasks and heartbeats: reading task context, delivering task documents or files, updating completion or blockers, coordinating or delegating work, and following company governance. Includes control plane API operations for assignments, comments, approvals, and routines.
- paperclip-create-agent
paperclipai/paperclip
Create new agents in Paperclip with governance-aware hiring. Use when you need to inspect adapter configuration options, compare existing agent configs, draft a new agent prompt/config, and submit a hire request.
- paperclip-create-plugin
paperclipai/paperclip
Create and develop external Paperclip plugins with the CLI-first workflow. Use when scaffolding a plugin, iterating on a local plugin, installing it into Paperclip, or updating plugin authoring docs.
- para-memory-files
paperclipai/paperclip
Use a file-based PARA memory system to store, retrieve, and organize durable knowledge across sessions. Trigger on saving facts, daily notes, entity records, weekly synthesis, recall, tacit user patterns, or plan memory.