Document a standard color theme framework with naming conventions and contrast requirements.
npx skills add https://github.com/bradhannah/doggy-bag --skill color-expert
Please help me install this Agent Skill. Skill: color-expert Source: https://github.com/bradhannah/doggy-bag/tree/main/.opencode/skill/color-expert Command: npx skills add https://github.com/bradhannah/doggy-bag --skill color-expert
Color inconsistency across Doggy Bag's UI leads to reduced accessibility and perceived usability. This skill provides a unified color system with variables, naming conventions, and design guidelines.
Identify a UI page or component that needs styling, and apply the color variables and naming conventions listed in this guide to update CSS/SCSS variables, ensuring accessible contrast and consistent hover states.
High-intent search queries and answers about installing and using this skill.
Create a cohesive color system by documenting a standard theme framework that enforces color variable taxonomy, naming conventions, and WCAG contrast targets. This ensures consistent UI design, accessible contrast ratios, and unified theming across all components and pages.
Use semantic color variable naming conventions that categorize colors into base, surface, elevated, text, border, and semantic families. This taxonomy standardizes design token naming, clarifies background hierarchies, and maintains consistent hover and selected states across UI components.
Ensure accessible color contrast by applying documented contrast targets and WCAG considerations to hover states and background hierarchies. The color system defines specific semantic color families and elevated surface variables to meet accessibility requirements across all UI states.
Yes, you can apply this color theming framework to branding assets, new UI features, and page components. It provides design token guidance for aligning elements with brand colors while maintaining consistent hover, selected, and background states across the entire interface.
Color inconsistency reduces perceived usability because undocumented color choices break visual hierarchy and accessibility. Implementing a unified color system with standardized variables, contrast requirements, and semantic color families restores consistency and improves the overall user experience.
The best way to align a new feature with brand colors is to apply the framework's color variables and naming conventions to update CSS or SCSS variables. This enforces design token usage, ensures accessible contrast, and maintains consistent hover states across the feature.
IgniteUIUpdate component styles across themes using the SCSS to Lit CSS workflow.
johnlindquistManage design tokens and export them to CSS, JSON, and Tailwind config.
drgaciwGenerate design tokens and documentation from brand colors and typography scales.
eykdGenerate WCAG AAA-compliant OKLCH color themes for DaisyUI 5 with contrast validation.
