Analyze UI component architecture and generate tokenized component library structures.
npx skills add https://github.com/arbazkhan971/godmode --skill ui-arbazkhan971
Please help me install this Agent Skill. Skill: ui Source: https://github.com/arbazkhan971/godmode/tree/main/skills/ui Command: npx skills add https://github.com/arbazkhan971/godmode --skill ui-arbazkhan971
Establishes consistent, maintainable UI component architecture to reduce design drift, remove hardcoded styles, and ensure components are testable, accessible, and reusable across projects.
Use the ui skill to audit your repository's component library, report token violations, and produce a Storybook setup and component structure plan.
High-intent search queries and answers about installing and using this skill.
To set up a component library with Storybook and design tokens, audit your existing framework and styling approach to detect hardcoded values, then generate folder structure templates and Storybook configuration rules that enforce tokenization and accessibility standards.
Migrating legacy SCSS to a tokenized component library involves auditing the codebase to surface spacing and color violations, replacing hardcoded styles with design tokens, and establishing component folder templates with automated visual and accessibility checks.
Yes, this UI component architecture approach works with Svelte and Angular, along with React and Vue. It detects your specific framework and styling approach to provide tailored component hierarchy definitions, CSS architecture decisions, and naming conventions.
To eliminate hardcoded colors and spacing in your CSS architecture, audit your components for design token violations and enforce tokenization by recommending appropriate styling approaches like Tailwind, CSS Modules, or CSS-in-JS.
You need a design system audit for your front-end project when you want to reduce design drift, ensure components are testable and accessible, and establish a consistent, maintainable UI component architecture by counting components and surfacing spacing violations.
zero-rehqDetect and report drift between code and documentation across README files, docs, examples, and architecture diagrams.
parhummAutomate visual verification of UI components with Storybook snapshots and Playwright MCP.
vallafedericoGuide styling SolidJS components with CSS Modules, Tailwind CSS, Sass/Less, and CSS-in-JS.
baloiseAnalyze SCSS files to create design tokens in Base.tokens.json.
