ibr

Use when building iOS, watchOS, or macOS apps — architecture, SwiftData, Swift concurrency, CI/CD, TestFlight pipeline. Not for HIG/UI rules or manual signing and notarization steps; use `ios-design` (iPhone/iPad) or `macos-ui` (Mac) instead.

Use when building a single self-contained HTML page — an artifact, a one-file report, a shareable page, a standalone .html deliverable — or when asked to check, lint, wrap, or port an artifact so it opens outside Claude. Covers treatment calibration, the three-state theme contract, palette and type direction, page naming, and the deterministic checks any agent can run.

Use when a page needs a diagram — architecture, data flow, sequence, state machine, before/after comparison — or when asked to draw, sketch, or illustrate a mechanism inside an artifact, report, or self-contained HTML page. Covers whether a diagram earns its place, what to depict, and the inline SVG mechanics that stay legible in both themes.

Use when configuring or troubleshooting IBR's automatic before/after scan workflow on UI file edits. Triggers on "enable auto verify", "turn on auto scan", or pre/post-change hook questions.

UI/UX implementation guide for building cognitively predictable interfaces. WHAT: Decision trees, component patterns, code examples, anti-patterns, and audit checklists grounded in perceptual science (Gestalt, Fitts, Hick, Cognitive Load, Signal-to-Noise, Affordance, Temporal Gestalt, Dual-Coding, Pragmatic Inference, Attentional Cascade). WHEN: Building or modifying frontend components, pages, layouts, navigation, forms, dashboards, or lists. Reviewing UI for design compliance. Any frontend design or implementation task. Triggers: "build a component", "create a page", "add UI", "frontend design", "design review", "UI audit", "navigation", "form layout", "dashboard", "list view", "card component", "build the frontend", "style this", "make it look good", "chart", "graph", "data visualization", "KPI", "sparkline", "timeline chart", "table design"

Use when you need to inspect, test, validate, or audit UI (web or native) via IBR CLI. Reference for scan, sessions, native testing, design memory commands.

Use when building one reusable component — a card, nav, form, modal, table, or list. Opinionated patterns with Calm Precision principles, spacing, accessibility, and anti-patterns. Not for a full dashboard page; use `dashboard-design` instead.

Use when building a full dashboard page — any view that surfaces the current state of work, data, or decisions so someone can orient and act. Covers archetype selection, MECE data separation, the append-only record contract for dashboards that capture actions, progressive disclosure, and navigation. Triggers on "build a dashboard", "status page", "work queue", "scorecard", "tracker", "show me the state of", "aggregate across projects", "check off tasks in a dashboard". Not for a single chart or metric — use `data-visualization`; not for one reusable component — use `component-patterns`.

Use when UI work includes a chart, graph, KPI, analytical search response, metric, trend line, ranking, distribution, or data storytelling. Provides chart-worthiness gates, chart routing, hierarchy, attribution, accessibility, and validation rules. Not for a full dashboard page layout; use `dashboard-design` instead.

Use when starting a page, flow, app, or dashboard build, resolving mockup-gallery or imagegen concept targets, or acting as the primary IBR design agent. Produces design intent, specialist planning passes, target roles, and validation criteria before implementation. Not for a small isolated component with an obvious target; use `design-guidance` directly instead.

Use for a small isolated UI component or a tactical pre-build design decision — one card, form, or layout tweak. Provides Calm Precision rules (vendored skill `calm-precision`, authoritative), component pattern selection, and active design tokens. Not for a full page, flow, app, or dashboard build; use `design-director` first instead.

Use when the user asks to build UI, implement a design, match a mockup, or when frontend files (.tsx/.jsx/.vue/.svelte/.css/.swift) are being edited and implementation must align with intent.

Use when the user asks to screenshot a page, capture a design, save a reference, or shares a design URL (Mobbin, Dribbble, Figma, Behance, Awwwards) for visual inspection.

Use when setting up a project's design system or modifying design constraints. Initialize design tokens, view active principles, add custom rules, update token values.

Use when the user asks to audit UI, validate the build, check accessibility, find regressions, compare before/after, or run a full scan — post-build verification pass across the interface.

Use when the user asks to test a form, click through a flow, test search or login, interact with a page, or needs browser interaction testing.

Use when building SwiftUI/UIKit apps for iPhone/iPad, or when /ibr:build preamble returns platform=iOS — HIG rules for navigation, colors, SF Symbols, Dynamic Type, haptics, Liquid Glass. Not for architecture, SwiftData, concurrency, or CI/CD; use `apple-platform` instead.

Use as the entry point for iOS UI design work in IBR. Classifies apps into 6 archetypes (Utility, Content, Productivity, Consumer, Editorial, Tool/Pro) and routes to domain references.

Use when an IBR refinement loop is active (.ibr/loop-state.json active=true), the Stop hook re-feeds iteration context, or user asks to "iterate until it passes" or "refine this UI".

Use when building AppKit/SwiftUI apps for Mac, or when /ibr:build preamble returns platform=macOS — HIG rules for windows, toolbars, menu bar, materials, Liquid Glass, plus manual signing/notarization/distribution steps. Not for app architecture, SwiftData, concurrency, or the CI/CD pipeline; use `apple-platform` instead.

Use when building responsive web UI for phones, or when /ibr:build preamble returns platform=web mobile. Covers viewport/safe-area, thumb zones, touch, Material 3, iOS Safari, WCAG 2.2.

Use when /ibr:build detects .mockup-gallery/ or IBR needs to tie a build to gallery-selected mockups. Reads ratings/selections, enforces approved target roles, preserves scratch-first workflow, and writes implementation completion. Filesystem only.

Use when working on iOS, watchOS, or macOS apps — .swift files, SwiftUI views, simulators. IBR's native scan workflow for touch targets, a11y labels, watchOS constraints, Fix Guide.

Use when working on an Obsidian plugin's UI — a view class, an ItemView, a modal or sheet, styles.css, or anything under .obsidian/plugins. Covers the scan_obsidian workflow, base-CSS fidelity, Obsidian's element rules that override plugin CSS, and multi-width verification.

Use at the start of /ibr:build to capture UI context before Design Director and brainstorming. Captures platform, scope, design mode, archetype, references, optional imagegen concept need, gallery target roles, density, and ask gates. Writes preamble.json.

Use when /ibr:build asks the user to pick a template or to show available UI guidance. Indexes central + project-local templates and snapshots a pick to .ibr/ui-guidance/active.md.

Use when planning or building web UI, web apps, dashboards, SaaS tools, AI chat interfaces, editors, content sites, checkout flows, or internal admin screens. Classifies the web archetype and loads default layout, hierarchy, state, and validation rules.