Agent skill

Better Interface

by boraoztunc in boraoztunc/skills

Cross-discipline interface review: routes a screen, flow, feature, or product interface to every better- domain skill and consolidates one ranked verdict.

Apache-2.0Auto-check passed

Install Better Interface

skills CLI
$ npx skills add boraoztunc/skills --skill better-interface -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install boraoztunc/skills better-interface --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/better-interface .claude/skills/better-interface && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
better-interface
GitHub stars
393
Token cost
~3.4k tokens
SKILL.md length
1,881 words
Files
1
Skills in repo
52
Repo updated
First seen
Licence
Apache-2.0

At a glance

Cross-discipline interface review: routes a screen, flow, feature, or product interface to every better- domain skill and consolidates one ranked verdict.

  • Works in 9 steps: Resolve Scope and Mode First → Recon Before Judgment → Use Domain Skills as the Sources of Truth → …
  • Asked for a holistic review rather than a single domain
  • SKILL.md covers Core Principles, Common Mistakes and Review Output Format
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Better Interface is an agent skill from boraoztunc/skills. Cross-discipline interface review: routes a screen, flow, feature, or product interface to every better- domain skill and consolidates one ranked verdict. Use when asked for a holistic review rather than a single domain, and when interface-review hands up a change to route. Triggers on better-interface, holistic interface review, review the whole screen.

Its SKILL.md is about 3.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.

When your agent uses it

  • Asked for a holistic review rather than a single domain
  • When interface-review hands up a change to route
  • Better-interface
  • Holistic interface review

Example prompts

  • “/better-interface”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. Resolve Scope and Mode First
  2. Recon Before Judgment
  3. Use Domain Skills as the Sources of Truth
  4. Require Evidence
  5. Rank by User Impact
  6. Consolidate Systemic Findings
  7. Make Restraint Visible
  8. Verify What Can Be Verified
  9. Review Without Mutating by Default

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Better Interface loads about 3.4k tokens when it runs. Until then it costs about 95 tokens; SKILL.md has 1,881 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~95
When it runs · the whole SKILL.md, loaded when a task matches
~3.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 1,881 words, ~3,354 tokens.

Download SKILL.mdSave it as .claude/skills/better-interface/SKILL.md (or your agent's skills folder).
name
better-interface
description
Cross-discipline interface review: routes a screen, flow, feature, or product interface to every `better-*` domain skill and consolidates one ranked verdict. Use when asked for a holistic review rather than a single domain, and when `interface-review` hands up a change to route. Triggers on better-interface, holistic interface review, review the whole screen.

Review the interface as one system

A strong interface is not a stack of independent audits stapled together. Review the whole experience, let each better-* skill own its domain rules, then consolidate the evidence into one prioritized verdict.

This skill owns orchestration only. Accessibility rules belong to better-accessibility; structure to better-layout; copy to better-writing; type to better-typography; color to better-colors; visual polish and motion to better-ui. Never duplicate or override their rules here. Change-scoped review of uncommitted work, branches, and pull requests belongs to interface-review, which resolves the scope and classifies findings before handing the review back here.

Core Principles

1. Resolve Scope and Mode First

Parse the invocation as [quick|full] [scope]. The first token is a mode only when it is exactly quick or full; anything else is part of the scope. Mode defaults to full.

Infer the screen, flow, feature, or repository scope from the request and current workspace. State the resolved scope in the output.

ModeCoverageFinding cap
quickThe primary path through the scope and the states it actually reaches; report only HIGH and MEDIUM issues5
fullEntire requested scope across every domain skill listed in principle 3, including empty, loading, error, and narrow-width states when present15

If the requested scope is too large to inspect credibly, narrow it to one complete flow: the one the request itself centers on, or failing that the entry path every user of the scope must pass through. State the boundary and what it excluded. Never imply uninspected surfaces were reviewed.

When the request names a branch, pull request, commit range, or uncommitted changes, that is a change review, not a screen review. Say so and ask the user to run interface-review; it is user-invoked, so this skill cannot start it. Never resolve a change scope here: reading a diff, classifying findings, and expanding changed files to affected surfaces are all interface-review's, and guessing at them produces a report whose scope nobody can check.

interface-review hands the review back the other way. When it does, it supplies the resolved change scope, the affected surfaces, and a status for each finding; severity, consolidation, the cap, the output format, and the verdict stay here, under Change-Scoped Reviews below.

2. Recon Before Judgment

Identify the framework, styling system, component library, design tokens, supported viewports, and available preview or test commands. Write every fix in the project's own idiom so no finding arrives as a request to adopt a different stack. That governs the form of the fix, not whether the current code is good enough.

Then read what the project has written about its own interface: CONTRIBUTING.md, CODING_STANDARDS.md, AGENTS.md, CLAUDE.md, a design-system doc, Storybook docs, interface ADRs. Name in the output which you found, or that there are none.

Read them for leverage, not permission. A documented convention is not evidence the convention is good, and "it's in the style guide" does not retire a finding. What they change is where you report: when a guideline or shared token is the cause, report it once against that source with the components as its locations.

3. Use Domain Skills as the Sources of Truth

Before reviewing, confirm that every owning skill below is available. Load and apply every available owner. In quick mode, inspect every domain but spend depth only where the primary flow has evidence. In full mode, complete each available domain review before consolidation.

Review in this order so foundational failures are not hidden by polish:

  1. better-accessibility
  2. better-layout
  3. better-writing
  4. better-typography
  5. better-colors
  6. better-ui

This skill owns the final response. When a domain skill is loaded through better-interface, apply its principles and references but ignore its Reporting section and the review-output.md it points at. Use the consolidated format, shared severity, and finding cap in this file instead.

If an owning skill is unavailable, mark that domain Not reviewed, name the missing skill, and continue with the remaining domains. Do not recreate its rules from memory, substitute a neighboring skill, or claim holistic coverage.

When two skills appear to cover the same issue, assign it to the skill that owns the underlying rule and mention secondary effects in the Why cell. Report it once.

4. Require Evidence

Every finding cites path/to/file:line and shows the current implementation. If the review artifact has no source files, cite the exact screen and component. Do not report a code-level finding from visual appearance alone or a visual finding from source code alone when runtime behavior determines the result.

5. Rank by User Impact

Use one shared severity scale:

  • HIGH: blocks a task, misleads the user, hides content or controls, causes data-loss risk, or creates a repeated systemic failure.
  • MEDIUM: meaningfully harms comprehension, efficiency, adaptability, or consistency.
  • LOW: isolated polish with limited task impact. Include only in full mode.

Within a severity, rank by reach and leverage. A token or shared-component fix outranks the same symptom in one leaf component.

Escalation triggers. Once the owning skill confirms one of these, it is HIGH on sight, not averaged down because the surface is minor and not withheld in quick mode:

  • An interactive control with no accessible name.
  • A keyboard-reachable control with no visible focus indicator.
  • A control or path reachable by pointer but not by keyboard.
  • Motion or auto-playing content that ignores prefers-reduced-motion.
  • Content or a control clipped, overlapped, or unreachable at 320px width or 200% zoom.
  • Body or control text whose rendered contrast pair fails its required ratio.
  • State or meaning carried by color alone.
  • A destructive action with no confirmation, undo, or distinct treatment.

Triggers rank above every other finding. When more fire than the cap allows, list them first and state how many findings the cap excluded; a cap may shorten a report but may never be why a blocker went unreported.

These set severity, not new rules. The owning skill still decides whether the symptom is present, and this list decides what it costs. In a change review, a confirmed Regression against a trigger is HIGH even where the same symptom would be MEDIUM as pre-existing.

6. Consolidate Systemic Findings

One root cause is one finding. List every confirmed location in the same row rather than producing a row per occurrence. Do not pad the report to reach the finding cap; a short review or no findings is a valid result.

7. Make Restraint Visible

Record candidates considered but deliberately rejected. A candidate is rejected when the owning skill permits the current implementation, evidence is insufficient, the project's convention is a defensible choice and not merely an established one, or the proposed change would add complexity without user benefit.

Show full SKILL.md (780 more words)Show less
8. Verify What Can Be Verified

Run safe, relevant checks available in the project. Inspect the rendered interface when runtime behavior or visual judgment matters. Report the exact command or interaction and observed result. If a check cannot be run, label it Not verified and state what remains; never convert a verification gap into a finding.

9. Review Without Mutating by Default

Treat a review request as read-only. Do not edit source code unless the user also asks to implement the findings. When implementation is requested, preserve the consolidated report as the change scope and re-run the relevant verification afterward.

Common Mistakes

MistakeFix
Six disconnected domain reportsConsolidate into one ranked findings table
Same issue reported by multiple skillsAssign it to the skill that owns the underlying rule
Finding with no exact locationCite path/to/file:line and the current implementation
Visual claim inferred only from sourceInspect the rendered state or mark it not verified
Unlimited low-impact polishRespect the mode cap; omit LOW findings in quick
Silent gaps in coverageShow which domains and states were actually inspected
Missing owning skill silently treated as coveredMark the domain Not reviewed and name the unavailable skill
No rejected candidatesInclude the required considered-but-rejected table
Review silently edits codeStay read-only unless implementation was requested
“Approve” with pending actionable findingsUse Needs changes or Block
Every legacy issue in a touched file reportedCap pre-existing findings at three in their own section
A pre-existing issue blocking a change reviewKeep pre-existing findings out of the cap and out of the verdict
Domain marked Clear when the change never touched itMark it Not reviewed: no evidence in the change scope

Review Output Format

Always use the following sections.

Scope and Coverage

State the mode, exact scope, stack and styling conventions, the project convention documents found in recon, and any review boundary. Then show coverage:

DomainEvidence inspectedResult
AccessibilityFiles, components, states, or checksFindings count or Clear

Include every domain listed in principle 3. Clear means inspected with no actionable finding; Not reviewed must explain why.

Findings

Use one table ordered by severity, then reach and leverage:

#SeverityDomainLocationBeforeAfterWhy
1HIGHAccessibilitysrc/Dialog.tsx:42<button><XIcon /></button>Add aria-label="Close" and hide the icon from the accessibility treeThe icon-only control has no accessible name

Each row is one root cause. The Domain value is the owning skill without the better- prefix. Respect the mode's finding cap. If there are no findings, omit the table and state "No actionable interface findings."

Considered but Rejected

Include 1–3 candidates in quick mode and 2–5 in full mode:

LocationCandidateRejected because
src/Card.tsx:28Increase the shadowExisting depth matches the shared surface token; changing one card would reduce consistency

These are real candidates inspected during the review, not invented filler. If the scope genuinely contains fewer borderline candidates, include the ones that exist and say so.

Verification

List each check or interaction, the exact command or steps, and the observed result. Separate checks that passed from checks marked Not verified.

Verdict

End with exactly one:

  • Block: one or more HIGH findings remain.
  • Needs changes: only MEDIUM or LOW findings remain.
  • Approve: no actionable findings remain and the claimed coverage was verified.
Change-Scoped Reviews

When interface-review resolved the scope from version control, the format above applies with these four additions. They live here because this file owns the format, the cap, and the verdict; interface-review supplies the scope and the statuses.

  1. Scope block. Open Scope and Coverage with the change scope table interface-review produced, then the coverage table above unchanged. A domain with no evidence in the change scope is Not reviewed: no evidence in the change scope, which is a coverage statement, not a gap.

  2. Status column. The findings table gains a Status column after Domain, carrying Introduced or Regression:

    #SeverityDomainStatusLocationBeforeAfterWhy
    1HIGHAccessibilityRegressionsrc/Dialog.tsx:42aria-label="Close" removed in this changeRestore aria-label="Close" on the icon-only controlThe close control had an accessible name before this change and no longer does

    With no Introduced or Regression findings, omit the table and state "No actionable interface findings in this change."

  3. Pre-existing section. Place it after Considered but Rejected, at most three, highest severity first, stated plainly as not this change's responsibility. Omit when there are none.

    SeverityDomainLocationIssue
    MEDIUMTypographysrc/Toolbar.tsx:7Numeric badges use proportional figures; predates this change
  4. Cap and verdict. Both cover Introduced and Regression only. Pre-existing findings sit outside the cap, so touching a legacy file cannot turn into a full-file audit, and outside the verdict, so a change whose only findings are pre-existing is an Approve.

© boraoztunc, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in better-interface of boraoztunc/skills.

Open the folder on GitHubat commit 645553c

Compare with similar skills

Better Interface next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Better Interface compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Better Interface this skillboraoztunc/skills393—~3.4kAutomated safety check: PassApache-2.0
Better Interfacetrycompai/crm11k—~2kAutomated safety check: PassMIT
Make Interfaces Feel Betteraffaan-m/ECC274k1 repos~1.2kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
OmniRoute Routing CLIdiegosouzapw/OmniRoute74k—~342Automated safety check: PassMIT
OmniRoute Combo Routingdiegosouzapw/OmniRoute74k—~2.1kAutomated safety check: PassMIT

Similar skills

  • Better Interface

    trycompai/crm

    User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui.

    11k GitHub stars~2k tokensUpdated 26 days ago
    Frontend & DesignAuto-check passed
  • Apply concrete design-engineering details that make interfaces feel polished.

    274k GitHub starsUsed in 1 repo~1.2k tokens
    Frontend & DesignAuto-check passed
  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed
  • OmniRoute Routing CLI

    diegosouzapw/OmniRoute

    Creates, switches, and inspects OmniRoute model-routing combos, plus a suggestion command with cost and latency constraints.

    74k GitHub stars~342 tokensUpdated yesterday
    AI & LLM EngineeringAuto-check passed
  • OmniRoute Combo Routing

    diegosouzapw/OmniRoute

    Manages OmniRoute routing combos through its REST API: create and update combos, choose from 19 strategies, set fallback chains, test outcomes and read metrics.

    74k GitHub stars~2.1k tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Intelligence Route

    ruvnet/ruflo

    Route tasks via the 3-tier model selector and learned patterns; emits a routing rationale via hooksexplain

    74k GitHub stars~874 tokensUpdated yesterday
    DevelopmentAuto-check: notes

More from boraoztunc/skills

All 52 skills in this repo
  • Gsap

    boraoztunc/skills

    GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.

    393 GitHub starsUsed in 5 repos~1.9k tokens
    Auto-check passed
  • Hyperframes

    boraoztunc/skills

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    393 GitHub starsUsed in 9 repos~7.6k tokens
    Auto-check passed
  • Remotion To Hyperframes

    boraoztunc/skills

    Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition.

    393 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed
  • Animejs

    boraoztunc/skills

    Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

    393 GitHub starsUsed in 2 repos~828 tokens
    Auto-check passed
  • Beam Glow States

    boraoztunc/skills

    Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow.

    393 GitHub starsUsed in 2 repos~3.2k tokens
    Auto-check passed
  • Minimal Zine Poster

    boraoztunc/skills

    Compile a theme, sentence, object, mood, article idea, or photo into a quiet Japanese/Korean zine-style editorial poster — tall aged paper, large negative space, one small image anchor, experimental…

    393 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check passed

Questions about Better Interface

What does Better Interface do?

Cross-discipline interface review: routes a screen, flow, feature, or product interface to every better- domain skill and consolidates one ranked verdict. Better Interface is an agent skill from boraoztunc/skills. Cross-discipline interface review: routes a screen, flow, feature, or product interface to every better- domain skill and consolidates one ranked verdict.

When should I use Better Interface?

Better Interface fits situations like: asked for a holistic review rather than a single domain; when interface-review hands up a change to route; better-interface; holistic interface review.

How do I install Better Interface in Claude Code?

Run `npx skills add boraoztunc/skills --skill better-interface -a claude-code`. Or copy the skill folder (better-interface in boraoztunc/skills) into .claude/skills/better-interface in your project. Claude Code loads it when a task matches its description.

How do I install Better Interface in Codex?

Run `npx skills add boraoztunc/skills --skill better-interface -a codex`. Or copy the skill folder (better-interface in boraoztunc/skills) into .agents/skills/better-interface in your project. Codex loads it when a task matches its description.

Can I use Better Interface in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add boraoztunc/skills --skill better-interface -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/better-interface, .gemini/skills/better-interface, .github/skills/better-interface and .opencode/skills/better-interface in your project.

What does Better Interface need to run?

SKILL.md names no scripts, command-line tools or credentials: Better Interface is instructions for the agent only.

Does Better Interface access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Better Interface safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Better Interface use?

Better Interface is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Better Interface use?

About 3.4k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Better Interface?

Skills that share tags, products or a category with Better Interface: Better Interface (trycompai/crm, 11k stars), Make Interfaces Feel Better (affaan-m/ECC, 274k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and OmniRoute Routing CLI (diegosouzapw/OmniRoute, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Better Interface?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 393 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.

Source: boraoztunc/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.