Guide UI component creation with design tokens and typography in Paperclip.
npx skills add https://github.com/tamzi/theorg --skill design-guide-tamzi
Please help me install this Agent Skill. Skill: design-guide Source: https://github.com/tamzi/theorg/tree/main/.claude/skills/design-guide Command: npx skills add https://github.com/tamzi/theorg --skill design-guide-tamzi
This Skill provides a comprehensive guide for designing and implementing consistent, reusable UI components within the Paperclip ecosystem, ensuring a cohesive user experience across the platform.
Use the design-guide skill to review the design principles and component hierarchy of Paperclip's UI system.
High-intent search queries and answers about installing and using this skill.
To build consistent React UI components, use a design system guide to apply standardized design tokens, typography, and status systems. This ensures cohesive, reusable component creation and a unified user experience across your platform.
Design tokens are predefined variables that store visual style decisions like color and typography. You use them in UI component design to maintain visual consistency and ensure that updates cascade automatically across all React components.
Yes, you can use Tailwind CSS to implement design system components in React. The framework pairs with TypeScript to enforce styling conventions and structure, allowing you to build reusable UI elements while adhering to established design patterns.
Yes, TypeScript is required to create reusable UI components with this design system. It provides the necessary type safety for component properties, composition patterns, and status systems, ensuring robust and error-free React component architecture.
The best way to extend existing UI components while maintaining design consistency is to follow the established composition patterns and utilize the predefined design tokens. This ensures new variations adhere to the original design language and hierarchy.
netprtonyAutomate shadcn/ui component setup and usage in React and Next.js projects.
yutaoshaoTransform UI briefs into token-driven design systems with CSS variables and TypeScript types.
vuralserhat86Generate React web interfaces with Tailwind CSS and shadcn/ui components.
mchien15Automates component styling with shadcn/ui and Tailwind CSS for React projects.
