Ui Craft

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

console.log(`detect-token-drift.mjs — find raw color values bypassing tokens.

console.log(`Token drift detected — ${allFindings.length} raw color value(s) outside token paths:\n`);

Audit 0.4.1 · source sha 118e61cf1c61 · 16 Oct 2026Report an issue or request a re-scan

• Publisherpedronauck GitHub userOwner of the repository this skill is read from
• Source folderpedronauck/skills/skills/mine/ui-craftThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict118e61cf1c61A new audit runs when the source changes
• Repository statusNot archivedLast push 31 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 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.

---
name: ui-craft
description: "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."
metadata:
  author: Pedro Nauck
  github: https://github.com/pedronauck
  repository: https://github.com/pedronauck/skills
---

# 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.

| When                                                            | File                                    | Covers                                                              |
| --------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------------------ |
| Designing a novel surface / auditing usability                  | `references/usability-foundations.md`   | Nielsen 10, Laws of UX, progressive disclosure, mental models      |
| Any interactive widget (dialog, menu, combobox, tabs, slider)   | `references/accessibility-floor.md`     | WCAG 2.2 AA non-negotiables, ARIA patterns, verification recipes   |
| Buttons/inputs/dialogs/nav/tables/cards/dropdowns/tabs/toasts   | `references/component-patterns.md`      | States, keyboard contract, a11y, and slop per component            |
| Writing or reviewing user-visible text                          | `references/microcopy-quality.md`       | Banned vocabulary, per-surface tone, error/empty/CTA templates     |
| Auditing AI-generated UI                                        | `references/ai-slop-patterns.md`        | Before/after + remediation for the 14 patterns, detection prompts  |
| A design choice needs reconsideration                          | `references/anti-defaults.md`           | Contextual alternatives for hierarchy, legibility, and interaction |
| Building an AI/agent surface                                    | `references/human-ai-ux.md`             | Microsoft 18 + IBM 4 pillars, streaming/citation/confidence UI     |
| Reading/extending DESIGN.md, tokens, shadcn/Radix, codegen rules| `references/design-system-integration.md`| DESIGN.md sections, token discipline, Figma/Code Connect          |
| No token system, or extending a scale                           | `references/visual-craft.md`            | Type/color/spacing/radius/elevation/motion defaults                |
| Adding or reviewing animation                                   | `references/motion-patterns.md`         | Duration bands, easing, CSS/Framer/`@starting-style`, reduced-motion|
| Implementing or reviewing dark mode                             | `references/dark-mode.md`               | Surface-lightness elevation, accent desaturation, dangerous pairs  |
| Observed slowdown, performance-sensitive change, or requested audit | `references/performance.md`          | Measurement, loading feedback, relevant optimizations, project budgets |
| "We need a [Linear/Notion]-like X"                              | `references/archetypes.md`              | 7 archetypes, each a six-slot signature contract                   |

## Helpers

Resolve these from the actual skill directory (`<ui-craft-dir>`); run only for the question in scope:

- `node <ui-craft-dir>/scripts/check-contrast.mjs` — read-only contrast calculation for changed rendered colors.
- `node <ui-craft-dir>/scripts/detect-token-drift.mjs` — read-only drift scan; use project lint/codegen evidence when it already owns the invariant.
- `python3 <ui-craft-dir>/scripts/validate-metadata.py` — authoring metadata validation.

Follow explicit user decisions and project authorities for trade-offs. Record material limitations honestly; do not force a scene interview, design audit, or another approval solely because this skill was used.

Excerpt, first 5,584 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-16
   !CAUTION B 89 / 100

   first audit · source 118e61cf1c61

Questions about Ui Craft

• github.com/pedronauck/skills/tree/main/skills/mine/ui-craft — the audited source at commit 118e61cf1c61 and every finding aboveObserved · 16 Oct 2026

Spotted something wrong? Report a correction · Methodology