Align Paperclip frontend UI components with the established design system.
npx skills add https://github.com/khoabd/paperclip --skill design-guide-khoabd
Please help me install this Agent Skill. Skill: design-guide Source: https://github.com/khoabd/paperclip/tree/main/.claude/skills/design-guide Command: npx skills add https://github.com/khoabd/paperclip --skill design-guide-khoabd
This Skill solves the problem of inconsistent, non-conforming Paperclip frontend components that break the app's professional dense, keyboard-first, dark-themed control plane design, eliminating rework and ensuring all UI work aligns with established conventions.
Use the design-guide skill to build a new reusable status filter component for the issues page that follows Paperclip's component hierarchy and composition patterns.
High-intent search queries and answers about installing and using this skill.
To ensure new React components match an existing dark-themed design system, apply established design tokens, component hierarchy rules, and composition patterns. This enforces visual consistency and eliminates rework across frontend interfaces.
Design tokens in a component hierarchy are centralized styling variables for colors, typography, and radius. They work by providing a single source of truth, ensuring UI components maintain consistent visual language across the application.
Create new reusable UI components when existing elements cannot satisfy specific layout requirements without breaking conventions. Follow established composition patterns, such as entity rows and metric card grids, to avoid styling mistakes and maintain structure.
Yes, this design system guidance works for keyboard-first control plane layouts. It provides specific conventions for dense, dark-themed interfaces, ensuring all new UI components and page features adhere to the established professional control plane design.
Update a design showcase page by integrating the newly created frontend components into the established display structure. This ensures all team members can review the visual elements and verify adherence to the application's design tokens and hierarchy.
ZeroGravitySkin-RonProvide frontend development guidelines for Next.js 16 App Router applications.
atototoGuide frontend development with Baton UI design system components and tokens.
paopp2Apply Tailwind CSS utility classes for responsive, themed UI styling.
aaltaayCoordinate end-to-end design across brand identity, tokens, UI styling, CIP mockups, and presentation assets.
