Apply design tokens and component rules to React-based UI elements.
npx skills add https://github.com/imankha/video-editor --skill ui-style-guide
Please help me install this Agent Skill. Skill: ui-style-guide Source: https://github.com/imankha/video-editor/tree/main/src/frontend/.claude/skills/ui-style-guide Command: npx skills add https://github.com/imankha/video-editor --skill ui-style-guide
This Skill codifies a centralized visual design system to ensure consistent UI across components, speeding development and reducing style drift.
Apply the style guide to a new UI component to ensure it follows the established visual system.
High-intent search queries and answers about installing and using this skill.
To maintain visual consistency across React components, apply a centralized UI style guide that enforces standardized design tokens for colors, typography, spacing, and component patterns. This prevents style drift and speeds up frontend development.
UI design tokens are centralized variables for colors, typography, spacing, and elevation. They standardize frontend styling by enforcing a unified visual language and naming conventions across all interface components in a React application.
Creating a UI style guide for a React application involves codifying design tokens, naming conventions, and usage guidelines for colors, typography, and spacing. Reference these centralized rules when building or updating components to ensure brand alignment.
Yes, you can use this UI style guide for existing React components. It applies to updating UI elements by referring to the centralized style guide to select colors, typography, and spacing that align with the established visual system.
The best way to stop style drift in frontend development is codifying a centralized visual design system. By enforcing design tokens and component rules for colors, typography, and spacing, you ensure consistent UI across the app.
ikastnerConvert Figma designs into React/Next.js components with TypeScript and Tailwind.
nguyennamkkbCreate reusable SwiftUI components from design tokens and templates.
Adelie-SquadCreate and apply design tokens for color, typography, and spacing.
xztxyProvide shadcn/ui component definitions and implementations for json-render.
