Generate CSS custom properties from primitive color and spacing tokens.
npx skills add https://github.com/ArnavPuri/designskills --skill design-system-arnavpuri
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/ArnavPuri/designskills/tree/main/skills/design-system Command: npx skills add https://github.com/ArnavPuri/designskills --skill design-system-arnavpuri
This Skill provides a comprehensive framework for building scalable, maintainable design systems using CSS custom properties, tokens, and component patterns.
Use the design-system skill to generate CSS custom properties for a new design system, starting with primitive color and spacing tokens.
High-intent search queries and answers about installing and using this skill.
Structure CSS custom properties using a layered token architecture that defines primitive, semantic, and component tokens to ensure consistent styling and maintainable UI development.
Token architecture handles multi-brand theming and light/dark modes by mapping semantic tokens to primitive values via data attributes, allowing dynamic theme switching without altering component code.
Define component APIs by outlining composable patterns that explicitly manage states, variants, and documentation, ensuring consistent implementation across multiple application teams.
Yes, this design system framework is built for large applications, facilitating brand consistency and efficient UI development across multiple teams through defined token hierarchies and composable component patterns.
Start generating design tokens by creating primitive color and spacing tokens as CSS custom properties, then layering semantic and component-level tokens on top to establish the foundational UI architecture.
schalkneethlingGenerate a tokens.css file with CSS custom properties for theming and dark mode.
popup-studio-aiBuild a platform-agnostic design system with tokens and reusable components across web, mobile, and cross-framework projects.
timhiebenthalEnforce Trellis visual guidance for consistent UI styling with Tailwind utilities.
marcusgollEnforce theme.yaml CSS variables and ban hardcoded values in prototype mockups.
