W Ui

blockmatic/basilic-skills/skills/workflow/w-ui

作者 blockmatic7e05e2abd052dc6b526e8a28e36d102d42bfd635无许可证1 个星标收录于 2026年10月9日更新于 2026年10月9日仓库6天前更新

Build or reshape UI with purpose, existing tokens, accessible interactions, and bounded rendered verification.

AI 生成的概览

使用现有设计令牌、无障碍交互和有边界的渲染验证来构建或改造面向用户的界面。

功能
引导智能体构建或改造面向用户的界面:明确任务、使用者和界面模式(Operate、Persuade 或 Read),先检查现有令牌和共享组件,并优先使用共享基础组件。内容涵盖移动优先布局、可见焦点、键盘路径、减少动态效果,以及加载、空、错误、成功和溢出状态。最后在桌面和移动端进行渲染验证、交互与键盘检查、截图评审,并做一轮有边界的修复。
适用场景
适用于需要新增或改造用户界面的功能或页面。不适用于没有界面工作的功能规划、安装基础组件,或自行编造产品或设计文档。适合需要遵循现有令牌与组件并进行视觉质量检查的场景。
运行要求
无脚本,仅提供指令。它引用配套技能(frontend-design、composition-patterns、web-design-guidelines,以及可选的 w-a11y、w-docs、w-plan、w-shadcn),并需要浏览器工具进行渲染验证;若缺少浏览器工具,技能要求明确说明。

Build or reshape a user-facing surface. Planning a feature without UI work stays on /w-plan. Installing a primitive stays on /w-shadcn. Do not invent PRODUCT.md or DESIGN.md. Follow existing tokens and root DESIGN.md when present. Do not install animation libraries or design-detector hooks.

Load frontend-design for visual direction, composition-patterns for reusable APIs, and web-design-guidelines for the UI code checklist. Durable jobs live in matching MDX/README/DESIGN.md.

  1. Name the job, the person, and the surface mode: Operate (app/task), Persuade (marketing), or Read (docs).
  2. Use the brief, existing screens, or a stated aesthetic. If the repo has tokens and shared components, inspect those first.
  3. Prefer shared primitives. Compose at the second call site. Do not extract a compound API for a one-off route. Do not lift server data into a client provider.
  4. Mobile-first layout, visible focus, keyboard path, prefers-reduced-motion. Do not add a new motion library.
  5. Cover loading, empty, error, success, and overflow as applicable.
  6. Implement the smallest slice that completes the job.
  7. Inspect desktop and mobile together. Exercise primary interactions and keyboard navigation. Critique screenshots. Fix evidenced issues in one batch. Confirm with at most one more pass, then stop. If browser tools are missing, say so. A type check is not visual QA.
  8. Optional: /w-a11y against existing a11y docs and tests (do not invent a WCAG level). Playwright E2E only when an existing spec covers the path.
  9. Docs: /w-docs if behavior or commands changed.

来源与署名

来源:blockmatic/basilic-skills位于skills/workflow/w-ui提交7e05e2a

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架