Ultimate UI
NeverSight/learn-skills.dev
A skill your agent uses when building user interfaces that need to look polished, modern, and intentional - not like AI-generated slop.
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues.
Install Web Design Reviewer
$ npx skills add github/awesome-copilot --skill web-design-reviewer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install github/awesome-copilot web-design-reviewer --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/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-design-reviewer .claude/skills/web-design-reviewer && 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 "web-design-reviewer" agent skill from https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer into .claude/skills/web-design-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-reviewer", 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/github/awesome-copilot/tree/main/skills/web-design-reviewerType 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 github/awesome-copilot --skill web-design-reviewer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install github/awesome-copilot web-design-reviewer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/web-design-reviewer .agents/skills/web-design-reviewer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-design-reviewer" agent skill from https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer into .agents/skills/web-design-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-reviewer", 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 github/awesome-copilot --skill web-design-reviewer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install github/awesome-copilot web-design-reviewer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/web-design-reviewer .cursor/skills/web-design-reviewer && 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 "web-design-reviewer" agent skill from https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer into .cursor/skills/web-design-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-reviewer", 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/github/awesome-copilot.git --path skills/web-design-reviewer--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 github/awesome-copilot --skill web-design-reviewer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install github/awesome-copilot web-design-reviewer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/web-design-reviewer .gemini/skills/web-design-reviewer && 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 "web-design-reviewer" agent skill from https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer into .gemini/skills/web-design-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-reviewer", 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 github/awesome-copilot web-design-reviewerInstalls 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 github/awesome-copilot --skill web-design-reviewer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/web-design-reviewer .github/skills/web-design-reviewer && 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 "web-design-reviewer" agent skill from https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer into .github/skills/web-design-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-reviewer", 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 github/awesome-copilot --skill web-design-reviewer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install github/awesome-copilot web-design-reviewer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/web-design-reviewer .opencode/skills/web-design-reviewer && 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 "web-design-reviewer" agent skill from https://github.com/github/awesome-copilot/tree/main/skills/web-design-reviewer into .opencode/skills/web-design-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-design-reviewer", 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
web-design-reviewer- GitHub stars
- 40k
- Used in
- 3 other repos
- Token cost
- ~2.6k tokens
- SKILL.md length
- 928 words
- Files
- 3 (incl. references)
- Skills in repo
- 417
- Repo updated
- First seen
- Licence
- MIT
At a glance
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues.
- Works in 4 steps: Information Gathering Phase → Visual Inspection Phase → Issue Fixing Phase → …
- Requests like review website design
- SKILL.md covers Scope of Application, Prerequisites, Workflow Overview and Step 1: Information Gathering…, plus 7 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Web Design Reviewer is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/framework-fixes.md` and `references/visual-checklist.md`).
It sits in Frontend & Design, covering Responsive design, CSS and styling and Accessibility. It works with Tailwind CSS. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.
When your agent uses it
- Requests like review website design
- Find design problems
Example prompts
- “review website design”
- “check the UI”
- “fix the layout”
- “/web-design-reviewer”
Requirements
- Node.js
Workflow steps
4 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 727ff2e. 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 mermaid, markdown and json).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.com
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
Web Design Reviewer loads about 2.6k tokens when it runs, and up to ~6k if it reads all its reference files. Until then it costs about 95 tokens; SKILL.md has 928 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 github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 928 words, ~2,645 tokens.
Download SKILL.mdSave it as
.claude/skills/web-design-reviewer/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- web-design-reviewer
- description
- This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
Web Design Reviewer
This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.
Scope of Application
- Static sites (HTML/CSS/JS)
- SPA frameworks such as React / Vue / Angular / Svelte
- Full-stack frameworks such as Next.js / Nuxt / SvelteKit
- CMS platforms such as WordPress / Drupal
- Any other web application
Prerequisites
Required
Target website must be running
- Local development server (e.g.,
http://localhost:3000) - Staging environment
- Production environment (for read-only reviews)
- Local development server (e.g.,
Browser automation must be available
- Screenshot capture
- Page navigation
- DOM information retrieval
Access to source code (when making fixes)
- Project must exist within the workspace
Workflow Overview
flowchart TD
A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
B --> C[Step 3: Issue Fixing]
C --> D[Step 4: Re-verification]
D --> E{Issues Remaining?}
E -->|Yes| B
E -->|No| F[Completion Report]Step 1: Information Gathering Phase
1.1 URL Confirmation
If the URL is not provided, ask the user:
Please provide the URL of the website to review (e.g.,
http://localhost:3000)
1.2 Understanding Project Structure
When making fixes, gather the following information:
| Item | Example Question |
|---|---|
| Framework | Are you using React / Vue / Next.js, etc.? |
| Styling Method | CSS / SCSS / Tailwind / CSS-in-JS, etc. |
| Source Location | Where are style files and components located? |
| Review Scope | Specific pages only or entire site? |
1.3 Automatic Project Detection
Attempt automatic detection from files in the workspace:
Detection targets:
├── package.json → Framework and dependencies
├── tsconfig.json → TypeScript usage
├── tailwind.config → Tailwind CSS
├── next.config → Next.js
├── vite.config → Vite
├── nuxt.config → Nuxt
└── src/ or app/ → Source directory1.4 Identifying Styling Method
| Method | Detection | Edit Target |
|---|---|---|
| Pure CSS | *.css files | Global CSS or component CSS |
| SCSS/Sass | *.scss, *.sass | SCSS files |
| CSS Modules | *.module.css | Module CSS files |
| Tailwind CSS | tailwind.config.* | className in components |
| styled-components | styled. in code | JS/TS files |
| Emotion | @emotion/ imports | JS/TS files |
| CSS-in-JS (other) | Inline styles | JS/TS files |
Step 2: Visual Inspection Phase
2.1 Page Traversal
- Navigate to the specified URL
- Capture screenshots
- Retrieve DOM structure/snapshot (if possible)
- If additional pages exist, traverse through navigation
2.2 Inspection Items
Work through references/visual-checklist.md during inspection and again during post-fix verification.
Layout Issues
| Issue | Description | Severity |
|---|---|---|
| Element Overflow | Content overflows from parent element or viewport | High |
| Element Overlap | Unintended overlapping of elements | High |
| Alignment Issues | Grid or flex alignment problems | Medium |
| Inconsistent Spacing | Padding/margin inconsistencies | Medium |
| Text Clipping | Long text not handled properly | Medium |
Responsive Issues
| Issue | Description | Severity |
|---|---|---|
| Non-mobile Friendly | Layout breaks on small screens | High |
| Breakpoint Issues | Unnatural transitions when screen size changes | Medium |
| Touch Targets | Buttons too small on mobile | Medium |
Accessibility Issues
| Issue | Description | Severity |
|---|---|---|
| Insufficient Contrast | Low contrast ratio between text and background | High |
| No Focus State | Cannot determine state during keyboard navigation | High |
| Missing alt Text | No alternative text for images | Medium |
Visual Consistency
| Issue | Description | Severity |
|---|---|---|
| Font Inconsistency | Mixed font families | Medium |
| Color Inconsistency | Non-unified brand colors | Medium |
| Spacing Inconsistency | Non-uniform spacing between similar elements | Low |
2.3 Viewport Testing (Responsive)
Test at the following viewports:
| Name | Width | Representative Device |
|---|---|---|
| Mobile | 375px | iPhone SE/12 mini |
| Tablet | 768px | iPad |
| Desktop | 1280px | Standard PC |
| Wide | 1920px | Large display |
Step 3: Issue Fixing Phase
3.1 Issue Prioritization
block-beta
columns 1
block:priority["Priority Matrix"]
P1["P1: Fix Immediately\n(Layout issues affecting functionality)"]
P2["P2: Fix Next\n(Visual issues degrading UX)"]
P3["P3: Fix If Possible\n(Minor visual inconsistencies)"]
end3.2 Identifying Source Files
Identify source files from problematic elements:
Selector-based Search
- Search codebase by class name or ID
- Explore style definitions with
grep_search
Component-based Search
- Identify components from element text or structure
- Explore related files with
semantic_search
File Pattern Filtering
Style files: src/**/*.css, styles/**/* Components: src/components/**/* Pages: src/pages/**, app/**
3.3 Applying Fixes
Framework-specific Fix Guidelines
See references/framework-fixes.md for details.
Fix Principles
- Minimal Changes: Only make the minimum changes necessary to resolve the issue
- Respect Existing Patterns: Follow existing code style in the project
- Avoid Breaking Changes: Be careful not to affect other areas
- Add Comments: Add comments to explain the reason for fixes where appropriate
Show full SKILL.md (371 more words)Show less
Step 4: Re-verification Phase
4.1 Post-fix Confirmation
- Reload browser (or wait for development server HMR)
- Capture screenshots of fixed areas
- Compare before and after
4.2 Regression Testing
- Verify that fixes haven't affected other areas
- Confirm responsive display is not broken
4.3 Iteration Decision
flowchart TD
A{Issues Remaining?}
A -->|Yes| B[Return to Step 2]
A -->|No| C[Proceed to Completion Report]Iteration Limit: If more than 3 fix attempts are needed for a specific issue, consult the user
Output Format
Review Results Report
# Web Design Review Results
## Summary
| Item | Value |
|------|-------|
| Target URL | {URL} |
| Framework | {Detected framework} |
| Styling | {CSS / Tailwind / etc.} |
| Tested Viewports | Desktop, Mobile |
| Issues Detected | {N} |
| Issues Fixed | {M} |
## Detected Issues
### [P1] {Issue Title}
- **Page**: {Page path}
- **Element**: {Selector or description}
- **Issue**: {Detailed description of the issue}
- **Fixed File**: `{File path}`
- **Fix Details**: {Description of changes}
- **Screenshot**: Before/After
### [P2] {Issue Title}
...
## Unfixed Issues (if any)
### {Issue Title}
- **Reason**: {Why it was not fixed/could not be fixed}
- **Recommended Action**: {Recommendations for user}
## Recommendations
- {Suggestions for future improvements}Required Capabilities
| Capability | Description | Required |
|---|---|---|
| Web Page Navigation | Access URLs, page transitions | ✅ |
| Screenshot Capture | Page image capture | ✅ |
| Image Analysis | Visual issue detection | ✅ |
| DOM Retrieval | Page structure retrieval | Recommended |
| File Read/Write | Source code reading and editing | Required for fixes |
| Code Search | Code search within project | Required for fixes |
Reference Implementation
Implementation with Playwright MCP
Playwright MCP is recommended as the reference implementation for this skill.
| Capability | Playwright MCP Tool | Purpose |
|---|---|---|
| Navigation | browser_navigate | Access URLs |
| Snapshot | browser_snapshot | Retrieve DOM structure |
| Screenshot | browser_take_screenshot | Images for visual inspection |
| Click | browser_click | Interact with interactive elements |
| Resize | browser_resize | Responsive testing |
| Console | browser_console_messages | Detect JS errors |
Configuration Example (MCP Server)
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
}
}
}Other Compatible Browser Automation Tools
| Tool | Features |
|---|---|
| Selenium | Broad browser support, multi-language support |
| Puppeteer | Chrome/Chromium focused, Node.js |
| Cypress | Easy integration with E2E testing |
| WebDriver BiDi | Standardized next-generation protocol |
The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.
Best Practices
DO (Recommended)
- ✅ Always save screenshots before making fixes
- ✅ Fix one issue at a time and verify each
- ✅ Follow the project's existing code style
- ✅ Confirm with user before major changes
- ✅ Document fix details thoroughly
DON'T (Not Recommended)
- ❌ Large-scale refactoring without confirmation
- ❌ Ignoring design systems or brand guidelines
- ❌ Fixes that ignore performance
- ❌ Fixing multiple issues at once (difficult to verify)
Troubleshooting
Problem: Style files not found
- Check dependencies in
package.json - Consider the possibility of CSS-in-JS
- Consider CSS generated at build time
- Ask user about styling method
Problem: Fixes not reflected
- Check if development server HMR is working
- Clear browser cache
- Rebuild if project requires build
- Check CSS specificity issues
Problem: Fixes affecting other areas
- Rollback changes
- Use more specific selectors
- Consider using CSS Modules or scoped styles
- Consult user to confirm impact scope
© github, 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 2 other files (references) in skills/web-design-reviewer of github/awesome-copilot.
- SKILL.md
- references/framework-fixes.md
- references/visual-checklist.md
Open the folder on GitHubat commit 727ff2e
Used in 3 other repositories
We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in github/awesome-copilot, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Web Design Reviewer 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 |
|---|---|---|---|---|---|---|
| Web Design Reviewer this skillgithub/awesome-copilot | 40k | 3 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Ultimate UINeverSight/learn-skills.dev | 216 | 1 repos | ~4k | Automated safety check: Pass | MIT | |
| Frontend Designseb1n/awesome-ai-agent-skills | 206 | — | ~2.3k | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Tailwind CSS Patternsever-works/ever-works | 158 | 3 repos | ~1.6k | Automated safety check: Notes | AGPL-3.0 |
Similar skills
Frontend Design
seb1n/awesome-ai-agent-skills
Design and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
Frontend UI Functional
victorGPT/vibeusage
A skill your agent uses when building or refactoring functional React/Vite/Tailwind UI pages, templates, or component libraries that need consistent structure, tokenized styling, accessibility…
More from github/awesome-copilot
All 417 skills in this repo- Official
Acquire Codebase Knowledge
github/awesome-copilot
Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.
- Official
Azure Architecture Autopilot
github/awesome-copilot
Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.
- Official
Draw.io Diagram Generator
github/awesome-copilot
Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.
- Official
Credit Risk Data Cleaning
github/awesome-copilot
Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.
- Official
Daily Focus Board
github/awesome-copilot
Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.
- Official
Python Pypi Package Builder
github/awesome-copilot
End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.
Related
Works with
Categories
Questions about Web Design Reviewer
What does Web Design Reviewer do?
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Web Design Reviewer is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. This skill enables visual inspection of websites running locally or remotely to identify and fix design issues.
When should I use Web Design Reviewer?
Web Design Reviewer fits situations like: requests like review website design; find design problems.
How do I install Web Design Reviewer in Claude Code?
Run `npx skills add github/awesome-copilot --skill web-design-reviewer -a claude-code`. Or copy the skill folder (skills/web-design-reviewer in github/awesome-copilot) into .claude/skills/web-design-reviewer in your project. Claude Code loads it when a task matches its description.
How do I install Web Design Reviewer in Codex?
Run `npx skills add github/awesome-copilot --skill web-design-reviewer -a codex`. Or copy the skill folder (skills/web-design-reviewer in github/awesome-copilot) into .agents/skills/web-design-reviewer in your project. Codex loads it when a task matches its description.
Can I use Web Design Reviewer 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 github/awesome-copilot --skill web-design-reviewer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-design-reviewer, .gemini/skills/web-design-reviewer, .github/skills/web-design-reviewer and .opencode/skills/web-design-reviewer in your project.
What does Web Design Reviewer need to run?
SKILL.md names no scripts, command-line tools or credentials: Web Design Reviewer is instructions for the agent only. Our summary lists: Node.js.
Does Web Design Reviewer access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is Web Design Reviewer 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 Web Design Reviewer use?
Web Design Reviewer 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 Web Design Reviewer use?
About 2.6k tokens (SKILL.md is roughly 11k 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 3.4k tokens, read only when the agent opens those files.
What are the alternatives to Web Design Reviewer?
Skills that share tags, products or a category with Web Design Reviewer: Ultimate UI (NeverSight/learn-skills.dev, 216 stars), Frontend Design (seb1n/awesome-ai-agent-skills, 206 stars), UI Styling (Ohh-889/skyroc, 795 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Design Reviewer?
github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.
Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.