一键导入
corporate-website-dev
// 面向从零启动的公司/产品官网和品牌站项目,覆盖需求澄清、信息架构、UI 方向、Vite+Bootstrap 技术栈与交付。仅在用户需要 0→1 建设全新官网并期望结构化调研、设计与实现指引时使用。
// 面向从零启动的公司/产品官网和品牌站项目,覆盖需求澄清、信息架构、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) 确保交互与可访问性一致时自动触发。
| name | corporate-website-dev |
| description | 面向从零启动的公司/产品官网和品牌站项目,覆盖需求澄清、信息架构、UI 方向、Vite+Bootstrap 技术栈与交付。仅在用户需要 0→1 建设全新官网并期望结构化调研、设计与实现指引时使用。 |
仅当用户需要从零开始构建全新的企业/产品官网或品牌站时使用当前技能。
ui-ux-pro-max 技能,所有 UI 设计方案要遵循 ui-ux-pro-max 技能提供的设计思路与流程。bootstrap-helper 技能,前端实现强制采用 Vite + Bootstrap 组合,不允许更换框架或样式体系;若用户提出不同技术诉求,需要先确认是否仍适用本技能。project.md 中ui-ux-pro-max 原则冲突,需回到调研阶段修正。bootstrap-help 的指导来创建项目并进行开发ui-ux-pro-max 的设计模式(信息密度、留白、动效)。skills/ui-ux-pro-max(技能):必须同步加载,UI 设计方案需遵循其中的设计思路与流程。