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.…
- installs 8w
- 0
- 30-day movement
- starts with the next reading
- Related entries
- 3
- Connections
- 0
A SKILL.md that gives an AI coding agent Paperclip's UI design system rules: design tokens, typography, status/priority systems, component hierarchy, and composition patterns for a React 19 + Tailwind v4 + shadcn/ui frontend. It also references a component index and a /design-guide showcase page.
Use it when an agent needs to build or modify Paperclip frontend components that match the project's established design conventions instead of inventing its own.
Use it to
- Create new UI components following the design system
- Modify or extend existing components via composition
- Apply design tokens, typography, and status/priority colors
- Add pages or features consistent with existing patterns
- Consult the component index and showcase page
For Developers using AI coding agents on the Paperclip frontend
- Host repository
- paperclipai/paperclip
- Host stars
- 81k
- Host language
- TypeScript