Install via ClawdBot CLI:
clawdbot install ivangdavila/uiGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 20, 2026
A retail company wants to improve conversion rates by redesigning their mobile app's checkout flow. The UI skill ensures clear visual hierarchy with a prominent primary action button, consistent spacing using an 8px grid, and accessible color schemes tested for color blindness, enhancing user trust and reducing cart abandonment.
A healthcare provider needs a dashboard to display patient metrics and alerts. Applying the UI skill involves using semantic colors (e.g., red for critical errors), responsive design for tablets in landscape orientation, and component states like loading and error displays, ensuring clarity and accessibility for medical staff.
A fintech startup is building an investment platform requiring complex data visualization. The UI skill guides the use of a consistent typography scale, dark mode with reduced contrast to prevent eye strain, and motion animations to highlight portfolio changes, improving user engagement and data comprehension.
An edtech company develops an interactive learning app for kids. The UI skill helps design large touch targets (44px minimum) for mobile, vibrant but accessible color palettes, and consistent icon styles with labels, making the interface intuitive and engaging for young users while supporting accessibility standards.
A SaaS provider creates an admin panel for managing business operations. Using the UI skill, they implement a spacing system with 4px increments, design tokens for easy theming, and responsive breakpoints based on content, ensuring a polished and scalable interface that reduces training time for non-technical users.
Offer a cloud-based UI design platform with pre-built components and design tokens. Revenue comes from monthly or annual subscriptions, targeting freelancers and small teams who need consistent, accessible interfaces without extensive design expertise.
Provide expert UI design services for clients in industries like healthcare or fintech. Revenue is generated through project-based fees or retainer contracts, focusing on high-value custom solutions that improve user experience and compliance with accessibility standards.
Operate an online marketplace selling UI kits, icons, and design tokens. Revenue streams include one-time purchases or licensing fees, catering to developers and designers seeking ready-to-use, polished assets to accelerate product development.
💬 Integration Tip
Integrate this skill by starting with design tokens for colors and spacing, then apply the visual hierarchy principles to prioritize key actions, ensuring consistency across all components.
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