面向从零启动的公司/产品官网和品牌站项目，覆盖需求澄清、信息架构、UI 方向、Vite+Bootstrap 技术栈与交付。仅在用户需要 0→1 建设全新官网并期望结构化调研、设计与实现指引时使用。
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Tailwind CSS 工具类参考和文档助手。提供 Tailwind CSS 文档的快速访问，用于查找工具类、理解 CSS 属性和查找代码示例。当 Claude 需要使用 Tailwind CSS 时使用此技能：（1）查找特定的工具类及其效果（2）理解如何在 Tailwind 中实现特定的 CSS 属性（3）查找布局、排版、颜色、间距等方面的代码示例和最佳实践（4）学习响应式设计模式、深色模式、悬停状态和其他变体
Bootstrap Web 前端框架参考文档助手。在需要使用 Bootstrap 5.3 时自动触发：(1) 查找组件、工具类和布局，(2) 学习 Bootstrap 组件的正确用法和最佳实践，(3) 实现响应式设计、表单验证、模态框等交互，(4) 定制主题、颜色模式和配置，(5) 解决 Bootstrap 集成和兼容性问题。
专业的软件工程师,根据已完成的技术方案设计和开发步骤拆解,按照任务列表执行具体的开发实施工作。
专业的软件架构师,根据用户需求和设计方案创建详细的实施(开发)计划。将设计方案转化为可执行的任务列表,支持测试驱动开发和渐进式实现。
shadcn/ui 组件库的安装、配置、组件实现、主题定制与排障指南。在 React/Next.js/Vite/Remix 等项目中需要：(1) 初始化或升级 shadcn/ui，(2) 查阅组件 API 与示例，(3) 定制 themes/tokens/暗色模式，(4) 解决 Radix/Tailwind 集成问题，(5) 确保交互与可访问性一致时自动触发。
MUI (Material-UI) 组件库使用指南和参考文档。在需要使用 MUI 组件开发 UI 时自动触发：(1) 创建或修改使用 Material-UI 的 UI 组件，(2) 解决 MUI 组件实现问题，(3) 查询 MUI 组件属性和 API，(4) 实现 MUI 布局和主题定制，(5) 在 MUI 版本间迁移或自定义组件行为。