Help us improve
Share bugs, ideas, or general feedback.
From ibr
Use when building cards, navs, forms, dashboards, modals, tables, or lists. Opinionated patterns with Calm Precision principles, spacing, accessibility, and anti-patterns.
npx claudepluginhub tyroneross/interface-built-right --plugin ibrHow this skill is triggered — by the user, by Claude, or both
Slash command
/ibr:component-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Opinionated blueprints for common UI components. Each pattern has Calm Precision principles embedded — structure, spacing, typography hierarchy, accessibility requirements, and anti-patterns are defined up front so implementation starts correct.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Share bugs, ideas, or general feedback.
Opinionated blueprints for common UI components. Each pattern has Calm Precision principles embedded — structure, spacing, typography hierarchy, accessibility requirements, and anti-patterns are defined up front so implementation starts correct.
| User says | Pattern file | Status |
|---|---|---|
| "card", "tile", "item card" | templates/patterns/card.md | Available |
| "nav", "sidebar", "menu", "navigation" | templates/patterns/nav.md | Available |
| "form", "input fields", "field group" | templates/patterns/form.md | Available |
| "dashboard", "overview page", "stats page" | templates/patterns/dashboard.md | Available |
| "modal", "dialog", "overlay", "popup" | templates/patterns/modal.md | Available |
| "table", "data grid", "records list" | templates/patterns/table.md | Available |
| "list", "feed", "item list" | templates/patterns/list.md | Available |
Read the pattern file before implementing. Apply the pattern's structure, spacing, and Calm Precision rules to the implementation.
Patterns are opinionated blueprints, not optional guidelines. They reference token variable names — spacing.lg, fontSizes.base, borderRadius.md — that resolve against the active design system config in .ibr/design-system.json.
Resolution order:
tokens.*) — use these valuesThis means a pattern described as "padding: spacing.md" renders as the project's tokens.spacing.md value when a config exists, or falls back to a sensible default (typically 16px) without one. The rendered values are what ibr scan validates against — not the token names.
Every pattern file follows the same structure:
Structure — The semantic HTML/component hierarchy. What elements are required, what is optional, nesting order.
Calm Precision Rules — Which Calm Precision 6.4.1 principles apply to this component and how. Specific, measurable — "do not add a border to each list item, use a divider instead."
Spacing — Token-referenced padding, gap, and margin values. Includes responsive breakpoints when relevant.
Typography Hierarchy — Font size, weight, and color for each text role: title, description, metadata, label, action.
Accessibility — Required aria attributes, keyboard interaction model, focus order, minimum touch target sizes.
Anti-Patterns — Common mistakes to avoid. These map directly to issues the scan will flag.
IBR Validation — Which scan fields to check to confirm the pattern is implemented correctly. Maps user intent to scan output fields, same format as the design-implementation skill.
To add a custom pattern:
templates/patterns/ following the structure abovestat-card.md, empty-state.md)Custom patterns are picked up by the design-guidance skill automatically once they exist in templates/patterns/.
After implementing a component from a pattern:
ibr scan on the rendered componentdesignSystem.principleViolations for Calm Precision failuresdesignSystem.tokenViolations for off-system valuesdesignSystem.complianceScore — a fully pattern-compliant component should score highLoad the design-validation skill for the full post-build audit workflow, including accessibility and regression checking.
ibr — component patterns