UI Design Review
jayminwest/warren
Independent design review of a warren web-UI change. An agent skill from jayminwest/warren.
Sets rules for web UI work that favor hierarchy, spacing and restrained styling, with routes for generating, reviewing and polishing interfaces.
Install UI Aesthetics Judgment
$ npx skills add kasonye/ui-aesthetics-skill --skill ui-aesthetics -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kasonye/ui-aesthetics-skill ui-aesthetics --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-aesthetics" agent skill from https://github.com/kasonye/ui-aesthetics-skill/tree/main into .claude/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", 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.
$ npx skills add kasonye/ui-aesthetics-skill --skill ui-aesthetics -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kasonye/ui-aesthetics-skill ui-aesthetics --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/kasonye/ui-aesthetics-skill/tree/main into .agents/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", 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 kasonye/ui-aesthetics-skill --skill ui-aesthetics -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kasonye/ui-aesthetics-skill ui-aesthetics --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-aesthetics" agent skill from https://github.com/kasonye/ui-aesthetics-skill/tree/main into .cursor/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", 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.
$ npx skills add kasonye/ui-aesthetics-skill --skill ui-aesthetics -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kasonye/ui-aesthetics-skill ui-aesthetics --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/kasonye/ui-aesthetics-skill/tree/main into .gemini/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", 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 kasonye/ui-aesthetics-skill ui-aestheticsInstalls 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 kasonye/ui-aesthetics-skill --skill ui-aesthetics -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/kasonye/ui-aesthetics-skill/tree/main into .github/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", 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 kasonye/ui-aesthetics-skill --skill ui-aesthetics -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kasonye/ui-aesthetics-skill ui-aesthetics --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-aesthetics" agent skill from https://github.com/kasonye/ui-aesthetics-skill/tree/main into .opencode/skills/ui-aesthetics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-aesthetics", 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
ui-aesthetics- GitHub stars
- 383
- Token cost
- ~3.2k tokens
- SKILL.md length
- 1,663 words
- Files
- 55 (incl. references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Sets rules for web UI work that favor hierarchy, spacing and restrained styling, with routes for generating, reviewing and polishing interfaces.
- Works in 6 steps: Generation → Review → Refactor → …
- Reviewing a web interface that feels cluttered or generic
- SKILL.md covers Intent, Task Routing, Non-Negotiables and Priority Order, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Aimed at web interfaces that look generic, cluttered, flat, over-styled or machine-made, the skill sets a few operating rules. Keep the scope and information density the user asked for, fix hierarchy, spacing and typography before decoration, prefer restrained neutrals with disciplined accents and consistent state behavior, and use depth, blur, glow or motion only when they clarify structure or interaction.
Work is routed into six kinds: generation, review, refactor, component polish, state and motion refinement, and depth and lighting refinement. When a request mixes critique and rewrite, it diagnoses first. Shared files core.md, reference-map.md and usage.md are read first, and detailed reference files are opened only when the task calls for them.
Output follows a contract: state the chosen route and the visual idea early, keep critique actionable and tied to hierarchy, trust, clarity or interaction quality, say whether a rewrite is light polish, a medium restructure or a full rebuild, and keep solutions shippable and maintainable.
When your agent uses it
- Reviewing a web interface that feels cluttered or generic
- Polishing a single component's states, spacing and typography
- Toning down heavy motion, glow or blur on an over-styled page
- Generating a new page with a clear visual hierarchy
Example prompts
- “Review this dashboard layout and tell me what makes it feel cluttered.”
- “Polish the pricing card component: spacing, hover and focus states, nothing flashy.”
- “This landing page looks AI-generated. Diagnose it first, then do a light polish.”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Generation
- Review
- Refactor
- Component Polish
- State / Motion Refinement
- Depth / Lighting Refinement
What it can do on your machine
Read from SKILL.md and the folder at commit b40c8c6. 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
UI Aesthetics Judgment loads about 3.2k tokens when it runs, and up to ~22k if it reads all its reference files. Until then it costs about 137 tokens; SKILL.md has 1,663 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 1,663 words (~3,234 tokens).
“Use this skill to make web UI output feel more professional, stable, and product-grade.”
- name
- ui-aesthetics
Files
SKILL.md and 54 other files (references, assets) in the repository root of kasonye/ui-aesthetics-skill.
- SKILL.md
- .agent/workflows/ui-aesthetics.md
- .agents/skills
- .claude/skills
- .codebuddy/commands/ui-aesthetics.md
- .codex/skills
- .cursor/rules/ui-aesthetics.mdc
- .gemini/skills
- .github/prompts/ui-aesthetics.prompt.md
- … and 46 more
Open the folder on GitHubat commit b40c8c6
Compare with similar skills
UI Aesthetics Judgment 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 |
|---|---|---|---|---|---|---|
| UI Aesthetics Judgment this skillkasonye/ui-aesthetics-skill | 383 | — | ~3.2k | Automated safety check: Pass | None | |
| UI Design Reviewjayminwest/warren | 481 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Frontend DesignYYH211/Claude-meta-skill | 282 | 1 repos | ~2.2k | Automated safety check: Pass | MIT | |
| Frontend DesignJetBrains/skills | 366 | 129 repos | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| Interface Design for Dashboards and Appsholaboss-ai/holaOS | 11k | 3 repos | ~6k | Automated safety check: Pass | MIT | |
| Senior FrontendOhh-889/skyroc | 795 | 2 repos | ~1.1k | Automated safety check: Notes | MIT |
Similar skills
Frontend Design
YYH211/Claude-meta-skill
Creates unique, production-grade frontend interfaces with exceptional design quality.
- Official
Frontend Design
JetBrains/skills
Create distinctive, production-grade frontend interfaces with high design quality.
Interface Design for Dashboards and Apps
holaboss-ai/holaOS
Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
Userinterface Wiki
raphaelsalaja/userinterface-wiki
UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.
Related
Categories
Questions about UI Aesthetics Judgment
What does UI Aesthetics Judgment do?
Sets rules for web UI work that favor hierarchy, spacing and restrained styling, with routes for generating, reviewing and polishing interfaces. Aimed at web interfaces that look generic, cluttered, flat, over-styled or machine-made, the skill sets a few operating rules. Keep the scope and information density the user asked for, fix hierarchy, spacing and typography before decoration, prefer restrained neutrals with disciplined accents and consistent state behavior, and use depth, blur, glow or motion only when they clarify structure or interaction.
When should I use UI Aesthetics Judgment?
UI Aesthetics Judgment fits situations like: reviewing a web interface that feels cluttered or generic; polishing a single component's states, spacing and typography; toning down heavy motion, glow or blur on an over-styled page; generating a new page with a clear visual hierarchy.
How do I install UI Aesthetics Judgment in Claude Code?
Run `npx skills add kasonye/ui-aesthetics-skill --skill ui-aesthetics -a claude-code`. Or copy the skill folder (the kasonye/ui-aesthetics-skill repository) into .claude/skills/ui-aesthetics in your project. Claude Code loads it when a task matches its description.
How do I install UI Aesthetics Judgment in Codex?
Run `npx skills add kasonye/ui-aesthetics-skill --skill ui-aesthetics -a codex`. Or copy the skill folder (the kasonye/ui-aesthetics-skill repository) into .agents/skills/ui-aesthetics in your project. Codex loads it when a task matches its description.
Can I use UI Aesthetics Judgment 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 kasonye/ui-aesthetics-skill --skill ui-aesthetics -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-aesthetics, .gemini/skills/ui-aesthetics, .github/skills/ui-aesthetics and .opencode/skills/ui-aesthetics in your project.
What does UI Aesthetics Judgment need to run?
SKILL.md names no scripts, command-line tools or credentials: UI Aesthetics Judgment is instructions for the agent only.
Does UI Aesthetics Judgment 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 UI Aesthetics Judgment 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 UI Aesthetics Judgment use?
No licence was found for UI Aesthetics Judgment or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does UI Aesthetics Judgment use?
About 3.2k 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. Its references folder adds about 19k tokens, read only when the agent opens those files.
What are the alternatives to UI Aesthetics Judgment?
Skills that share tags, products or a category with UI Aesthetics Judgment: UI Design Review (jayminwest/warren, 481 stars), Frontend Design (YYH211/Claude-meta-skill, 282 stars), Frontend Design (JetBrains/skills, 366 stars) and Interface Design for Dashboards and Apps (holaboss-ai/holaOS, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Aesthetics Judgment?
kasonye (a GitHub user) maintains it in kasonye/ui-aesthetics-skill, which has 383 GitHub stars. The repository was last updated on April 14, 2026.
Source: kasonye/ui-aesthetics-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.