design-guide — Skills — getagentictools

What it does

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 (OKLCH), not pure black. Accent colors for status/priority only. Text is the primary visual element.

Component-driven. Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic.

React 19 + TypeScript + Vite

Tailwind CSS v4 with CSS variables (OKLCH color space)

Source

Repository: https://github.com/getpaperclipai/paperclip

design-guide FAQ

What does the design-guide skill do?

> 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). 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.

What does design-guide require?

Use semantic token names, never raw color values: | Token | Usage |

How do I install design-guide?

Run: npx -y skills add https://github.com/getpaperclipai/paperclip --skill design-guide --agent claude-code — the source lives at github.com/getpaperclipai/paperclip.

Maintain design-guide?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![design-guide on getagentictools](https://getagentictools.com/badge/skills/getpaperclipai-paperclip-design-guide.svg)](https://getagentictools.com/skills/getpaperclipai-paperclip-design-guide?ref=badge)

npx agentictools info skills/getpaperclipai-paperclip-design-guide

The second line is the CLI lookup for this page — handy in READMEs and docs.