Agent skill · design visual · pedronauck
ui-craft
Design, build, review, or refactor visible UI, including pages, components, forms, loading/error states, and AI chat/streaming interfaces. Excludes backend, infrastructure, CLI/TUI, and docs-only work.
Why this skill is useful
Provides a structured approach to UI design that includes specific guidelines and principles to avoid common pitfalls in AI-generated interfaces.
What it needs
About 2k tokens when loaded. Last updated 2026-08-01. 564 stars on the source repository.
What this skill does
UI Craft Use the project's visual and copy authorities, shipped primitive inventory, and real runtime behavior. Preserve keyboard/focus operation, supported states, meaningful labels, contrast, reduced motion, and token ownership. For a small edit, inspect the affected component/state and reuse existing decisions. A new surface or substantial redesign may need a short user job, scene, register, or visual dials when those resolve an actual design choice; they are not required artifacts for every tweak. Read the relevant design/token/copy contract. When generated documentation and runtime tokens disagree, follow the project's canonical-source rule and regenerate through its owning tool. Reuse existing primitives and supported states. Do not invent controls, metrics, helper copy, brand variants, or host chrome to satisfy a prototype. Match verification to changed interaction/visual behavior: render the affected states, check keyboard/focus where interaction changes, and compare a named reference when required. Reuse current evidence; whole-surface matrices and all-breakpoint sweeps need corresponding scope. Review actual hierarchy, overflow, token drift, misleading interaction, and accessibility defects. Avoid a fixed scorecard that turns subjective preferences into universal merge blockers. Update design authorities only for an actual token/pattern change, through their generator when owned by codegen. A missing optional reference does not justify scaffolding a new design system. References by Need Use the matching section and its necessary dependencies. The table is a lookup, not a list to load in full. assets/state-matrix.md, assets/pre-ship-checklist.md, and assets/ui-audit-template.md are optional working formats for substantial design/audit tasks; ordinary changes can use concise evidence. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills pedronauck/ui-craft