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.
Review UI designs and implementations for accessibility, consistency, usability, and visual quality.
Install UI Review
$ npx skills add espennilsen/pi --skill ui-review -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install espennilsen/pi ui-review --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/espennilsen/pi.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-review .claude/skills/ui-review && 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 "ui-review" agent skill from https://github.com/espennilsen/pi/tree/main/skills/ui-review into .claude/skills/ui-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-review", 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/espennilsen/pi/tree/main/skills/ui-reviewType 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 espennilsen/pi --skill ui-review -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install espennilsen/pi ui-review --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ui-review .agents/skills/ui-review && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-review" agent skill from https://github.com/espennilsen/pi/tree/main/skills/ui-review into .agents/skills/ui-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-review", 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 espennilsen/pi --skill ui-review -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install espennilsen/pi ui-review --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ui-review .cursor/skills/ui-review && 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 "ui-review" agent skill from https://github.com/espennilsen/pi/tree/main/skills/ui-review into .cursor/skills/ui-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-review", 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/espennilsen/pi.git --path skills/ui-review--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 espennilsen/pi --skill ui-review -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install espennilsen/pi ui-review --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ui-review .gemini/skills/ui-review && 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 "ui-review" agent skill from https://github.com/espennilsen/pi/tree/main/skills/ui-review into .gemini/skills/ui-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-review", 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 espennilsen/pi ui-reviewInstalls 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 espennilsen/pi --skill ui-review -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ui-review .github/skills/ui-review && 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 "ui-review" agent skill from https://github.com/espennilsen/pi/tree/main/skills/ui-review into .github/skills/ui-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-review", 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 espennilsen/pi --skill ui-review -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install espennilsen/pi ui-review --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ui-review .opencode/skills/ui-review && 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 "ui-review" agent skill from https://github.com/espennilsen/pi/tree/main/skills/ui-review into .opencode/skills/ui-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-review", 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-review- GitHub stars
- 122
- Token cost
- ~1.4k tokens
- SKILL.md length
- 558 words
- Files
- 1
- Skills in repo
- 36
- Repo updated
- First seen
- Licence
- MIT
At a glance
Review UI designs and implementations for accessibility, consistency, usability, and visual quality.
- Works in 6 steps: Accessibility (WCAG 2.1 AA) → Design System Compliance → Layout & Responsiveness → …
- Asked to review a design
- SKILL.md covers Process, Review Checklist, Output Format and Quick Review (for smaller…
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
UI Review is an agent skill from espennilsen/pi. Review UI designs and implementations for accessibility, consistency, usability, and visual quality. Use when asked to review a design, audit accessibility, check UI consistency, compare implementation against mockups, or evaluate a user interface.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Accessibility, UI design and UX design. The licence is MIT.
When your agent uses it
- Asked to review a design
- Audit accessibility
- Check UI consistency
- Compare implementation against mockups
Example prompts
- “/ui-review”
Workflow steps
6 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 79d019b. 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 (its code samples are markdown).
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 Review loads about 1.4k tokens when it runs. Until then it costs about 65 tokens; SKILL.md has 558 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 espennilsen/pi at commit 79d019b, republished under its MIT licence (© espennilsen). 558 words, ~1,388 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-review/SKILL.md (or your agent's skills folder).- name
- ui-review
- description
- Review UI designs and implementations for accessibility, consistency, usability, and visual quality. Use when asked to review a design, audit accessibility, check UI consistency, compare implementation against mockups, or evaluate a user interface.
UI Review
Systematic UI/UX review methodology for designs (in Penpot) and implementations (in code).
Process
- Understand context — what product, who are the users, what's the goal of this screen?
- Gather materials — pull the Penpot designs and/or the live implementation
- Run the checklist — score each category
- Report — use the structured output format
Review Checklist
1. Accessibility (WCAG 2.1 AA)
Color & Contrast
- Text contrast ≥ 4.5:1 against background (normal text)
- Text contrast ≥ 3:1 against background (large text ≥ 24px or 18.67px bold, equivalent to WCAG 18pt/14pt)
- UI component contrast ≥ 3:1 against adjacent colors (borders, icons, controls)
- Information not conveyed by color alone (use icons, patterns, labels too)
- Tested with color blindness simulation (protanopia, deuteranopia, tritanopia)
Keyboard Navigation
- All interactive elements reachable via Tab key
- Logical tab order (left-to-right, top-to-bottom, follows visual flow)
- Visible focus indicator on all focusable elements (no outline:none without replacement)
- Escape closes modals/dropdowns
- Enter/Space activates buttons and links
- Arrow keys navigate within composite widgets (tabs, menus, radio groups)
Screen Reader
- All images have meaningful alt text (or aria-hidden if decorative)
- Form inputs have associated labels (not just placeholder text)
- ARIA landmarks used (main, nav, aside, footer)
- Dynamic content changes announced (aria-live regions for toasts, errors)
- Headings follow a logical hierarchy (h1 → h2 → h3, no skipping)
Motion & Interaction
- Animations respect
prefers-reduced-motion - No content that flashes more than 3 times per second
- Touch targets ≥ 44x44px on mobile (WCAG 2.1 AAA — optional but recommended)
- Adequate time for timed interactions (or ability to extend)
2. Design System Compliance
- All colors from the token palette (no hex codes outside the system)
- Typography uses defined scale (no arbitrary font sizes)
- Spacing uses the 4px grid (no magic numbers)
- Components match design system variants (no custom one-offs)
- Icons from the approved set (Lucide)
- Border radius from token scale
- Shadows from token scale
3. Layout & Responsiveness
- Works at all breakpoints: 375px, 768px, 1280px, 1536px
- No horizontal scroll on mobile
- Text remains readable at all sizes (no text smaller than 12px)
- Touch-friendly spacing on mobile (no cramped click targets)
- Images and media scale properly
- Content hierarchy maintained across breakpoints
Show full SKILL.md (215 more words)Show less
4. Interaction Design
- Clear affordances (buttons look clickable, links look linkable)
- Hover states on all interactive elements (desktop)
- Loading states for async operations (skeleton screens or spinners)
- Empty states designed (no blank pages — always guide the user)
- Error states with clear recovery actions
- Success feedback for completed actions
- Confirmation for destructive actions (delete, discard)
- Undo available where possible
5. Visual Quality
- Consistent alignment (nothing looks "off" by a pixel)
- Visual hierarchy clear (primary action stands out, secondary is quieter)
- Whitespace used effectively (not cramped, not wastefully sparse)
- Typography hierarchy clear (heading → subheading → body → caption)
- Icon sizes consistent and proportional to surrounding text
- No orphaned words in headings (line breaks make sense)
6. Content & Copy
- Labels are clear and concise (no jargon)
- Error messages explain what went wrong AND how to fix it
- Button text describes the action ("Save changes" not "Submit")
- Placeholder text is a hint, not a label
- Consistent terminology throughout (don't mix "delete"/"remove"/"trash")
Output Format
## UI Review — [Screen/Component Name]
**Reviewed:** [date]
**Context:** [product, screen, purpose]
**Overall:** 🟢 Good | 🟡 Needs Work | 🔴 Significant Issues
### Accessibility
Score: X/10
[Specific findings with severity]
### Design System Compliance
Score: X/10
[Specific findings]
### Layout & Responsiveness
Score: X/10
[Specific findings]
### Interaction Design
Score: X/10
[Specific findings]
### Visual Quality
Score: X/10
[Specific findings]
### Content & Copy
Score: X/10
[Specific findings]
### 🔴 Must Fix
1. [Critical issues — accessibility violations, broken layouts]
### 🟡 Should Fix
1. [Important issues — inconsistencies, missing states]
### 🔵 Nice to Have
1. [Polish items — minor alignment, copy tweaks]
### ✅ What's Working Well
1. [Call out good patterns — reinforces what to keep doing]Quick Review (for smaller changes)
For minor changes or single components, use a shortened format:
- Accessibility — contrast OK? Keyboard accessible? Screen reader friendly?
- Consistency — matches the design system?
- States — all states present? (hover, focus, disabled, error, loading)
- Responsive — works on mobile?
- Copy — labels clear and actionable?
Report as: ✅ Pass | 🟡 Minor issues | 🔴 Blocking issues
© espennilsen, MIT. 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 skills/ui-review of espennilsen/pi.
Open the folder on GitHubat commit 79d019b
Compare with similar skills
UI Review 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 Review this skillespennilsen/pi | 122 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Interface Design for Dashboards and Appsholaboss-ai/holaOS | 11k | 3 repos | ~6k | Automated safety check: Pass | MIT | |
| WCAG 2.1 AA Accessibility Reviewgetcrew44/crew44 | 356 | — | ~741 | Automated safety check: Pass | MIT | |
| Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas | 401 | — | ~9k | Automated safety check: Pass | None | |
| Design Critiquegetcrew44/crew44 | 356 | — | ~691 | Automated safety check: Pass | MIT | |
| Product Design Workflow BundleXiaomiMiMo/MiMo-Code | 14k | — | ~721 | Automated safety check: Pass | MIT |
Similar skills
WCAG 2.1 AA Accessibility Review
getcrew44/crew44
Audits a design or page against WCAG 2.1 AA for contrast, keyboard use, focus, labels, touch targets and screen reader behavior, with a severity-ranked report.
Super UI UX Design
syahiidkamil/Software-Engineer-AI-Agent-Atlas
Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…
Design Critique
getcrew44/crew44
Walks an agent through five review passes on a screen, flow or mockup, then returns ranked findings with a severity and a suggested fix for each one.
Product Design Workflow Bundle
XiaomiMiMo/MiMo-Code
Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.
Web Interface Guidelines Review
tech-leads-club/agent-skills
Reviews UI code against a written set of web interface rules covering accessibility, forms, animation and typography, and reports terse file:line findings.
More from espennilsen/pi
All 36 skills in this repoGitHub
espennilsen/pi
Interact with GitHub repos, PRs, issues, CI, and notifications via the pi-github extension commands and gh CLI.
Skill Creator
espennilsen/pi
Create, review, and improve skills for Pi agents. An agent skill from espennilsen/pi.
Dry Code Review
espennilsen/pi
Perform a comprehensive DRY (Don't Repeat Yourself) code review on a codebase.
Extract Design System
espennilsen/pi
Reverse-engineer a design system from a live website (public URL or localhost).
PDF Reader
espennilsen/pi
Read and extract content from PDF files — text, tables, metadata, and images.
Google Workspace
espennilsen/pi
Manage Google Workspace via the gws CLI — Drive, Gmail, Sheets, Docs, Slides, People, Chat, Meet, Forms, and cross-service workflows.
Related
Categories
Questions about UI Review
What does UI Review do?
Review UI designs and implementations for accessibility, consistency, usability, and visual quality. UI Review is an agent skill from espennilsen/pi. Review UI designs and implementations for accessibility, consistency, usability, and visual quality.
When should I use UI Review?
UI Review fits situations like: asked to review a design; audit accessibility; check UI consistency; compare implementation against mockups.
How do I install UI Review in Claude Code?
Run `npx skills add espennilsen/pi --skill ui-review -a claude-code`. Or copy the skill folder (skills/ui-review in espennilsen/pi) into .claude/skills/ui-review in your project. Claude Code loads it when a task matches its description.
How do I install UI Review in Codex?
Run `npx skills add espennilsen/pi --skill ui-review -a codex`. Or copy the skill folder (skills/ui-review in espennilsen/pi) into .agents/skills/ui-review in your project. Codex loads it when a task matches its description.
Can I use UI Review 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 espennilsen/pi --skill ui-review -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-review, .gemini/skills/ui-review, .github/skills/ui-review and .opencode/skills/ui-review in your project.
What does UI Review need to run?
SKILL.md names no scripts, command-line tools or credentials: UI Review is instructions for the agent only.
Does UI Review 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 Review 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 Review use?
UI Review 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 UI Review use?
About 1.4k tokens (SKILL.md is roughly 5.6k 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 UI Review?
Skills that share tags, products or a category with UI Review: Interface Design for Dashboards and Apps (holaboss-ai/holaOS, 11k stars), WCAG 2.1 AA Accessibility Review (getcrew44/crew44, 356 stars), Super UI UX Design (syahiidkamil/Software-Engineer-AI-Agent-Atlas, 401 stars) and Design Critique (getcrew44/crew44, 356 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Review?
espennilsen (a GitHub user) maintains it in espennilsen/pi, which has 122 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on September 21, 2026.
Source: espennilsen/pi on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.