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 19, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
An interactive 3D visualization application featuring an "Augmented Entity" with reactive shaders and emotional states.
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...