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 從公開儲存庫中收錄這些內容。

檢舉或申請下架