UI UX Pro Max Skill
技能 已验证 活跃使用 shadcn/ui 组件（基于 Radix UI + Tailwind 构建）、Tailwind CSS 的原子化样式以及基于画布的视觉设计，创建美观、无障碍的用户界面。适用于构建用户界面、实施设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现暗黑模式、生成视觉设计和海报，或跨应用程序建立一致的样式模式。
使开发人员能够通过利用 shadcn/ui 和 Tailwind CSS 等行业标准工具，高效地构建美观、无障碍且一致的用户界面。
功能
- 生成行业特定的设计系统
- 支持 67 种 UI 样式和 161 种调色板
- 为 15 种技术栈提供特定堆栈的指南
- 包含详细的组件示例和自定义选项
- 提供 99 条 UX 指南和最佳实践
使用场景
- 使用基于 React 的框架构建 UI
- 实施无障碍组件
- 使用原子化样式 CSS 进行样式设置
- 创建响应式、移动优先的布局
- 生成视觉设计和海报
非目标
- 提供后端逻辑或数据管理
- 替换全栈开发工具
- 提供 UI 组件之外的平面设计服务
实践
- 组件组合
- 原子化样式
- 移动优先响应式设计
- 无障碍优先
- 设计令牌
- 暗黑模式一致性
- TypeScript
- 视觉层次
- 精湛的工艺
先决条件
- Python 3.x
- Node.js 18+
- npm
安装
npx skills add nextlevelbuilder/ui-ux-pro-max-skill通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Shadcn Ui
98为集成和构建 shadcn/ui 组件应用程序提供专家指导，包括组件发现、安装、自定义和最佳实践。
UI Styling Skill
95Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
Figma Generate Library
100从代码库在 Figma 中构建或更新专业级设计系统。当用户想要创建变量/令牌、构建组件库、设置主题（浅色/深色模式）、记录基础或协调代码和 Figma 之间的差距时使用。此技能教授要构建什么以及按什么顺序 — 它补充了教授如何调用插件 API 的 `figma-use` 技能。两个技能应一起加载。
Refactor Plan
100Prioritized redesign action plan covering quick wins, medium effort, major rework
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。