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…
Audit the brand, UX, and site design of the leading sites in a vertical as a set of observable cross-site patterns, producing the experience bar a new build must meet or beat.
$ npx skills add rampstackco/claude-skills --skill competitor-experience-audit -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rampstackco/claude-skills competitor-experience-audit --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/rampstackco/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/competitor-experience-audit .claude/skills/competitor-experience-audit && 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 "competitor-experience-audit" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/competitor-experience-audit into .claude/skills/competitor-experience-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "competitor-experience-audit", 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/rampstackco/claude-skills/tree/main/skills/competitor-experience-auditType 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 rampstackco/claude-skills --skill competitor-experience-audit -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rampstackco/claude-skills competitor-experience-audit --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/competitor-experience-audit .agents/skills/competitor-experience-audit && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "competitor-experience-audit" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/competitor-experience-audit into .agents/skills/competitor-experience-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "competitor-experience-audit", 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 rampstackco/claude-skills --skill competitor-experience-audit -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rampstackco/claude-skills competitor-experience-audit --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/competitor-experience-audit .cursor/skills/competitor-experience-audit && 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 "competitor-experience-audit" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/competitor-experience-audit into .cursor/skills/competitor-experience-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "competitor-experience-audit", 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/rampstackco/claude-skills.git --path skills/competitor-experience-audit--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 rampstackco/claude-skills --skill competitor-experience-audit -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rampstackco/claude-skills competitor-experience-audit --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/competitor-experience-audit .gemini/skills/competitor-experience-audit && 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 "competitor-experience-audit" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/competitor-experience-audit into .gemini/skills/competitor-experience-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "competitor-experience-audit", 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 rampstackco/claude-skills competitor-experience-auditInstalls 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 rampstackco/claude-skills --skill competitor-experience-audit -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/competitor-experience-audit .github/skills/competitor-experience-audit && 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 "competitor-experience-audit" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/competitor-experience-audit into .github/skills/competitor-experience-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "competitor-experience-audit", 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 rampstackco/claude-skills --skill competitor-experience-audit -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rampstackco/claude-skills competitor-experience-audit --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/competitor-experience-audit .opencode/skills/competitor-experience-audit && 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 "competitor-experience-audit" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/competitor-experience-audit into .opencode/skills/competitor-experience-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "competitor-experience-audit", 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.
competitor-experience-auditAudit the brand, UX, and site design of the leading sites in a vertical as a set of observable cross-site patterns, producing the experience bar a new build must meet or beat.
Competitor Experience Audit is an agent skill from rampstackco/claude-skills. Audit the brand, UX, and site design of the leading sites in a vertical as a set of observable cross-site patterns, producing the experience bar a new build must meet or beat. Use this skill whenever the user wants to assess the competitive design field, capture vertical conventions, identify the design and UX bar of a category, or set the experience standard before a build. Triggers on competitor experience audit, UX audit, site design audit, brand audit, design conventions, what makes these sites good, vertical…
Its SKILL.md is about 3.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `README.md`, `references/audit-template.md` and `references/experience-dimensions-checklist.md`).
It sits in Frontend & Design, covering Accessibility and Design review and critique. The repository describes itself as: Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize. The licence is MIT.
7 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 482c9bf. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Competitor Experience Audit loads about 3.6k tokens when it runs, and up to ~6.6k if it reads all its reference files. Until then it costs about 238 tokens; SKILL.md has 1,945 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.
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.
The full file from rampstackco/claude-skills at commit 482c9bf, republished under its MIT licence (© rampstackco). 1,945 words, ~3,610 tokens.
.claude/skills/competitor-experience-audit/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.Capture the brand, UX, and site design that the leading sites in a vertical observably share, and where they fall short. The output is the experience bar a new build must meet or beat, grounded in cross-site patterns rather than aesthetic opinion.
Stack-agnostic. Works on any SiteShape (ecommerce-catalog, inventory-listing, hospitality-food, b2b-manufacturer, and so on). Auto-parts catalogs are the first test case, not the only target.
This skill is the brand / UX / design counterpart to a technical audit like seo-onpage or accessibility-audit. Technical findings are objective (a missing canonical is missing). Design is more subjective, so this skill is deliberately written to make the subjective assessable: every dimension is judged by observable questions about what the leading sites actually do, reported as patterns and gaps, and marked not_assessable whenever the evidence does not support a judgment.
design-standards or brand-style-guide for production design decisions on a known build)seo-competitor)creative-direction and brand-discovery)ux-research, usability-testing)seo-onpage, accessibility-audit)If the list of leading sites is unknown, ask. Picking the wrong field produces an experience bar against the wrong vertical.
Some dimensions can be partially assessed from static HTML (primary navigation, the catalog/category surface count, the presence of search). Most cannot. Layout density, brand register, motion, trust-signal prominence, and the rendered hierarchy of the first viewport all need the rendered page to judge honestly. If you only have static HTML for a site, mark every rendered-only dimension not_assessable for that site rather than guessing.
Each dimension is judged by observable questions across the leading sites in the field, then reported as a cross-site pattern plus the gap (where the leaders converge, and where even they fall short).
Score each dimension as Pattern present (the field converges on a recognizable convention), Mixed (the field splits across two or three approaches), or Gap (no convention emerges, or every leader misses it). Mark not_assessable when the evidence cannot support a judgment.
Never write Good design or Bad design or any aesthetic verdict. The dimensions are about what the field observably does, not whether you like it.
Does the site lead with the visitor's primary job, or bury it?
Observable signal: count the elements that compete for first attention, identify which one the layout actually privileges, name what the field converges on as the primary task.
Is the layout retail-dense, editorial, or marketing-airy? Cross-reference creative-direction aesthetic positions (editorial restrained, polished standard, controlled maximalist, expressive maximalist) for vocabulary; do not redefine that here.
Observable signal: count modules above the fold across the field; describe the register the leaders share, not whether you find it attractive.
How much of the catalog or offering is surfaced at once, and in what shape?
Observable signal: count the category entry points and describe the navigation depth pattern the field uses.
Do the sites serve both the know-what-I-want path and the browse path?
Observable signal: list the paths the field offers, score whether each path is primary, secondary, or missing.
What brand posture do the leading sites take, and is it consistent across the page?
Cross-reference the creative-direction and brand-archetype-system skills for the vocabulary. Report the register the field converges on. Do not rate the taste; describe what posture the leaders take.
What recurring trust and conversion conventions does the field use?
Observable signal: which signals appear across the field, where they appear, and which the leaders share.
The patterns that recur across the leaders and define what a credible site in this vertical is expected to have. This is the synthesis of dimensions 1 through 6 into a short list of "if your build does not do this, it will read as off-vertical."
Observable signal: which conventions recur on 3 of N or more of the leading sites; which are absent across the field (the gap that a positioning opportunity exploits).
This is not negotiable. The credibility of an experience audit erodes the moment it slides into taste:
art-direction or design-standards, not here.not_assessable for that site or that pattern. Common cases: layout and density cannot be judged from un-rendered static HTML; motion and animation cannot be judged from a screenshot; brand voice cannot be judged from a single page.If the user asks "is this design good", redirect to observable patterns ("the leading sites in the field share X, Y, Z; this build does X and W but not Y or Z; that is the gap"). If the user asks for an aesthetic call, point them at design-standards or art-direction.
references/experience-dimensions-checklist.md to score each site on each dimension. Mark not_assessable wherever the evidence is thin.references/audit-template.md. Default output is a markdown experience bar, generalized to pattern-level if it will feed a public showcase workup (no named competitors in the public version).creative-direction, design-standards, information-architecture, and the relevant build skill (landing-page-copy, frontend-component-build) read as the experience bar to meet.When you spot one of these, push back before delivering.
not_assessable and get the rendered view. Static HTML supports only partial assessment; do not guess at design quality you cannot see.partial and call out what is assessed vs what is not.Default output is a markdown experience bar at experience-audit-[vertical-slug].md in the project root. Structure:
Not_assessable items (what could not be judged and why)Keep the bar under 1500 words. If a dimension needs deeper treatment, link to a deeper appendix rather than expanding inline.
If the audit will feed a public showcase workup, scrub for named competitors before publishing. The named version stays operated-side; the public workup carries the patterns and the gaps in generalized form. This mirrors how Basano's competitor review already handles named sites in its model-backed audit.
references/audit-template.md - Fillable experience-audit template, copy and use. Generalized and named variants both present.references/experience-dimensions-checklist.md - The observable questions per dimension, in scoring order.© rampstackco, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files (references) in skills/competitor-experience-audit of rampstackco/claude-skills.
Open the folder on GitHubat commit 482c9bf
Competitor Experience Audit 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 |
|---|---|---|---|---|---|---|
| Competitor Experience Audit this skillrampstackco/claude-skills | 935 | — | ~3.6k | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 98 repos | ~308 | Automated safety check: Pass | None | |
| Design AuditAThevon/genjutsu | 416 | 1 repos | ~1.6k | Automated safety check: Pass | Custom licence | |
| Frontend Designspinspire/pocketbase-sveltekit-starter | 511 | 1 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Frontend Designjwynia/agent-skills | 165 | — | ~3.2k | Automated safety check: Pass | MIT | |
| WCAG 2.1 AA Accessibility Reviewgetcrew44/crew44 | 356 | — | ~741 | Automated safety check: Pass | MIT |
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…
AThevon/genjutsu
Design audit checklist - motion gaps, accessibility, color consistency, responsive, performance.
spinspire/pocketbase-sveltekit-starter
Create distinctive, production-grade frontend interfaces with high design quality and accessible markup.
jwynia/agent-skills
Create distinctive, production-grade frontend interfaces with high design quality.
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.
trycompai/crm
User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui.
rampstackco/claude-skills
Run a structured after-action review (postmortem, retrospective) on a launch, incident, or completed project to capture timeline, root cause analysis, contributing factors, and actionable lessons.
rampstackco/claude-skills
Design measurement frameworks including event taxonomy, KPI hierarchy, dashboard architecture, attribution models, and analytics implementation strategy.
rampstackco/claude-skills
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.
rampstackco/claude-skills
Develop or document a complete brand voice and tone system covering voice attributes, tone shifts by context, vocabulary preferences, grammar rules, and copy examples.
rampstackco/claude-skills
Write or edit website copy, blog content, and editorial pieces with attention to voice, structure, and goal.
rampstackco/claude-skills
Develop a content strategy covering editorial positioning, content pillars, formats, calendar, governance, and topical authority planning.
Categories
Audit the brand, UX, and site design of the leading sites in a vertical as a set of observable cross-site patterns, producing the experience bar a new build must meet or beat. Competitor Experience Audit is an agent skill from rampstackco/claude-skills. Audit the brand, UX, and site design of the leading sites in a vertical as a set of observable cross-site patterns, producing the experience bar a new build must meet or beat.
Competitor Experience Audit fits situations like: the user wants to assess the competitive design field; capture vertical conventions; identify the design and UX bar of a category; set the experience standard before a build.
Run `npx skills add rampstackco/claude-skills --skill competitor-experience-audit -a claude-code`. Or copy the skill folder (skills/competitor-experience-audit in rampstackco/claude-skills) into .claude/skills/competitor-experience-audit in your project. Claude Code loads it when a task matches its description.
Run `npx skills add rampstackco/claude-skills --skill competitor-experience-audit -a codex`. Or copy the skill folder (skills/competitor-experience-audit in rampstackco/claude-skills) into .agents/skills/competitor-experience-audit in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rampstackco/claude-skills --skill competitor-experience-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/competitor-experience-audit, .gemini/skills/competitor-experience-audit, .github/skills/competitor-experience-audit and .opencode/skills/competitor-experience-audit in your project.
SKILL.md names no scripts, command-line tools or credentials: Competitor Experience Audit is instructions for the agent only.
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.
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.
Competitor Experience Audit is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.6k tokens (SKILL.md is roughly 14k 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 3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Competitor Experience Audit: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Design Audit (AThevon/genjutsu, 416 stars), Frontend Design (spinspire/pocketbase-sveltekit-starter, 511 stars) and Frontend Design (jwynia/agent-skills, 165 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
rampstackco (a GitHub organization) maintains it in rampstackco/claude-skills, which has 935 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 7, 2026.
Source: rampstackco/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.