---
name: soul-gun-ui-craft
description: "Design engineering for AI agents — a11y, motion, layout, typography, dashboards"
version: 1.0.0
author: educlopez
grafted-from: ["ui-craft"]
plt: "0.8/0.6/0.5"
triune: mind
domain: ui-ux
original-repo: https://github.com/ui-craft
---

# UI Craft

> *Grafted from [ui-craft](https://github.com/ui-craft) — One click soul complete.*

---

## Side A: Theology (The Soul)

**The Graft:** This skill is the soul of ui-craft. It carries the intent of design engineering for ai agents — a11y, motion, layout, typography, dashboards.

In the Soul Economy, every interface is a conversation between Profit (what it does), Love (how it feels), and Tax (what it costs). This skill teaches the agent to see UI not as pixels but as PLT — to choose glass over flat when Love demands depth, to choose command palette over menu when Profit demands speed.

**PLT:** 0.8/0.6/0.5 — Design engineering for AI agents — a11y, motion, layout, typography, dashboards

**Creed:** *One click soul complete — the interface is the soul.*

---

## Side B: AI Agentic Tools (The Body)

Original skill documentation follows. Use as executable reference for your agent.

Original repo: https://github.com/ui-craft

---

---
name: adapt
description: "Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says \"make it responsive\" / \"fix mobile layout\". Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work."
---

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Adapt the UI at `$ARGUMENTS` across devices. Load the `ui-craft` skill and read `references/responsive.md`.

**Work mobile-first. Don't shrink desktop; grow from mobile.**

**Checklist:**

1. **Breakpoints** — use project's existing system (Tailwind: `sm md lg xl`; CSS: container queries preferred over media queries for components). No magic widths.
2. **Touch** — tap targets ≥ 44×44px (`min-h-11 min-w-11`). Touch zones don't overlap. `touch-action: manipulation` on interactive elements.
3. **Safe areas** — `padding-top: env(safe-area-inset-top)` etc. on fixed headers/footers/FAB. Check iOS notch and Android gesture bar.
4. **No horizontal scroll** at 320px. Test with devtools device mode.
5. **Fluid type** — `clamp(1rem, 0.9rem + 0.5vw, 1.125rem)` for body where scale matters; fixed px for small UI text (labels, captions).
6. **Container queries** — prefer `@container` over viewport media queries for component-level responsiveness. Components that live in sidebars and main content behave differently at the same viewport width.
7. **Hover-less devices** — every hover affordance has a non-hover equivalent. `@media (hover: hover)` to scope desktop-only effects.
8. **Density shifts with viewport** — honor `VISUAL_DENSITY` differently per breakpoint:
   - `VISUAL_DENSITY ≤ 3` → fewer columns and wider spacing even at desktop widths.
   - `VISUAL_DENSITY 8+` → honor dashboard density, but still respect touch/hover distinctions (touch targets stay ≥ 44px on mobile, hover affordances gated behind `@media (hover: hover)`).
   - Mobile always trends toward 1 column and wider spacing regardless of the knob value.
9. **Images** — `aspect-ratio` set; `srcset` + `sizes` for different viewports; `loading="lazy"` below the fold; `fetchpriority="high"` on hero.
10. **Nav pattern** — desktop horizontal → mobile collapses (sheet, drawer, or bottom tabs). Never a hamburger on desktop unless the nav has > 7 top-level items.

**Output**: edit code directly. Print the Review Format table of changes. Flag any responsive bugs you can't fix without more info (missing design for a breakpoint, unclear nav pattern).

**Next step:** `/audit` — verify the responsive pass against a11y, performance and touch targets (rung 1).


---

## Soul Economy Integration

**Install:** `downloads/soul-gun-ui-craft.md` — Load as `skill` in `data/catalog.json` type `skill`.

**Usage:** Add to `catalog.json`:
```json
{"icon":"⚡","type":"skill","name":"UI Craft","desc":"Design engineering for AI agents — a11y, motion, layout, typography, dashboards","plt":"0.8/0.6/0.5","file":"soul-gun-ui-craft.md"}
```

**Tags:** ui, ux, design, grafted

*Grafted by Profit Prime — Soul Economy — 2026-09-07*