Frontend Design
jwynia/agent-skills
Create distinctive, production-grade frontend interfaces with high design quality.
User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui.
Install Better Interface
$ npx skills add trycompai/crm --skill better-interface -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install trycompai/crm better-interface --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/better-interface .claude/skills/better-interface && rm -rf skills-srcUse ~/.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/
Install the "better-interface" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-interface into .claude/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/trycompai/crm/tree/release/.agents/skills/better-interfaceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add trycompai/crm --skill better-interface -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install trycompai/crm better-interface --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/better-interface .agents/skills/better-interface && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "better-interface" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-interface into .agents/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add trycompai/crm --skill better-interface -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install trycompai/crm better-interface --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/better-interface .cursor/skills/better-interface && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "better-interface" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-interface into .cursor/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/trycompai/crm.git --path .agents/skills/better-interface--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add trycompai/crm --skill better-interface -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install trycompai/crm better-interface --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/better-interface .gemini/skills/better-interface && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "better-interface" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-interface into .gemini/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install trycompai/crm better-interfaceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add trycompai/crm --skill better-interface -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/better-interface .github/skills/better-interface && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "better-interface" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-interface into .github/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add trycompai/crm --skill better-interface -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install trycompai/crm better-interface --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/trycompai/crm.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/better-interface .opencode/skills/better-interface && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "better-interface" agent skill from https://github.com/trycompai/crm/tree/release/.agents/skills/better-interface into .opencode/skills/better-interface/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "better-interface", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
better-interface- GitHub stars
- 11k
- Token cost
- ~2k tokens
- SKILL.md length
- 1,067 words
- Files
- 2
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- MIT
At a glance
User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui.
- Works in 9 steps: Resolve Scope and Mode First → Recon Before Judgment → Use Domain Skills as the Sources of Truth → …
- Explicitly invoked for a holistic review of a screen
- 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 trycompai/crm. User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui. Use when explicitly invoked for a holistic review of a screen, flow, feature, or product interface. Supports quick and full review modes. Triggers on better-interface, full interface review, holistic UI audit, cross-discipline design review, review the whole interface.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Frontend & Design, covering Typography, Design review and critique and Accessibility. The repository describes itself as: Comp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM. The licence is MIT.
When your agent uses it
- Explicitly invoked for a holistic review of a screen
- Product interface
- Better-interface
- Full interface review
Example prompts
- “/better-interface”
Workflow steps
9 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 6d4793d. 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 2k tokens when it runs. Until then it costs about 113 tokens; SKILL.md has 1,067 words of instructions outside code blocks.
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 trycompai/crm at commit 6d4793d, republished under its MIT licence (© trycompai). 1,067 words, ~2,025 tokens.
Download SKILL.mdSave it as
.claude/skills/better-interface/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- better-interface
- description
- User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui. Use when explicitly invoked for a holistic review of a screen, flow, feature, or product interface. Supports quick and full review modes. Triggers on better-interface, full interface review, holistic UI audit, cross-discipline design review, review the whole interface.
Review the interface as one system
A strong interface is not six 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.
Core Principles
1. Resolve Scope and Mode First
Infer the screen, flow, feature, or repository scope from the request and current workspace. State the resolved scope in the output. Use full when no mode is supplied.
| Mode | Coverage | Finding cap |
|---|---|---|
quick | Primary user path and highest-traffic states; report only HIGH and MEDIUM issues | 5 |
full | Entire requested scope across all six domain skills, including empty, loading, error, and narrow-width states when present | 15 |
If the requested scope is too large to inspect credibly, narrow it to the highest-traffic complete flow and state the boundary. Never imply uninspected surfaces were reviewed.
2. Recon Before Judgment
Identify the framework, styling system, component library, design tokens, supported viewports, and available preview or test commands. Follow the project's established Tailwind, plain CSS, CSS-in-JS, token, and component conventions.
3. Use Domain Skills as the Sources of Truth
Before reviewing, confirm that all six owning skills below are available. Load and apply every available owner. In quick mode, inspect all six domains 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:
better-accessibilitybetter-layoutbetter-writingbetter-typographybetter-colorsbetter-ui
This skill owns the final response. When a domain skill is loaded through better-interface, apply its principles and references but ignore its standalone Review Output Format. 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 infullmode.
Within a severity, rank by reach and leverage. A token or shared-component fix outranks the same symptom in one leaf component.
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 convention is intentional, or the proposed change would add complexity without user benefit.
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.
Show full SKILL.md (419 more words)Show less
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
| Mistake | Fix |
|---|---|
| Six disconnected domain reports | Consolidate into one ranked findings table |
| Same issue reported by multiple skills | Assign it to the skill that owns the underlying rule |
| Finding with no exact location | Cite path/to/file:line and the current implementation |
| Visual claim inferred only from source | Inspect the rendered state or mark it not verified |
| Unlimited low-impact polish | Respect the mode cap; omit LOW findings in quick |
| Silent gaps in coverage | Show which domains and states were actually inspected |
| Missing owning skill silently treated as covered | Mark the domain Not reviewed and name the unavailable skill |
| No rejected candidates | Include the required considered-but-rejected table |
| Review silently edits code | Stay read-only unless implementation was requested |
| “Approve” with pending actionable findings | Use Needs changes or Block |
Review Output Format
Always use the following sections.
Scope and Coverage
State the mode, exact scope, stack and styling conventions, and any review boundary. Then show coverage:
| Domain | Evidence inspected | Result |
|---|---|---|
| Accessibility | Files, components, states, or checks | Findings count or Clear |
Include all six domains. Clear means inspected with no actionable finding; Not reviewed must explain why.
Findings
Use one table ordered by severity, then reach and leverage:
| # | Severity | Domain | Location | Before | After | Why |
|---|---|---|---|---|---|---|
| 1 | HIGH | Accessibility | src/Dialog.tsx:42 | <button><XIcon /></button> | Add aria-label="Close" and hide the icon from the accessibility tree | The 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:
| Location | Candidate | Rejected because |
|---|---|---|
src/Card.tsx:28 | Increase the shadow | Existing 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 moreHIGHfindings remain.Needs changes— onlyMEDIUMorLOWfindings remain.Approve— no actionable findings remain and the claimed coverage was verified.
© trycompai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .agents/skills/better-interface of trycompai/crm.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit 6d4793d
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Better Interface this skilltrycompai/crm | 11k | — | ~2k | Automated safety check: Pass | MIT | |
| Frontend Designjwynia/agent-skills | 165 | — | ~3.2k | Automated safety check: Pass | MIT | |
| Design Standardsrampstackco/claude-skills | 935 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Design ReviewTheDecipherist/claude-code-mastery-project-starter-kit | 338 | — | ~712 | Automated safety check: Pass | MIT | |
| Design Reviewpproenca/dot-skills | 214 | — | ~3.4k | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 98 repos | ~308 | Automated safety check: Pass | None |
Similar skills
Design Standards
rampstackco/claude-skills
Apply production-grade design standards when building or reviewing pages, components, or UI.
Design Review
TheDecipherist/claude-code-mastery-project-starter-kit
Critique UI and UX for usability, accessibility, and distinctiveness with cited, evidence-based findings.
Design Review
pproenca/dot-skills
Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table.
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
More from trycompai/crm
All 9 skills in this repoInstall Anti Slop
trycompai/crm
Install and configure the anti-slop Oxlint plugin in a local TypeScript or JavaScript repository.
Nuqs
trycompai/crm
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks.
Nestjs Trpc
trycompai/crm
Build end-to-end type-safe tRPC APIs inside NestJS using the nestjs-trpc adapter — @Router/@Query/@Mutation/@Subscription decorators, TRPCModule.forRoot, injectable middlewares and context, Zod…
Better Accessibility
trycompai/crm
Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers.
Better Colors
trycompai/crm
OKLCH color space and color usage for web projects. An agent skill from trycompai/crm.
Better Typography
trycompai/crm
Web typography from choosing fonts to spacing, wrapping and accessibility.
Related
Categories
Questions about Better Interface
What does Better Interface do?
User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui. Better Interface is an agent skill from trycompai/crm. User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui.
When should I use Better Interface?
Better Interface fits situations like: explicitly invoked for a holistic review of a screen; product interface; better-interface; full interface review.
How do I install Better Interface in Claude Code?
Run `npx skills add trycompai/crm --skill better-interface -a claude-code`. Or copy the skill folder (.agents/skills/better-interface in trycompai/crm) 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 trycompai/crm --skill better-interface -a codex`. Or copy the skill folder (.agents/skills/better-interface in trycompai/crm) 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 trycompai/crm --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 MIT 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 2k tokens (SKILL.md is roughly 8.1k 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: Frontend Design (jwynia/agent-skills, 165 stars), Design Standards (rampstackco/claude-skills, 935 stars), Design Review (TheDecipherist/claude-code-mastery-project-starter-kit, 338 stars) and Design Review (pproenca/dot-skills, 214 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Better Interface?
trycompai (a GitHub organization) maintains it in trycompai/crm, which has 11,109 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on September 11, 2026.
Source: trycompai/crm on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.