Define and enforce a shared UI design language for Paperclip frontend components.
npx skills add https://github.com/Kauedz/althius-alg --skill design-guide-kauedz
Please help me install this Agent Skill. Skill: design-guide Source: https://github.com/Kauedz/althius-alg/tree/main/.claude/skills/design-guide Command: npx skills add https://github.com/Kauedz/althius-alg --skill design-guide-kauedz
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).
Explore the Design Guide to align new UI components with tokens, typography, and patterns, and reference this skill alongside frontend-design and web-design-guidelines.
High-intent search queries and answers about installing and using this skill.
To maintain consistent UI design tokens across frontend components, apply a centralized design guide that defines naming conventions, typography scales, and status systems. This ensures reusable UI elements share the same visual language across all pages and showcases.
Design tokens are centralized variables that store visual attributes like typography scales and color palettes. They standardize frontend development by providing a single source of truth, ensuring consistent styling across all reusable UI components.
To create new frontend components for a dark-themed UI, reference a shared design guide that specifies keyboard-first principles, dense layouts, and systemic composition patterns. This aligns new elements with existing tokens and status conventions.
Yes, the design guide covers status and priority conventions for UI components. It provides specific rules for documenting and showcasing these states on the frontend, ensuring consistent visual feedback across all application pages.
The best way to document and showcase design tokens is to build a dedicated design-guide page. This page should display component conventions, typography scales, and composition patterns, aligning design work directly with frontend development.
You should not use a shared design guide when building highly custom, isolated prototypes that intentionally break established conventions. The guide enforces systemic patterns, so avoid it if your frontend requires entirely unique, non-standard visual compositions.
qazuorGuide UI teams through pre-coding design foundations for typography, color, and layout.
bharthraj1412Coordinate the creation of UI components and ensure consistent styling across Paperclip projects with this design system reference guide.
thetangstrProvide design standards and component usage instructions for Paperclip UI.
giosuetedeschi-specEnforce semantic design tokens and centralized components in Next.js UI development.
