design-guide Skill
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 toke Published by microsoft in amplifier-app-paperclip.
What is design-guide Skill?
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 toke Published by microsoft in amplifier-app-paperclip. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use design-guide Skill
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/amplifier-app-paperclip
- Skill file: .claude/skills/design-guide/SKILL.md
What it does
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 toke
Skill instructions
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 (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. --- 2. Tech Stack - React 19 + TypeScript + Vite - Tailwind CSS v4 with CSS variables (OKLCH color space) - shadcn/ui (new-york style, neutral base, CSS v
Explore related resources
Frequently asked questions
What is design-guide?
design-guide is a open-source AI agent skill with Copy skill directory. Paperclip UI design system guide for building consistent, reusable frontend components.
Who is design-guide best for?
design-guide is best for reusing agent instructions, scripts, and references, design and media workflows.
How do I install design-guide?
Install or run design-guide using Copy skill directory. Check design-guide for the latest setup command.
Is design-guide actively maintained?
design-guide may need a closer maintenance check before production use.
Auto-fetched from GitHub.
