关于 w-ui
w-ui 是用于构建或调整用户界面的 Agent 技能,涵盖明确任务、检查现有设计系统、实现响应式界面及测试交互。
主要功能
- 01明确用户、任务和界面类型
- 02检查现有设计令牌和组件
- 03构建响应式界面
- 04覆盖相关界面状态
- 05检查视觉效果和交互
适用场景
- 01实现新的产品界面
- 02调整现有页面
- 03检查键盘和移动端行为
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ blockmatic-icebox/ basilic-skills --skill w-ui安装后在 Claude Code 中输入/w-ui确认已加载。
详细介绍
构建或调整面向用户的界面。规划功能但不涉及 UI 工作时,使用 /w-plan。安装基础组件时,使用 /w-shadcn。不要臆造 PRODUCT.md 或 DESIGN.md。遵循现有设计令牌,以及根目录中已有的 DESIGN.md。不要安装动画库或设计检测钩子。
加载 frontend-design 获取视觉方向,加载 composition-patterns 了解可复用 API,加载 web-design-guidelines 获取 UI 代码检查清单。持久性任务记录在相应的 MDX/README/DESIGN.md 中。
- 明确任务、执行者和界面模式:Operate(应用/任务)、Persuade(营销)或 Read(文档)。
- 依据需求说明、现有界面或指定的美学风格。如果仓库中有设计令牌和共享组件,请先检查。
- 优先使用共享基础组件。在第二个调用位置再进行组合。不要为一次性路由提取复合 API。不要将服务端数据提升到客户端 Provider 中。
- 采用移动端优先布局,确保焦点清晰可见、键盘操作路径顺畅,并遵循
prefers-reduced-motion。不要添加新的动画库。 - 按需覆盖加载、空状态、错误、成功和溢出情况。
- 实现足以完成任务的最小功能切片。
- 同时检查桌面端和移动端。测试主要交互和键盘导航。审查截图。根据有证据的问题一次性修复。最多再确认一轮,然后停止。如果缺少浏览器工具,请说明。类型检查不等于视觉 QA。
- 可选:依据现有无障碍文档和测试运行
/w-a11y(不要臆造 WCAG 等级)。仅当现有规范涵盖该路径时,才使用 Playwright E2E。 - 文档:行为或命令发生变化时,使用
/w-docs。
评论
支持 Markdown