colorsBuild accessible color palettes with proper contrast ratios and semantic tokens.
Install via ClawdBot CLI:
clawdbot install ivangdavila/colorsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 20, 2026
Design a fintech dashboard that meets WCAG AA standards for contrast ratios, ensuring all text and UI components are readable for users with visual impairments. Use semantic color tokens to maintain consistency across primary (navy) and secondary (light blue) colors, applying the 60-30-10 balance rule to create a clean, trustworthy interface. Avoid red-green combinations and test in grayscale to verify information is distinguishable without color reliance.
Develop a healthcare mobile app using a calming palette with light blue and white to reduce eye strain and promote a clean, professional feel. Implement dark mode with luminosity-based surfaces (e.g., --surface-0 to --surface-3) to ensure readability in low-light environments, while avoiding pure black and white backgrounds. Ensure all text meets AAA contrast ratios for large text and use icons alongside colors to convey statuses like active/inactive for colorblind users.
Create an e-commerce product page using red and yellow as accent colors to drive urgency and optimism for calls-to-action (CTAs), while adhering to WCAG contrast guidelines for normal text. Apply semantic tokens to manage color roles and use HSL variations for consistent hover states that change hue or lightness instead of opacity. Limit the palette to 3-5 colors plus neutrals, avoiding adjacent hues like blue-purple and testing in both light and dark modes.
Build a corporate SaaS dashboard with a three-layer semantic token architecture for maintainable color palettes, focusing on neutral grays with subtle primary color tints for cohesion. Implement dark mode using luminosity-based surfaces to create depth without shadows, ensuring all UI components meet contrast ratios for large text. Use the 60-30-10 distribution to balance dominant, secondary, and accent colors, and avoid common mistakes like light gray text on white backgrounds.
Design an educational platform with accessible color palettes that support diverse learners, including those with color vision deficiencies. Use semantic tokens to define roles like primary, text, and error colors, and test designs in grayscale to ensure information is conveyed without color reliance. Apply the balance rule to organize interface elements and use safe combinations like navy and light blue to maintain clarity, avoiding red-green differentiators.
Offer a subscription-based service providing tools and libraries for generating accessible color palettes with WCAG compliance checks, semantic token management, and dark mode support. Revenue is generated through monthly or annual licenses, with tiered pricing for individual designers, small teams, and enterprise clients. This model targets design and development teams seeking to streamline UI consistency and accessibility.
Provide consulting services to help businesses audit and improve their color accessibility, including workshops on implementing semantic tokens and contrast ratios. Revenue comes from one-time project fees, retainer agreements for ongoing support, and training sessions for design and development teams. This model caters to organizations needing expert guidance to meet regulatory standards and enhance user experience.
Develop a freemium plugin for popular design tools like Figma or Sketch that offers basic color palette generation and contrast checking, with premium features for advanced semantic token systems and dark mode automation. Revenue is generated through in-app purchases for premium upgrades, one-time payments for pro versions, and partnerships with design software platforms. This model appeals to individual designers and small agencies looking for affordable accessibility solutions.
💬 Integration Tip
Integrate this skill by starting with contrast ratio checks for existing designs, then gradually implement semantic tokens to refactor color systems, ensuring compatibility across light and dark modes.
Scored Apr 15, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag