Design guidance
Skill tyroneross/interface-built-right/skills/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 6.5.0 rules, component pattern selection, and active design tokens. Not for a full page, flow, app, or dashboard build; use `design-director` first instead.From its SKILL.md
npx -y skills add tyroneross/interface-built-right --skill design-guidanceAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
5.5 KB, as published. Nobody here has run it
Design Guidance
Activate before building UI. This skill turns intent into design constraints so implementation starts aligned instead of relying on visual cleanup afterward.
When This Activates
Use for:
- "build a component", "create a page", "design a form"
- "what should this look like", "how should I structure this"
- "add a card", "build a dashboard", "create a nav"
- "make this look good", "give me a layout for"
- frontend files that affect visible structure, interaction, or state
For page, flow, app, dashboard, or reference-heavy work, load design-director first. For a small isolated component, use this skill directly.
Guidance Selection
Resolve guidance in this order:
- User-stated requirements
.ibr/design-system.jsontokens and project overridesdesign-intent.jsonfrom Design Director, when present- Mockup Gallery target roles, when present
- Platform router:
web-design-router,ios-design-router,macos-ui,mobile-web-ui - Calm Precision 6.5.0 structural defaults
- Component pattern files in
templates/patterns/ - Data visualization guidance, only when metrics/charts are in scope
If two rules conflict, preserve functional integrity, accessibility, real data constraints, and platform conventions unless the user explicitly chooses a different tradeoff.
Design System Check
Before guidance:
- Look for
.ibr/design-system.jsonin the project root. - If present, use its
tokensandprinciples. - If absent, fall back to Calm Precision defaults and recommend initializing a design system only when repeated off-system choices are likely.
Reference token names, not raw values, where the project supports tokens. Rendered computed values are what IBR scan validates.
Component Selection
Map user intent to the relevant pattern:
| User says | Pattern file | Notes |
|---|---|---|
| "card", "tile", "item card" | templates/patterns/card.md | Contained content unit |
| "nav", "sidebar", "menu", "navigation" | templates/patterns/nav.md | Navigation structure |
| "form", "input", "fields" | templates/patterns/form.md | Layout, validation states, submit |
| "dashboard", "overview page" | templates/patterns/dashboard.md | Grid, metrics, data areas |
| "modal", "dialog", "overlay" | templates/patterns/modal.md | Focus trap, backdrop, close behavior |
| "table", "data grid", "list of records" | templates/patterns/table.md | Columns, row states, sorting |
| "list", "feed", "items" | templates/patterns/list.md | Spacing, dividers, empty states |
Read the relevant pattern file before implementing.
Calm Precision 6.5.0 Quick Reference
Apply these during design, not after:
- Group, Don't Isolate — one border around related groups, dividers inside.
- Size = Importance — button size matches user intent weight.
- Three-Line Hierarchy + Page Cascade — title, description, metadata inside components; L1/L2/L3/L4 across pages.
- Progressive Disclosure — show essentials, reveal secondary choices on demand.
- Text Over Decoration — color and weight create hierarchy before boxes.
- Content Over Chrome — aim for at least 70% content and no more than 30% chrome.
- Natural Language — labels match user vocabulary, not implementation jargon.
- Rhythm & Alignment — 8pt rhythm, aligned baselines, stable dimensions.
- Functional Integrity — interactive UI needs a real action, destination, or explicit demo/disabled state.
- Content Resilience + Error Strategy — handle variable content and use what -> why -> fix errors.
- Mobile-First Structure — base styles target mobile; breakpoints add complexity.
- Purposeful Motion — motion communicates state/interactivity and respects reduced motion.
- Voice Calibration — buttons use Verb + Object, tooltips are short, loading says what is happening.
- Provenance & Authority — views project canonical state without becoming a second source of truth; provenance labels sit beside assertions; saturated chip fill means verification state only; interactive tasks keep checkboxes (ordinals belong to read-only projections).
Token Application
When .ibr/design-system.json is active:
| Design decision | Token path |
|---|---|
| Text colors | tokens.colors.text.* |
| Background colors | tokens.colors.background.* |
| Brand/accent colors | tokens.colors.primary, tokens.colors.secondary |
| Body font size | tokens.typography.fontSizes.base |
| Heading sizes | tokens.typography.fontSizes.lg, .xl, .2xl |
| Small/label text | tokens.typography.fontSizes.sm, .xs |
| Component spacing | tokens.spacing.md, .lg |
| Page section gaps | tokens.spacing.xl, .2xl |
| Card/container radius | tokens.borderRadius.md, .lg |
| Button radius | tokens.borderRadius.sm, .md |
| Minimum touch target | tokens.touchTargets.min |
After Building
Run ibr scan on the rendered component or page. Check:
- Calm Precision principle violations
- Token violations
- Accessible names and roles
- Handler/destination coverage
- Mobile/touch sizing
- Layout and content hierarchy against
design-intent.json, when present
Load design-validation for a full post-build audit.
ibr - design guidance