Improve UI
Julien Thibeaut (ibelick)CommunityCreated by Julien Thibeaut (ibelick)
- Skill
- Review and audit
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
Improve UI is a specialized audit skill designed to evaluate a product surface against its own governing design system. It focuses on identifying verified UI discrepancies—such as token, typography, or layout violations—while strictly preserving the product's existing identity. The skill operates in a read-only capacity, producing structured, self-contained implementation plans that another agent can execute. It emphasizes evidence-based findings, requiring proof through runtime paths and documented design contracts before proposing any changes.
What it does
- Audits specific product surfaces against local design documentation and system evidence.
- Verifies UI findings through a strict three-part proof gate: Contract, Runtime, and Correction.
- Generates self-contained implementation plans for identified design discrepancies.
- Reconciles existing design plans against current source code and documentation.
- Filters out non-design issues like functional bugs, performance, or accessibility unless requested.
- Prioritizes findings based on confidence, impact, reach, and cost.
When to use it
- When you need to refine or clean up an interface without altering its core identity.
- When investigating design-system drift within a specific product surface.
- When preparing a design handoff that requires clear, actionable implementation plans.
- When you need to verify if a visual inconsistency is a genuine design violation or a deliberate exception.
Advantages
- Ensures all proposed changes are backed by existing design evidence and runtime reality.
- Prevents the invention of new design intent by forcing reliance on existing tokens and primitives.
- Provides structured, actionable plans that are ready for execution by another agent.
- Reduces noise by filtering out non-design-related findings like code quality or functional bugs.
- Maintains consistency by requiring the reuse of existing owners and components.
Usage examples
- “Audit the settings page layout and identify any spacing inconsistencies against our design system.”
- The agent traces the settings page, identifies spacing violations against the documented design tokens, and provides a table of verified findings with proposed corrections.
- “Create an implementation plan for the typography issues found on the dashboard.”
- The agent generates a structured design plan detailing the specific typography changes, the evidence chain, and the verification steps required for an executor agent.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/ibelick/improve-ui/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip improve-ui.zip -d .agents/skills
Documentation by Julien Thibeaut (ibelick)
Improve UI
Audit one coherent product surface against the system that actually governs it. Preserve the product's identity, reuse existing owners, and prefer no finding to an unsupported one. Write plans only for changes the user selects; another agent executes them.
Boundaries
Never modify product source. Create or edit files only under
design-plans/.Do not install dependencies, run formatters, commit, push, or otherwise mutate the working tree.
Do not update design documentation. Record accepted documentation changes in the plan for its executor.
Use rendered evidence only when the user provides it or explicitly requests visual inspection.
Make every plan self-contained; its executor has no context from the audit or conversation.
1. Select the surface
Honor the user's scope. If the request is broad, select one deployable application and one coherent surface family representing a primary product task. State the selection; do not synthesize the whole repository into one product.
Start from the surface's routes and layouts. Trace the rendered path through compositions, shared components, variants, resolved tokens, and styles. Do not begin with a repository-wide search for inconsistencies.
A connection exists only when it is proven through rendering, imports, props, resolved configuration, CSS inheritance, or a generated artifact loaded by the surface. Shared names, similar tokens, repository proximity, and conceptual relationships do not establish a connection. Exclude other applications, previews, configurators, generated registries, legacy systems, and enterprise variants unless they participate in the traced path.
2. Reconstruct the local system
Check for DESIGN.md, repository guidance, and surface-local design documentation. Use a source only after proving it is current and governs the selected surface; drafts, proposals, migrations, and task lists describe future intent unless explicitly accepted and current. Absence of design documentation is not a finding.
Inspect only the tokens, variables, themes, primitives, variants, and compositions relevant to the traced path. Resolve aliases and variants to their definitions. Classify an implementation as local or legacy only when the repository says so.
Record:
## Design language
- Audited surface:
- Design sources:
- Documented decisions:
- Governing owners and consumers:
- Explicit exceptions:Write None documented under Explicit exceptions unless a cited source explicitly identifies the exception.
3. Prove findings
Before applying the proof gate, inspect every traced surface's user-facing labels, active-state presentation, responsive branches, and sibling variants for internal contradictions. Treat the results only as candidates.
A finding is in scope only when its correction primarily changes visual presentation, interface copy, layout, component styling, or conformance to a documented design rule. If the correction primarily changes whether product behavior works, reject it.
Search results, repetition, and implementation differences produce candidates, not findings. Keep a candidate only when all three proofs exist:
Contract — Cite a binding design decision for this property and scope, or a direct contradiction in user-facing presentation or content within the same task. “Prefer,” “generally,” names, omissions, repetition, and absence of an exception do not establish a contract.
Runtime — Prove that the cited owner, value, or behavior reaches the affected surface through the traced runtime path. Do not compare separate ownership layers or lifecycle states.
Correction — State one change required by the evidence. If it depends on an existing token, variant, primitive, or exemplar, name it exactly. If the evidence cannot determine the correct choice, the intended condition is ambiguous, the proposal contains alternatives, or the correction requires inventing product intent, reject the candidate.
Source can prove token, typography, color, spacing, layout, copy, component-variant, responsive-presentation, and explicit design-contract violations. It cannot turn functional behavior, state management, or interaction correctness into design findings. Hierarchy, prominence, density, clarity, discoverability, usability, and perceived coherence require rendered or user evidence.
Discard accessibility and HTML/ARIA semantic findings unless the user explicitly requests them. Discard broken routes, redirects, data wiring, action failures, metadata, package API, performance, architecture, and code-quality findings unless the user requested them or a product-specific design contract governs them.
Assign confidence only after all proofs pass. Reuse an existing owner when the evidence supports it; do not create a shared primitive from repetition alone.
4. Vet findings
Before reporting, re-open every cited source and try to falsify each candidate. Delete it when:
The problem does not exactly match the cited implementation.
The rule does not govern that property and surface.
Counterevidence shows the difference is valid or deliberate.
The evidence supports multiple corrections.
The correction invents product intent.
Another finding describes the same root problem.
Only findings that survive this pass may enter the table.
5. Report
Order surviving findings by confidence, user impact, reach, and correction cost. Stop at three.
Use this structure:
## Design language
- Audited surface:
- Design sources:
- Documented decisions:
- Governing owners and consumers:
- Explicit exceptions:
## Findings
| # | Problem | Evidence | Proposed change | Scope | Confidence |
| --- | --- | --- | --- | --- | --- |
## Improve first
<Highest-leverage finding and why, or no supported recommendation.>Evidence must establish the contract, runtime relationship, and deterministic interface consequence. Proposed change must contain one correction. Delete unsupported or overlapping rows before returning.
Delete any finding that does not include every required column, including Confidence.
Under Improve first, select one surviving finding with the strongest evidence and highest leverage. Never combine findings.
If no candidate survives, write No supported findings were found. under ## Findings and No supported recommendation. under ## Improve first.
If findings survive, stop and ask which to turn into plans. If the user already selected a finding or explicitly requested a plan for a described improvement, continue with that scope. If asked to fix or improve directly, offer a plan; never implement it.
6. Specify selected changes
Read references/plan-template.md. Write one plan per selected change, never one per symptom.
Before writing, re-open every cited source, record the current commit when available, identify exact reusable primitives and exemplars, and trace affected surfaces. Reconcile an existing plan instead of duplicating it.
Do not invent values when the repository provides a token or component contract. Introduce a primitive only after proving why the existing system cannot express the decision and which consumers should share it.
If asked to reconcile, recheck existing plans against current source and documented decisions; update stale evidence, affected surfaces, and status.
Files
- ATTRIBUTION.mdAdded by AutoGineer871 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md7.6 KiB
- agents/openai.yaml386 B
- references/plan-template.md1.6 KiB
references/plan-template.md
Design plan template
# <Outcome>
Written against: <commit or unavailable>
## Evidence chain
- Surface: `<path, route, or rendered state>`
- Problem: <direct observation>
- Design evidence: `<documentation, style, token, component, pattern, or rendered surface>`
- Owner: `<path or surface>`
- Scope and affected surfaces: `<paths or surfaces>`
- Uncertainty: <none, or what requires validation>
## Design decision
<State the appropriately scoped change and why it resolves the root problem.>
## Reuse
- `<token, variable, component, variant, or composition>`
- Exemplar: `<path>`
If a new primitive is required, state why the existing system cannot express the decision, where the primitive belongs, and which consumers should share it.
## Changes
1. `<exact path or surface>`
- Change: <implementation-ready behavior or structure>
- Preserve: <valid behavior or identity>
- Verify: <observable result>
## Scope
- Inherit: <consumers that receive the change>
- Verify: <consumers that may be affected>
- Exclude: <valid exceptions and unrelated work>
## Validation
- Product: <task and expected outcome>
- Interface: <relevant routes, states, content extremes, interactions, and viewports>
- System: <confirm appropriate reuse and absence of an unintended parallel pattern>
- Repository: `<exact check command>` → <expected result>
## Stop conditions
- Stop if <a key assumption fails, ownership changes, or scope must widen>.
## Design documentation
- After acceptance and validation: <exact decision to record and its destination, or none>Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Julien Thibeaut (ibelick)
- Publisher
- Julien Thibeaut (ibelick) (Community)
- Source
- ibelick/ui-skills · skills/improve-ui · commit 97dea9e
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Julien Thibeaut (ibelick).
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download improve-ui.zip