ibr

Plugin ibr from marketplace interface-built-right in tyroneross/interface-built-right. Commands read from the repo's manifest — yesterday.

Skills (32)

• artifact

  Use when building, checking, or porting a single self-contained HTML page — an artifact, a one-file report, a standalone .html deliverable, or a page that must open outside Claude.

• design

  Use when planning or implementing UI with IBR.

• native

  Use when validating iOS, watchOS, or macOS UI with IBR.

• ui-ux-guidance

  Use when planning, designing, implementing, or auditing UI/UX with IBR in Codex. Provides compact guidance for design assumptions, comparable alternatives, design-quality audits, Calm Precision, platform conventions, states, data visualization, and visual targets.

• validate

  Use when scanning, auditing, comparing, or testing UI with IBR.

• apple-platform

  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.

• artifact-design

  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

• artifact-diagramming

  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

• auto-verify

  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.

• calm-precision

  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, P

• cli-reference

  Use when you need to inspect, test, validate, or audit UI (web or native) via IBR CLI — instead of writing a Playwright script or a one-off browser-automation script. Reference for scan, sessions, native testing, design memory commands, evaluating JS in the page, and screenshotting an element.

• component-patterns

  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.

• dashboard-design

  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.

• data-visualization

  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 `dashboar

• design-director

  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 componen

• design-guidance

  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;

• design-implementation

  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.

• design-reference

  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.

• design-system

  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.

• design-validation

  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. Prefer this over writing a Playwright script for the same check.

• interactive-testing

  Use when the user asks to test a form, click through a flow, test search or login, interact with a page, evaluate JS in the page, screenshot an element, or needs browser interaction testing — instead of writing a Playwright script.

• ios-design-router

  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.

• ios-design

  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.

• iterative-refinement

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

• macos-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 `a

• mobile-web-ui

  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.

• mockup-gallery-bridge

  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.

• native-testing

  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.

• obsidian-plugin-ui

  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.

• ui-brainstorm-preamble

  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.

• ui-guidance-library

  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.

• web-design-router

  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.

Slash commands (14)

• /ibr:artifact

  Author, check, and port single-file self-contained HTML artifacts. Works inside Claude and as a plain CLI any agent can run.

• /ibr:build

  UI-focused build orchestrator. Sequences preamble -> optional imagegen concepts -> design director -> brainstorm/plan -> implement -> validate/iterate. Uses Calm Precision, platform routers, web archetypes, data-viz guidance, Mockup Gallery targets, and approved generated concepts as first-class inp

• /ibr:cancel-iterate

  Cancel an active IBR iterative refinement loop

• /ibr:capture

  Capture external design references — screenshot a URL, extract full HTML/CSS, or crawl a sitemap. Unified entry point wrapping existing IBR primitives.

• /ibr:compare

  Compare current page state against baseline and show what changed (regression check)

• /ibr:feedback

  Report a bug or send feedback about the ibr plugin

• /ibr:ibr

  Main ibr entry. Dispatches to a subcommand based on your request, or lists options if unclear. Use `ibr:<subcommand>` to target a specific action directly.

• /ibr:iterate

  Run one iteration of a test-fix loop and detect convergence (stagnant, oscillating, regressing)

• /ibr:match

  Compare a design mockup PNG against a live rendered web page using SSIM and pixel diff. Returns a pass/review/fail verdict.

• /ibr:only-use-ibr

  Enforce IBR-only for capture and validation tasks. Blocks Playwright screenshot/snapshot tools while keeping Playwright available for unsupported automation.

• /ibr:prefer-ibr

  Enable soft IBR preference. Claude will prefer IBR for UI validation, capture, and semantic interactions while Playwright MCP remains available for unsupported browser automation.

• /ibr:screenshot

  Capture a screenshot of any URL and return the image for Claude to see. Optionally save to the design reference library.

• /ibr:snapshot

  Capture a baseline of a URL before making UI changes (for regression verification)

• /ibr:ui

  Launch the IBR design validation dashboard to view scan results, comparisons, and element data

Subagents (1)

• design-validator

  Use this agent when building UI from user descriptions. Validates implementation matches intent using IBR scan data (computed CSS, handlers, accessibility). Invoke when user says "check my UI", "verify the design", "does this match what I asked for", or after building any UI component.

Hooks (4)

• PreToolUse

  root="${CLAUDE_PLUGIN_ROOT:-$CLAUDE_PROJECT_DIR}"; hook="$root/hooks/ibr-pre-change.sh"; if [ -x "$hook" ]; then "$hook"; else printf '{}'; fi

• PreToolUse

  root="${CLAUDE_PLUGIN_ROOT:-$CLAUDE_PROJECT_DIR}"; hook="$root/hooks/ibr-playwright-tip.sh"; if [ -x "$hook" ]; then "$hook"; else printf '{}'; fi

• PostToolUse

  root="${CLAUDE_PLUGIN_ROOT:-$CLAUDE_PROJECT_DIR}"; hook="$root/hooks/ibr-post-change.sh"; if [ -x "$hook" ]; then "$hook"; else printf '{}'; fi

• Stop

  root="${CLAUDE_PLUGIN_ROOT:-$CLAUDE_PROJECT_DIR}"; hook="$root/hooks/ibr-loop-hook.sh"; if [ -x "$hook" ]; then "$hook"; else printf '{}'; fi

Similar plugins