@delegance/claude-autopilot 5.5.2 → 7.2.0

package/skills/ui/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: ui
+description: Opinionated full-pass UI polish on an existing screen — audit, simplify, align, polish in one shot. Use when the user wants to condense, level, align, clean up, tighten, or "make it feel better." Trigger phrases include "condense the UI", "level these out", "clean up and condense", "waste of space", "align better", "feels cluttered", "tighten this up", "polish", "not a great use of space", "make it look right", "fix the alignment". Self-contained — runs all four lenses internally. For subtraction-only, use /simplify-ui. For correctness-only audit, use /ui-ux-pro-max. For craft/feel-only, use /make-interfaces-feel-better. For greenfield design, escalate to frontend-design:frontend-design.
+---
+
+# UI polish pass
+
+You are doing a targeted polish of an **existing** UI, not a greenfield design. The user already has something on screen and wants it to feel better. Match their energy — if they send a screenshot with one complaint, fix that complaint first; don't redesign the whole thing.
+
+Run the four steps below **in order**. Skip steps that don't apply — but never skip step 1 (audit).
+
+## Scope contract — what this skill will and won't do
+
+**Will:** improve hierarchy, spacing, alignment, copy density, interaction states, typographic balance, and visual finish on the existing screen. Touch the components that produce what's on screen and the styles they inherit.
+
+**Won't:** redesign the entire flow, change the data model, restructure information architecture beyond the current screen, introduce a new visual identity, or add net-new features. Preserve the product's existing intent.
+
+If the request needs any of the "won't" items, stop and route:
+- New screen / no concept yet → `frontend-design:frontend-design`
+- Subtraction-only ("just cut, don't polish") → `/simplify-ui`
+- Correctness audit only ("what would a senior designer catch?") → `/ui-ux-pro-max`
+- Craft/feel only ("feels off, lacks soul") → `/make-interfaces-feel-better`
+
+## 1. Audit — look at it, don't guess
+
+Before touching code:
+- **Look at the actual screen.** If the user sent a screenshot, use Read on it. Don't edit blind.
+- **Measure the complaint.** Read the user's words precisely. "Condense" ≠ "redesign." "Level these out" = fix baseline alignment of specific fields, not every field on the page.
+- **Trace the render path.** Find the component(s) that produced what's on screen. Don't assume — grep for the visible strings (section titles, labels, button text) to locate the exact file/line.
+- **Capture the surrounding system.** Note what styles the component inherits: global input classes, grid wrappers, parent padding, font families. The bug is usually upstream of the visible element.
+
+Common blind spots to probe:
+- A "grid alignment issue" is almost always wrapper-margin mismatch, not the grid itself.
+- A "wasted space" complaint is usually `maxWidth` + grid columns + single-field groups compounding.
+- A "doesn't feel right" complaint usually points at typographic hierarchy, not color.
+
+## 2. Simplify — subtract first, add never (almost never)
+
+Before adding anything, ask: **what can I remove?**
+
+Remove these first, in priority order:
+1. **Redundant containers and wrappers.** One `<div>` can usually replace three.
+2. **Subcategory headers for 1-item groups.** "LIABILITY COVERAGE" above a single field burns a row for zero signal. Collapse into the parent.
+3. **Helper text that restates the label.** "Enter your email here" under an "Email" field is noise.
+4. **Default-zero values displayed as content.** `$0` and `0` with grey styling look like empty state — just leave empty.
+5. **Summary/status chips that say what the count already says.** "5 fields required" + a "5/5" badge = one of them goes.
+6. **Decorative icons that don't map to action or meaning.** A briefcase next to "Company Information" is decoration; a checkmark next to "Complete" is meaning. Keep meaning, cut decoration.
+7. **Multiple font sizes in the same row.** If a label and its chip are different sizes for no reason, they should match.
+
+If something genuinely has to be added, it must carry its weight. A new indicator justifies itself by preventing a user mistake or accelerating a decision; otherwise it's noise.
+
+## 3. Align — everything lives on a grid
+
+Misalignment is mostly caused by **inconsistent margins**, not inconsistent grids. Audit these in order:
+
+1. **Wrapper margins across sibling fields.** If `<DateInput>` returns a div with `mb-3` and `<CurrencyInput>` returns a div with `mb-1.5`, an `alignItems: 'end'` grid will put them at different baselines — by exactly the margin delta. Normalize wrappers before touching the grid.
+2. **Input heights across field types.** Date, select, currency, text, and yes/no all need the same `py` value, same `border-width`, same font-size. One `py-3` among a row of `py-2`s looks like a bug to the eye even if the user can't name it.
+3. **Label block heights.** Use `min-h-[20px]` on all labels so a 1-line label and a 1-line label-with-chip occupy the same vertical footprint. Labels that wrap to 2 lines *because they have to* are fine; labels that appear to wrap because the column is 20px too narrow are not.
+4. **Grid column strategies in the same card.** Don't mix `repeat(3, 1fr)` and `repeat(auto-fill, minmax(260px, 1fr))` in sibling rows — column widths will jump between rows for no reason the user understands.
+5. **`align-items`: prefer `end` for forms.** Anchoring inputs to the row's bottom means they line up regardless of how many lines the labels or helper texts above them take.
+
+When a "leveling" complaint comes in, the fix is almost always one of (1) or (2). Check those before rewriting the grid.
+
+## 4. Polish — small things that disproportionately matter
+
+These are low-effort, high-payoff tweaks. Apply them in this order:
+- **Sentence-case labels.** "Requested Effective Date" → "Requested effective date" unless the product strongly prefers title case.
+- **Tighten the padding scale.** `py-2 px-3` for inputs, `p-3` / `p-4` for cards, `gap-2` / `gap-3` for flex rows. Don't invent new values.
+- **Right-size interactive affordances.** Yes/No buttons should match adjacent input heights (same `py`). "Submit" buttons should be one step larger, not three.
+- **Consistent green/red semantics.** One accent color for success (`#40C288` / green-100 bg), one for destructive — don't introduce a third.
+- **Chip restraint.** If multiple chips can appear on one label ("Auto-filled", "Suggested", "Required"), reserve one color per meaning and hide conflicting combinations (e.g., a "Suggested" chip disappears the moment "Auto-filled" applies).
+- **Hover states that mean something.** Border color shift > shadow shift > scale transform. Don't use animation where color communicates the change.
+- **Motion only for state changes the user caused.** Page-load staggers are cheap delight; surprise-wiggle on data arrival is usually annoying.
+
+## Opinionated defaults
+
+When the user hasn't specified, default to these and move on:
+- **Content width:** 1200px max. Sidebar + main = 220 + 980 with 24–32px gutters. Wider reads as "enterprise app with too many fields"; narrower cramps.
+- **Card padding:** `px-4 py-3`. Cards tighter than this feel underbaked; looser feels sleepy.
+- **Grid gap between fields:** `12px` horizontally, `12px` vertically. Don't exceed 16px unless there's a strong reason.
+- **Typography scale:** label 11–12px semibold, input text 14px regular, body 13px regular, section title 14–15px semibold. Avoid introducing a 4th or 5th size.
+- **Borders:** `1px solid` at all times. `border-2` reads as "please notice me" — reserve it for selected/active states, not defaults.
+- **Corner radius:** `rounded-lg` (8px) for inputs and cards, `rounded-full` only for pills/avatars.
+
+## Anti-patterns — flag these on sight
+
+- A single-field "section" with its own uppercase header.
+- `maxWidth` > 1280 on a form-heavy page.
+- `gap: 4` next to `gap: 16` inside the same card.
+- `mb-3` on some wrappers and `mb-1.5` on others, in the same grid.
+- `border-2` on non-selected default states.
+- Helper text that is grammatically a sentence but visually the same size as the label.
+- "Auto-filled" and "Suggested" chips shown simultaneously on one field.
+- Yes/No buttons noticeably taller than neighboring selects.
+- Progress bar counts that include optional fields in the denominator. "X of Y required" is what users actually want.
+- Content that expands to fill whatever width it's given (currency inputs stretched to 600px for a 6-digit number).
+
+## Workflow the user sees
+
+1. **Restate the complaint in one sentence** so the user knows you understood. ("Fields don't line up in Coverage Details" — not "let me analyze the UI.")
+2. **Diagnose out loud.** Say what's causing it. ("Date wrapper has `mb-3`, currency wrapper has `mb-1.5` — that's the 6px offset.")
+3. **Make the minimum edit that fixes it.** Don't bundle unrelated cleanup.
+4. **Say what was left alone and why**, if there are obvious nearby things you chose not to touch.
+5. **Don't commit** unless the user asked.
+
+## When to escalate
+
+Hand off to a different skill when:
+- Request is "design a new X from scratch" → `frontend-design:frontend-design`
+- Request is "write a comprehensive spec for the redesign" → `superpowers:writing-plans`
+- Request is "this feels bad, but I don't know why" and you've already done a polish pass → ask targeted questions before another round.
+
+## Verification
+
+After edits, state which complaint was addressed and which were not. If the user sent one screenshot showing one row of fields misaligned, don't report "condensed the whole page" — they'll suspect you did more than asked.
+
+If you can run the dev server and re-check visually, do. If you can't (backend-only session, no browser access), say so explicitly: "I can't verify visually — please reload and confirm."

package/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: ui-ux-pro-max
+description: Senior-level UX audit of an existing screen — produces a prioritized findings list, does NOT auto-fix. Use when the user asks for a "pro review", "expert critique", "ux audit", "senior take", "what would a designer catch", "is this production-grade", or wants rigorous evaluation of information architecture, cognitive load, accessibility, heuristic violations, and error states. Applies Nielsen heuristics, Fitts/Hick, WCAG, and measurable UX principles — not vibes. Complements /simplify-ui (subtraction) and /make-interfaces-feel-better (craft). For one-shot polish that includes audit + fix, use /ui instead.
+---
+
+# UI/UX Pro Max — the senior review
+
+Apply senior-designer rigor to an existing screen. This is **evaluation**, not creation. Do not rebuild from scratch; produce a prioritized list of defects with evidence.
+
+## Rules of engagement
+
+- **No vibes.** Every finding names a principle (heuristic, law, or WCAG rule) and points at a specific element.
+- **No rewrites during audit.** First list the findings; fix only what the user explicitly approves.
+- **Prioritize by user impact.** Severity ranks: blocker (user cannot complete task) > major (noticeable friction) > minor (polish) > nit.
+- **Cite evidence from the screen.** Don't generalize from principle — point at the component, class name, or pixel distance.
+
+## 1. Heuristics pass (Nielsen + practical extensions)
+
+Walk the screen against these in order. Flag violations with severity.
+
+1. **Visibility of system status** — every long operation shows progress; every state change is visible within 1s.
+2. **Match with real-world language** — field labels use the user's vocabulary, not internal schema names (`bop_160_occupancy` → "Occupancy Type").
+3. **User control & undo** — destructive actions have confirm + undo; optimistic updates reveal failures.
+4. **Consistency** — same action uses same verb/icon/color/position across the app. Note inconsistencies by exact location.
+5. **Error prevention** — disable buttons that can't act yet, constrain inputs (dates, phone masks), validate on blur.
+6. **Recognition over recall** — never ask users to remember what they typed on page 2 to fill page 3.
+7. **Flexibility (power users)** — check for keyboard shortcuts, bulk actions, saved state, intelligent defaults.
+8. **Aesthetic & minimalist design** — every visible element earns its spot; label + chip + helper + placeholder overlap is noise.
+9. **Help users recognize/recover from errors** — error messages name the field, explain the problem, propose a fix.
+10. **Help & docs in-context** — help text next to the field, not on a separate help page.
+
+## 2. Physics + cognition
+
+- **Fitts' Law** — target size ≥ 44×44 px for touch, ≥ 24×24 px for desktop; dangerous targets need *more* distance and size, not less. Close-buttons on toasts that are 18px is a defect.
+- **Hick's Law** — flag dropdowns > 12 options without search. Lists > 5 items on a form field should be grouped or filtered.
+- **Miller's 7±2** — flag screens asking for > 9 decisions at once; break into steps or collapse the optional ones.
+- **Doherty threshold** — anything > 400ms without feedback reads as "broken". Note any interaction that is synchronous and slow.
+- **Serial-position effect** — important CTAs go first or last, not middle.
+
+## 3. Information architecture
+
+- **Section cardinality** — can a user explain what goes in each section in one sentence? If no, the section is doing two jobs.
+- **Field grouping** — fields that are answered from the same mental context go together (address block, employee counts, coverage limits). Cross-group fields that live together are a defect.
+- **Progressive disclosure** — required first, optional expandable, rarely-used hidden. Note any section that leads with optional fields.
+- **Scannability** — can the user scan and find the fields they've already answered in < 2 seconds? Test by reading only bold text and labels.
+- **Density** — count fields per card. Under 3 is sleepy, over 9 is oppressive; target 3–6.
+
+## 4. Accessibility (WCAG 2.2 AA baseline)
+
+Run this as a pre-merge gate, not a "nice to have".
+
+- **Color contrast** — body text ≥ 4.5:1, large text ≥ 3:1, UI components ≥ 3:1. Chips and pill backgrounds usually fail here; measure them.
+- **Focus visible** — tab through the form. Every focusable element needs a visible ring *different* from the hover state.
+- **Labels programmatically associated** — every input has a `<label for>` or `aria-labelledby`. Placeholder-as-label is a defect.
+- **Error identification** — errors are announced to screen readers via `aria-live="polite"` or `aria-invalid`.
+- **Motion preferences** — any non-essential animation respects `prefers-reduced-motion`.
+- **Target size** — per WCAG 2.2, interactive targets ≥ 24×24 CSS px or have sufficient spacing.
+- **Form autofill** — inputs use appropriate `autocomplete` attributes (email, tel, address-line1, …).
+
+## 5. States — all of them
+
+For every interactive component, check: default, hover, focus, active, disabled, loading, empty, error, success. Note which states are missing or visually identical.
+
+## 6. Microcopy
+
+- **Button verbs match action.** "Submit" is rarely right — "Send quote", "Save draft", "Request bind" are better.
+- **Labels as statements, not questions.** "Do you own the building?" → "Building ownership" with a Yes/No.
+- **Placeholders don't repeat the label.** "Email" label + "Enter your email" placeholder = pick one.
+- **Error messages propose the fix**, not just the problem.
+- **Empty states** tell users what will appear here and what to do to make it appear.
+
+## Deliverable
+
+A severity-sorted list shaped like this:
+
+```
+[blocker] Inputs are rendered without associated <label> — WCAG 1.3.1 violation — app/portal/quotes/new/info/page.tsx:3486
+[major] "Application Progress" denominator counts optional fields; misleads users about completion — sidebar line 5049
+[major] Yes/No buttons (px-6 py-3) are 44px tall next to 32px select inputs — violates consistency heuristic — acord-question-bridge.tsx:67
+[minor] "Auto-filled" + "Suggested" chips render simultaneously on same field — visual noise — page.tsx:3470–3476
+[nit] Section 2 header uses Playfair Display at 26px; rest of form is Figtree — typographic inconsistency
+```
+
+After the list, stop. Wait for the user to pick which to fix. Do not batch everything into one edit — that's a different skill.
+
+## Known interactions
+
+- Pair with `/simplify-ui` after this audit: its job is to cut what yours identifies as low-value.
+- Pair with `/make-interfaces-feel-better` after the structural fixes land: its job is the craft layer above correctness.
+- If your audit reveals the screen needs a redesign, not a polish, escalate to `frontend-design:frontend-design`.