# Test UI > [Testing] Use when you need full-site QA audit (accessibility, performance, security, SEO) with visual reports. - Skill: `duc01226/test-ui` (Agent Skill) - Install (CLI): `npx skillmds@latest add duc01226/test-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/duc01226/test-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: duc01226 (https://skillmd.com/u/duc01226) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/duc01226/test-ui --- > Codex compatibility note: > > - Invoke repository skills with `$skill-name` in Codex; this mirrored copy rewrites legacy Claude `/skill-name` references. > - Task tracker mandate: BEFORE executing any workflow or skill step, create/update task tracking for all steps and keep it synchronized as progress changes. > - User-question prompts mean to ask the user directly in Codex. > - Ignore Claude-specific mode-switch instructions when they appear. > - Strict execution contract: when a user explicitly invokes a skill, execute that skill protocol as written. > - Subagent authorization: when a skill is user-invoked or AI-detected and its protocol requires subagents, that skill activation authorizes use of the required `spawn_agent` subagent(s) for that task. > - Do not skip, reorder, or merge protocol steps unless the user explicitly approves the deviation first. > - For workflow skills, execute each listed child-skill step explicitly and report step-by-step evidence. > - If a required step/tool cannot run in this environment, stop and ask the user before adapting. ## Codex Project-Reference Loading (No Hooks) Codex uses static project-reference loading instead of runtime-injected project docs. When coding, planning, debugging, testing, or reviewing, open project docs explicitly using this routing. **Always read:** - `docs/project-config.json` (project-specific paths, commands, modules, and workflow/test settings) - `docs/project-reference/docs-index-reference.md` (routes to the full `docs/project-reference/*` catalog) - `docs/project-reference/lessons.md` (always-on guardrails and anti-patterns) **Missing/stale context route:** If `docs/project-config.json`, the docs index, `lessons.md`, `CLAUDE.md`, `AGENTS.md`, or any task-required reference doc is missing or stale, auto-run `$project-init` or the narrow setup route (`$project-config`, `$docs-init`, `$scan-all`, `$scan --target=`, `$claude-md-init`) before ordinary project-specific work. If Codex mirrors or `AGENTS.md` are missing/stale, ask the user to run `$sync-codex`; do not auto-run it. **Situation-based docs:** - Project structure/architecture/tech-stack/deployment/setup (any layer — backend, frontend, or infra): `project-structure-reference.md` - Backend/CQRS/API/domain/entity changes: `backend-patterns-reference.md`, `domain-entities-reference.md` - Frontend/UI/styling/design-system: `frontend-patterns-reference.md`, `scss-styling-guide.md`, `design-system/README.md` - Spec authoring, `docs/specs/` pathing, or TC format: `feature-spec-reference.md`, `spec-system-reference.md`, `spec-principles.md` - Behavior/public-contract changes or spec-test-code sync: `workflow-spec-test-code-cycle-reference.md` plus the spec docs above - Derived spec indexes/ERDs/reimplementation guides: `spec-system-reference.md` and source Feature Specs under `docs/specs/` - Integration test implementation/review: `integration-test-reference.md` - E2E test implementation/review: `e2e-test-reference.md` - Code review/audit work: `code-review-rules.md` plus domain docs above based on changed files Do not read all docs blindly. Start from `docs-index-reference.md`, then open only relevant files for the task. ## Quick Summary **Goal:** Run comprehensive UI tests on a website and generate a detailed visual report. > **For individual page/component testing with Playwright scripts, use `webapp-testing` instead.** **Workflow:** 1. **Discover** — Browse target URL, discover all pages, components, endpoints 2. **Plan Tests** — Create test plan covering accessibility, responsiveness, performance, security, SEO. Responsiveness MUST verify the small-screen minimum bar at ~320px: the UI stays usable with **nothing broken** — no clipped, cut-off, or unreachable content/controls. A block that scrolls (`overflow: auto`) instead of reflowing is acceptable, NOT a failure; a block that clips content or hides a control off-screen with no scroll path is a failure. 3. **Execute** — Run parallel tester subagents; capture screenshots for each test area 4. **Analyze** — Use visual analysis tooling to review screenshots and visual elements 5. **Report** — Generate Markdown report with embedded screenshots and recommendations **Key Rules:** - Test and report only — never implement fixes (this is a testing/reporting skill) - Save all screenshots in the report directory - Support authenticated routes via cookie/token/localStorage injection **Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).** **Pre-read (design system):** Load `designSystem.canonicalDoc` + `tokenFiles` from `docs/project-config.json` so visual/style assertions reference real token names (`--brand-*`, `$brand-*`) instead of guesses. Activate the browser automation tooling. ## Purpose Run comprehensive UI tests on a website and generate a detailed report. ## Arguments - $1: URL - The URL of the website to test - $2: OPTIONS - Optional test configuration (e.g., --headless, --mobile, --auth) ## Testing Protected Routes (Authentication) For testing protected routes that require authentication, follow this workflow: ### Step 1: User Manual Login Instruct the user to: 1. Open the target site in their browser 2. Log in manually with their credentials 3. Open browser DevTools (F12) → Application tab → Cookies/Storage ### Step 2: Extract Auth Credentials Ask the user to provide one of: - **Cookies**: Copy cookie values (name, value, domain) - **Access Token**: Copy JWT/Bearer token from localStorage or cookies - **Session Storage**: Copy relevant session keys ### Step 3: Inject Authentication Use the available browser automation runner to inject credentials before testing: ```bash # Cookies # Add cookies before navigating to protected pages. # Bearer token # Set the Authorization header or localStorage token key before navigation. # Local/session storage # Populate the required storage keys, then reload the page. ``` ### Step 4: Run Tests After auth injection, the browser session persists. Run tests normally with the available browser automation runner: ```bash # Navigate and screenshot protected pages. # Save outputs in the report directory for later analysis. ``` ### Auth Script Options - `--cookies ''` - Inject cookies (JSON array) - `--token ''` - Inject Bearer token - `--token-key ''` - localStorage key for token (default: access_token) - `--header ''` - Set HTTP header with token (e.g., Authorization) - `--local-storage ''` - Inject localStorage items - `--session-storage ''` - Inject sessionStorage items - `--reload true` - Reload page after injection - `--clear true` - Clear saved auth session ## Workflow - Use `plan` skill to organize the test plan & report in the current project directory. - All the screenshots should be saved in the same report directory. - Browse $URL with the specified $OPTIONS, discover all pages, components, and endpoints. - Create a test plan based on the discovered structure - Use multiple `tester` subagents or tool calls in parallel to test all pages, forms, navigation, user flows, accessibility, functionalities, usability, responsive layouts, cross-browser compatibility, performance, security, seo, etc. - Use `visual analysis tooling` to analyze all screenshots and visual elements. - Generate a comprehensive report in Markdown format, embedding all screenshots directly in the report. - Finally respond to the user with a concise summary of findings and recommendations. - Use ask the user directly tool to ask if user wants to preview the report with `/preview` slash command. ## UI/UX Design Principles — Runtime-Observable Pass The 40 clauses of `SYNC:ui-ux-design-principles` (full body inlined below in this skill) apply here in the **REVIEW** role, restricted to what a LIVE BROWSER SESSION can observe. Run them as **NINE focused passes — one dimension at a time against the running site**, never one simultaneous sweep across all nine. Answer each `Think:` prompt from first principles, then drive the browser to prove or disprove it. **Out of scope for this skill — say so plainly in the report, never guess.** Clauses judgeable only by reading SOURCE or the DESIGN-TOKEN system belong to `$ui-review` and are routed there, not answered from a screenshot: `UI-1.2` (signal order), `UI-2.1` (family/weight inventory), `UI-2.5` (fixed 6-step type scale), `UI-3.2` (one accent, one job), `UI-4.1`-`UI-4.3` (base spacing unit, `gap`-vs-margin ownership, inner-vs-outer padding), `UI-6.3` (user's vocabulary vs internal naming), `UI-7.1` (does each field still need to exist). **Evidence per finding:** `UI-` + the runtime locator (URL/route · viewport size · screenshot path) + the MEASURED value wherever the clause names one (computed contrast ratio, hit-box px, layout shift, response ms, characters per line, animation ms), plus `file:line` whenever the audit can identify the owning source. A clause carrying a number is satisfied only by a measured number — NEVER by "looks fine". **Severity:** this skill defines no tier vocabulary and this pass introduces none — record findings in the existing report structure (key findings + recommendations), ordered by user impact. When this audit feeds `$ui-review`, that skill's BLOCKED / WARN / PASS rubric governs the merge decision. | # | Dimension (runtime-observable clauses) | `Think:` | | --- | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1 | Visual hierarchy & state coverage — `UI-1.1`, `UI-1.3`-`UI-1.5` | On first paint, which element does the eye land on, and is it the one the page exists for? Are groups separated by whitespace or by borders? Drive each surface to EMPTY, LOADING and ERROR — what renders? | | 2 | Typography as rendered — `UI-2.2`-`UI-2.4` | Measure the computed body size (16px web, 17px mobile, never below 14px), the characters per line at each tested width (45-75), and the line-height ratio (1.5 body, 1.1-1.2 display). | | 3 | Colour & contrast as rendered — `UI-3.1`, `UI-3.3`, `UI-3.4` | Compute the ratio for every rendered text and UI-edge pair (4.5:1 / 3:1) — measured, never judged from the screenshot by eye. Is any status conveyed by colour alone? Toggle dark mode: lifted surfaces or an inversion? | | 4 | Responsive breakpoints — `UI-4.4` | At each tested width, where does the layout stop working, and does the breakpoint sit there or at a device name? _(The ~320px minimum bar in the test plan still decides pass/fail; `UI-4.4` adds WHERE the break belongs.)_ | | 5 | Interaction & feedback — `UI-5.1`-`UI-5.5` | Press each control: what changes within 100ms? Walk all 5 states (default/hover/focus/active/disabled) — which is unstyled? Tab through: is the focus ring visible? Time the transitions (150-250ms, ease-out) and re-run with reduced-motion enabled. Is a confirmation used where undo would do? | | 6 | Navigation & IA — `UI-6.1`, `UI-6.2`, `UI-6.4` | Landing cold on each route: where am I, what's here, where next? Count the top-level destinations (max 5). Deep-link the state and press back — does it land somewhere sensible? | | 7 | Forms & input — `UI-7.2`-`UI-7.5` | Fill each field: does the label stay visible? Does validation fire on blur with a message saying how to fix it? Does the mobile keyboard/autocomplete match the data type? Trigger an error, navigate away, refresh — does the typed data survive? | | 8 | Mobile & touch — `UI-8.1`-`UI-8.4` | At a touch viewport, measure each target's hit box (not the icon) and neighbour spacing (>=44x44pt, 8px apart). Where do primary actions sit relative to the thumb? Is anything gesture-only? Open the keyboard and check safe areas. _(No touch viewport in the matrix → skip with the reason stated.)_ | | 9 | Speed & perceived speed — `UI-9.1`-`UI-9.4` | Throttle the connection: is structure shown before data (skeleton vs spinner), does anything shift as it lands, and is an optimistic update rolled back VISIBLY on failure? Go offline and force a timeout — designed state or hang? | **Precedence:** the project design-system docs pre-read above (`designSystem.canonicalDoc` + `tokenFiles`) **OUTRANK** these clauses; a genuine conflict is reported with BOTH sides and taken to the user — NEVER resolved silently. Skip a dimension only when the site exposes no surface it can apply to, and state the skip with its reason. ## Output Requirements How to write reports: - Format: Use clear, structured Markdown with headers, lists, and code blocks where appropriate - Include the test results summary, key findings, and screenshot references - **IMPORTANT:** Ensure token efficiency while maintaining high quality. - **IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports. - **IMPORTANT:** In reports, list any unresolved questions at the end, if any. **IMPORTANT**: Stop at testing and reporting — do not start implementing the fixes. **IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process. --- > **[IMPORTANT]** Use task tracking to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ATTENTION ask user whether to skip. - `docs/project-reference/domain-entities-reference.md` — Domain entity catalog, relationships, cross-service sync (read when task involves business entities/models) > **Critical Thinking Mindset** — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. > **Anti-hallucination:** Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination. > **Evidence-Based Reasoning** — Speculation is FORBIDDEN. Every claim needs proof. > > 1. Cite `file:line`, grep results, or framework docs for EVERY claim > 2. Declare confidence: >80% act freely, 60-80% verify first, <60% DO NOT recommend > 3. Cross-service validation required for architectural changes > 4. "I don't have enough evidence" is valid and expected output > > **BLOCKED until:** `- [ ]` Evidence file path (`file:line`) `- [ ]` Grep search performed `- [ ]` 3+ similar patterns found `- [ ]` Confidence level stated > > **Forbidden without proof:** "obviously", "I think", "should be", "probably", "this is because" > **If incomplete →** output: `"Insufficient evidence. Verified: [...]. Not verified: [...]."` > **Test-Failure Fault Adjudication** — When a test fails (or you are debugging or fixing a failure), the job is to determine _who is at fault — the source code or the test code_. Getting that verdict right matters more than turning the suite green. Binds every debug / fix / test skill identically. > > 1. **Provisional verdict before touching either side.** Classify the observed evidence as SOURCE-WRONG, TEST-WRONG, TEST-NOT-OPTIMAL, ENVIRONMENT-BLOCKED, or AMBIGUOUS; then `$debug-investigate` and trace end-to-start before editing. A green-again suite is NOT the goal. > 2. **Triangulate against the spec AND the source.** If a governing Feature Spec covers the behavior (e.g. `docs/specs/**` — §3 ACs / §4 BRs / §5 invariants / §8 TCs), it is the tiebreaker for _intended_ behavior — compare BOTH the production source and the failing test against it. With no spec, the documented intent / acceptance criteria / caller contract is the reference. Decide from this evidence whether the SOURCE is wrong or the TEST is wrong. > 3. **Classify who is at fault, then fix the wrong side at its root:** > - **SOURCE-WRONG** — production code violates the spec's intended behavior or a clear invariant → fix the source at the owning layer; keep or strengthen the test that caught it. > - **TEST-WRONG** — the test encodes a stale or incorrect assertion, setup, or expectation that contradicts intended behavior → fix the test at its root. NEVER weaken an assertion, add a skip, or relax a timeout to force green. > - **TEST-NOT-OPTIMAL** — intended behavior is valid but the test seam, timing, or assertion signal is fragile → improve the test without weakening the invariant. > - **ENVIRONMENT-BLOCKED** — infrastructure or external state prevents a source/test verdict → preserve diagnostics and stop mutation until the environment is healthy. > - **AMBIGUOUS** — evidence or intended behavior does not safely select an owner → ask the user or canonical owner before editing. > - NEVER change a test to match broken source, and NEVER change source to satisfy a broken test. (Migration code excluded — schema/data migrations are one-time execution paths, not core application logic.) > 4. **Ask the user when intended behavior is unclear.** If no spec covers the behavior, the spec is silent, or the spec is ambiguous about which side is correct, STOP and ask the user directly (or consult the canonical spec owner) before editing either side — never silently pick source or test just to make the suite pass. > > Reconcile to intended behavior, never to whichever side currently passes — green can encode the very bug. > **AI Mistake Prevention** — Failure modes to avoid on every task: > > **Re-read files after context changes.** Context compaction, resume, or long-running work can make memory stale; verify current files before acting. > **Verify generated content against source evidence.** AI hallucinates APIs, names, claims, and document facts. Check the relevant source before documenting or referencing. > **Check downstream references before deleting or renaming.** Removing an artifact can stale docs, generated mirrors, configs, and callers; map references first. > **Trace the full impact chain after edits.** Changing a definition can miss derived outputs and consumers. Follow the affected chain before declaring done. > **Verify ALL affected outputs, not just the first.** One green check is not all green checks; validate every output surface the change can affect. > **Assume existing values are intentional — ask WHY before changing OR flagging one as a defect.** Before changing or reporting a constant, limit, flag, cutoff, wording, or pattern, read nearby context and history, the CALLER's ordering, and 2+ sibling call sites of the same convention. A doc stating WHAT without WHY is missing rationale, not proof of a missing guard. > **Surface ambiguity before acting — don't pick silently.** Multiple valid interpretations require an explicit question or stated assumption with risk. > **Assert the outcome your system owns, not the intermediate state your infrastructure owns.** When verifying async work, assert the final business state — never the delivery/retry bookkeeping held in shared infrastructure that any co-running process can write. Such a check passes when run alone and flakes the moment anything else shares that infrastructure. > **Keep shared guidance role-relevant.** Universal guidance must help every receiving skill or agent; code-specific obligations belong only in code-specific protocols. > **UI/UX Design Principles (Rev 1.0 — 40 clauses, web + mobile)** — the working rule set for ANY task that designs, plans, implements, or reviews a user interface. Applies to BOTH platforms unless a clause names one (§8 is mobile/touch). Cite clauses by ID: `UI-3.1`, `UI-8.2`. > > **Precedence:** project design-system / SCSS / frontend-pattern docs OUTRANK these clauses; these clauses outrank generic taste. A genuine conflict is SURFACED to the user with both sides — NEVER resolved silently. — why: the project's own recorded decision is the authority; these clauses are the default when it is silent. > > **1.0 Visual Hierarchy & Layout** > > - `UI-1.1` One focal point per screen. Two elements competing for first read → demote one. > - `UI-1.2` Signal order: size → weight → colour → position. Use the cheapest signal that works before adding another. > - `UI-1.3` Group by proximity, NEVER by border. Whitespace separates cleanly; boxes inside boxes do not. > - `UI-1.4` Align to a shared edge. Every unexplained indent reads as an accident. > - `UI-1.5` Design the empty, loading and error state FIRST. The full state is the easy one. > > **2.0 Typography** > > - `UI-2.1` Max 2 families, 3 weights each. More variety reads as inconsistency, not range. > - `UI-2.2` Body text 16px web, 17px mobile. NEVER below 14px for anything a user must read. > - `UI-2.3` Line length 45–75 characters. Constrain the measure, not the container. > - `UI-2.4` Leading scales inversely with size: 1.5 body, 1.1–1.2 display. > - `UI-2.5` Fixed type scale — 6 named steps shared with engineering. NEVER one-off sizes. > > **3.0 Colour & Contrast** > > - `UI-3.1` Contrast 4.5:1 text, 3:1 UI edges. Measure it — NEVER judge by eye on a bright screen. > - `UI-3.2` One accent, one job. An accent that is everywhere points at nothing. > - `UI-3.3` Colour NEVER carries meaning alone — pair it with an icon, label or position. > - `UI-3.4` Dark mode is NOT inverted light mode. Lift surfaces to signal elevation; soften pure-white text. > > **4.0 Spacing & Grid** > > - `UI-4.1` One spacing unit, multiplied — 4px or 8px base; every gap a multiple of it. > - `UI-4.2` Space belongs to the container, not the child. Use `gap`; reserve margins for exceptions. > - `UI-4.3` Tighter inside, looser between — inner padding always smaller than the gap to the next group. > - `UI-4.4` Breakpoints follow content, not devices. Break where the layout stops working. > > **5.0 Interaction & Feedback** > > - `UI-5.1` Every action gets a response under 100ms, even when the result takes longer. > - `UI-5.2` Specify all 5 states — default, hover, focus, active, disabled — plus loading where it applies. > - `UI-5.3` Prefer undo over confirmation. Confirm ONLY what cannot be reversed. > - `UI-5.4` Motion clarifies cause and effect: 150–250ms, ease-out, honours reduced-motion. > - `UI-5.5` Keep the visible focus ring. Restyle it if it clashes; NEVER remove it. > > **6.0 Navigation & IA** > > - `UI-6.1` Every screen answers: where am I, what's here, where next. > - `UI-6.2` Max 5 top-level destinations. Depth beats a crowded first level. > - `UI-6.3` Label by the user's word, not the internal one. Team vocabulary is not a taxonomy. > - `UI-6.4` Every state deserves a URL or a back path. Deep links and hardware back must land somewhere sensible. > > **7.0 Forms & Input** > > - `UI-7.1` Ask for less. Every field needs a reason it exists today. > - `UI-7.2` Labels stay visible. Placeholders are hints, NEVER labels. > - `UI-7.3` Validate on blur, not on keystroke. Errors sit next to the field and say how to fix it. > - `UI-7.4` Match keyboard to data type — correct input type, autocomplete and autocapitalise on every field. > - `UI-7.5` NEVER lose entered data. Preserve input across errors, navigation and refresh. > > **8.0 Mobile & Touch** _(mobile/touch surfaces)_ > > - `UI-8.1` Hit target ≥44×44pt, 8px apart. The target may exceed the visible icon. > - `UI-8.2` Primary actions in the bottom third — that is where the thumb lives. > - `UI-8.3` Gestures are shortcuts, NEVER the only route. Anything swipeable is also tappable. > - `UI-8.4` Respect safe areas and the keyboard. Notch, home indicator and on-screen keyboard all steal space. > > **9.0 Speed & Perceived Speed** > > - `UI-9.1` Show structure before data — skeletons for known layouts, spinners only for unknown waits. > - `UI-9.2` Assume success optimistically. Update UI first, reconcile after, roll back visibly on failure. > - `UI-9.3` Reserve space for anything that loads. Images, ads and fonts must NEVER shift the layout. > - `UI-9.4` Design for the slow connection. Offline, timeout and retry are states, NOT edge cases. > > **Apply by role** — the clauses are one set; what you DO with them depends on the task: > > | Role | Obligation | > | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | > | DESIGN / PLAN a surface | Clauses shape the artifact: empty/loading/error specified first (`UI-1.5`), all 5 states enumerated (`UI-5.2`), type scale + spacing unit declared (`UI-2.5`, `UI-4.1`) | > | IMPLEMENT a component | Pre-completion gate: states · tokens · contrast · focus ring · touch target · reserved space (`UI-5.2`, `UI-2.5`/`UI-4.1`, `UI-3.1`, `UI-5.5`, `UI-8.1`, `UI-9.3`) | > | REVIEW UI code or a design artifact | Each clause is a fail-condition; every finding cites `UI-` + `file:line` + severity. NEVER a tick-box sweep — one focused pass per section | > | SCAN / document a UI system | Record where the PROJECT deliberately deviates, so the overriding doc becomes the recorded authority | > > **Skip ONLY** when the change has no user-facing surface (backend-only, tooling, docs) — state that explicitly so the skip is auditable, not an omission. **IMPORTANT MUST ATTENTION** cite `file:line` evidence for every claim (confidence >80% to act). NEVER speculate without proof. **MUST ATTENTION** apply critical + sequential thinking — every claim needs appropriate traced evidence (`file:line` for repo/code claims; source URL or artifact section for research, product, content, and docs claims); confidence >80% to act, <60% DO NOT recommend. Anti-hallucination: never present guess as fact, admit uncertainty freely, cross-reference independently, stay skeptical of own confidence. **MUST ATTENTION** apply AI mistake prevention — verify generated content against evidence, trace downstream references before deleting or renaming, verify all affected outputs, re-read files after context loss, and surface ambiguity before acting. > **Project Protocol Overlay** — Before executing this skill, resolve any PROJECT overlay rules layered onto it: match this skill's name against the `Target` column of the project's skill-protocol index (`docs/project-reference/skill-protocols-reference.md` by default; a `referenceDocs` entry in `docs/project-config.json` overrides the path), taking the most specific matching tier ONLY — exact name > glob > `*`. **That precedence orders overlays against EACH OTHER, never against this skill.** Read ONLY the matched bodies, resolved as `/.md`; a row's Body link is display text, never a read path. A matched body that is missing or malformed is REPORTED and skipped — never reconstructed from the index Description. No index, or no match -> proceed with no overlay, silently. Full contract: `.claude/skills/project-skill-protocol/references/registry.md`. > > Overlays are **ADDITIVE ONLY**: they ADD rules on top of this skill's own protocol and NEVER replace, override, disable, or reinterpret a rule it already states — removing every overlay must return this skill to exactly its documented behavior. An overlay is a BRIEF, not an authority escalation: it can NEVER waive a workflow gate, git discipline, a review gate, or a user-confirmation gate. A genuine overlay-vs-skill conflict, or two equally-specific overlays that directly contradict -> surface both to the user; NEVER resolve silently. **MUST ATTENTION** resolve project protocol overlays for this skill BEFORE executing — most specific matching tier only (exact > glob > `*`, which ranks overlays against each other, NEVER against this skill), read only matched bodies at `/.md`; a missing or malformed body is reported, never reconstructed. Overlays are ADDITIVE ONLY (they never replace this skill's own rules) and are a brief, NEVER an authority escalation; an equal-specificity contradiction goes to the user. - **MUST ATTENTION** apply the 40 UI/UX Design Principles (`UI-1.1`–`UI-9.4`) to any user-facing surface: one focal point, proximity grouping, empty/loading/error designed FIRST (§1) · ≤2 families, 16px web / 17px mobile body, never <14px, 45–75ch, fixed 6-step scale (§2) · 4.5:1 text / 3:1 edges measured, one accent, colour never alone, dark mode ≠ inversion (§3) · one 4/8px unit, `gap` over margins, tighter-inside-looser-between, content-driven breakpoints (§4) · <100ms response, all 5 states, undo over confirm, 150–250ms ease-out honouring reduced-motion, visible focus ring (§5) · where-am-I/what's-here/where-next, ≤5 top-level destinations, user's words, URL or back path (§6) · fewer fields, visible labels, validate on blur, matched keyboard, NEVER lose input (§7) · ≥44×44pt targets 8px apart, bottom-third primaries, gestures never the only route, safe areas (§8) · structure before data, optimistic update with visible rollback, reserved space, slow-connection states (§9). Project design-system docs OUTRANK these clauses — a genuine conflict goes to the user, NEVER resolved silently. Cite every finding as `UI-` + `file:line`. Skip ONLY for changes with no user-facing surface, stated explicitly. ## Closing Reminders **IMPORTANT MUST ATTENTION — Protocols in force (concise digest of the SYNC/shared blocks this skill carries):** - **Critical Thinking:** apply critical + sequential thinking; traced proof, confidence >80%. - **Evidence:** cite `file:line` for every claim; never speculate. - **AI Mistake Prevention:** verify generated content against evidence, trace downstream references, verify all affected outputs, re-read after context loss, surface ambiguity. **IMPORTANT MUST ATTENTION** break work into small todo tasks using task tracking BEFORE starting **IMPORTANT MUST ATTENTION** search codebase for 3+ similar patterns before creating new code **IMPORTANT MUST ATTENTION** cite `file:line` evidence for every claim (confidence >80% to act) **IMPORTANT MUST ATTENTION** run the runtime-observable UI/UX Design Principles pass — all 40 clauses (`UI-1.1`-`UI-9.4`) as NINE focused passes; every finding cites `UI-` + URL/viewport/screenshot (+ `file:line` when the source is identifiable) and the MEASURED number for any clause naming one; clauses needing source or design-token inspection are OUT of scope here and route to `$ui-review` **IMPORTANT MUST ATTENTION** add a final review todo task to verify work quality **MANDATORY IMPORTANT MUST ATTENTION** READ the following files before starting: **IMPORTANT MUST ATTENTION** READ `CLAUDE.md` before starting **[TASK-PLANNING]** Before acting, analyze task scope and systematically break it into small todo tasks and sub-tasks using task tracking. ## Hookless Prompt Protocol Mirror (Auto-Synced) Source: `.claude/.ck.json` + `.claude/skills/shared/sync-inline-versions.md` (`:full` blocks) + `.claude/scripts/lib/hookless-prompt-protocol.cjs` ## [WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] Workflow Execution Protocol — MANDATORY IMPORTANT MUST CRITICAL. Do not skip for any reason. **Generic portability boundary:** Reusable skills and protocol text stay project-neutral; project-specific conventions are discovered from docs/project-config.json and docs/project-reference/. Apply shared AI-SDD from `shared/sdd-artifact-contract.md`. Read `docs/project-config.json` and `docs/project-reference/docs-index-reference.md`, then open the project reference docs named there. For spec, test-case, behavior-change, public-contract, or `docs/specs/` work, route through the local spec docs named by the docs index: `feature-spec-reference.md`, `spec-system-reference.md`, `spec-principles.md`, and `workflow-spec-test-code-cycle-reference.md` when specs/tests/code must stay synchronized. If either file or a required reference doc is missing or stale, auto-run `$project-init` (or the narrow lower-level route such as `$project-config`, `$docs-init`, `$scan-all`, or `$scan --target=`) before ordinary project-specific work. Any supported AI tool may execute when this shared context and local docs are available. 1. **DETECT:** If the prompt starts with an explicit slash skill/workflow command, execute it directly. Otherwise match the prompt against the workflow catalog and skill list. 2. **ANALYZE:** Choose the best option: execute directly, invoke a skill, activate a standard workflow, or compose a custom step combination. 3. **AUTO-SELECT:** Pick the best option yourself. Do not ask the user to choose between direct execution, skill, standard workflow, or custom workflow. 4. **ACTIVATE:** For a selected workflow, call `$start-workflow `; for a selected skill, invoke that skill; for a custom workflow, sequence custom steps directly; for direct execution, proceed with the task. 5. **CREATE TASKS:** task tracking for ALL workflow/skill/custom steps before execution when the selected path has multiple steps. 6. **PARALLELIZE:** Before executing the task list, tag each task `PAR` (independent inputs + write set disjoint from every other `PAR` task) or `SEQ` (name the blocking dependency), group `PAR` tasks into waves, declare the wave plan, and spawn each wave's sub-agents in ONE message — all-return barrier per wave, fan-out one level deep unless a sub-agent's own definition authorizes further fan-out. Sequential-by-default is a defect when tasks are independent; do not parallelize shared write targets, output-consuming tasks, trivial single-file work, ordering a skill or workflow explicitly fixes, or user-approval gates. 7. **EXECUTE:** Advance per the **Workflow Step Advancement & Parallel Phases** rule in your context instructions — model-driven; a sub-agent completion advances a step identically to an inline call; a parallel-phase group is an all-return barrier (advance only after ALL members return, never serialize it) ## Shared AI-SDD Protocol Markers Source: `.claude/skills/shared/sync-inline-versions.md` ## SYNC:ai-sdd-artifact-contract > **AI-SDD Artifact Contract** — Shared spec-driven development rules stay portable and source-owned. > > 1. Keep reusable AI-SDD principles in `.claude`; put repository-specific paths, commands, owners, products, and formats in project config/reference docs. > 2. Preserve cycle: `spec -> plan -> tasks -> implement -> verify -> update spec/docs`. > 3. Trace every requirement or invariant through decision, task, TC/test, source evidence, and docs/spec update. > 4. Treat code-to-spec extraction as reference-only until accepted by the canonical spec owner. > 5. Any supported AI tool may plan, implement, review, or verify with synced context; using multiple tools is optional. > 6. Update `.claude` source first, then sync generated mirrors; do not manually edit `.agents`, `.codex`, or `AGENTS.md`. — why: mirrors are generated artifacts; hand-edits are overwritten on the next sync > 7. If `docs/project-config.json`, root instruction files, or a required project-reference doc is missing or stale, auto-run `$project-init` or the narrow lower-level route before ordinary project-specific work. > > **Active reference:** `shared/sdd-artifact-contract.md` in the active skills root. --- ## SYNC:ai-sdd-artifact-contract:reminder - **MANDATORY** Apply `shared/sdd-artifact-contract.md`; keep reusable AI-SDD in `.claude` and local rules in project docs. - **MANDATORY** Code-to-spec extraction is reference-only until canonical acceptance; any supported AI tool may execute with synced context. - **MANDATORY** Update `.claude` source before syncing generated mirrors; do not manually edit `.agents`, `.codex`, or `AGENTS.md`. - **MANDATORY** Missing or stale project config, root instruction files, or required reference docs route project-specific work through `$project-init` or the narrow setup route automatically. **[TASK-PLANNING] [MANDATORY]** BEFORE executing any workflow or skill step, create/update task tracking for all planned steps, then keep it synchronized as each step starts/completes. ## [LESSON-LEARNED-REMINDER] [BLOCKING] Task Planning & Continuous Improvement — MANDATORY. Do not skip. Break work into small tasks (task tracking) before starting. Add final task: "Analyze AI mistakes & lessons learned". **Extract lessons — ROOT CAUSE ONLY, not symptom fixes:** 1. Name the FAILURE MODE (reasoning/assumption failure), not symptom — "assumed API existed without reading source" not "used wrong enum value". 2. Generality test: does this failure mode apply to ≥3 contexts/codebases? If not, abstract one level up. 3. Write as a universal rule — strip project-specific names/paths/classes. Useful on any codebase. 4. Consolidate: multiple mistakes sharing one failure mode → ONE lesson. 5. **Recurrence gate:** "Would this recur in future session WITHOUT this reminder?" — No → skip `$learn`. 6. **Auto-fix gate:** "Could `$code-review`/`$code-simplifier`/`$security-review`/`$lint` catch this?" — Yes → improve review skill instead. 7. BOTH gates pass → ask user to run `$learn`. **[CRITICAL-THINKING-MINDSET]** Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. **Anti-hallucination principle:** Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independen …(truncated)