ui-ux-design使用场景: 用户要求规划、实现、改版或检查网页端、Flutter、React Native、iOS、Android 或微信小程序界面，并需要平台化设计约束与验收清单时。
Install via ClawdBot CLI:
clawdbot install itsjustdri/ui-ux-designGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/shadcn.pngAudited Apr 16, 2026 · audit v1.0
Generated Mar 1, 2026
A startup wants to modernize its admin dashboard to improve user engagement and accessibility. This skill guides selecting a color palette, implementing responsive grids with Tailwind, and adding Shadcn/ui components like data tables and charts, ensuring WCAG compliance for all users.
An e-commerce company is building a mobile-first shopping app. This skill helps design intuitive product pages with clear visual hierarchy, micro-interactions for cart actions, and responsive layouts that adapt from phones to tablets, using pre-build checklists for efficiency.
An online learning platform needs a user-friendly interface for courses and quizzes. This skill assists in setting up typography scales for readability, implementing accessible focus states for keyboard navigation, and using Flexbox for lesson component layouts.
A healthcare provider aims to enhance its patient portal for better accessibility and usability. This skill supports ensuring 4.5:1 text contrast ratios, integrating Shadcn/ui form components with ARIA labels, and applying mobile-first breakpoints for appointment scheduling.
A fintech firm is developing a design system for its banking app. This skill provides principles for consistent UI patterns, color systems with semantic alerts, and micro-interactions like button clicks to build trust and comply with financial accessibility standards.
Offer design consulting and implementation for clients building web or mobile apps. Use this skill to quickly set up projects with Shadcn/ui and Tailwind, ensuring modern, accessible designs that attract higher-paying contracts.
Build and sell a SaaS tool focused on design automation or accessibility testing. Leverage the skill's principles to create a user-friendly interface, driving subscriptions through efficient, beautiful UI that reduces customer churn.
Create and sell courses or tutorials on modern UI/UX design using Tailwind and Shadcn/ui. Use the skill's structured guides to develop curriculum content, attracting students seeking practical, up-to-date design knowledge.
💬 Integration Tip
Start by running the Shadcn/ui setup command in a Next.js project to quickly generate customizable components, then apply the mobile-first breakpoints and color systems from the skill for consistent, accessible designs.
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...