Run any Skill in Manus with one click

web-interface-guidelines

Stars0

Forks0

UpdatedJuly 12, 2026 at 03:33

Audit UI code against Vercel's Web Interface Guidelines — ~100 terse, checkable rules covering accessibility, focus states, forms, animation, typography, content handling, touch targets, safe areas, dark mode, i18n, and hydration safety. Use when reviewing UI code for compliance ("review my UI", "check accessibility", "audit UX details"), as the rules-pass companion to ui-review (which covers visual craft) and ui-lint (the deterministic oracle).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

cpuchip

cpuchip/working-with-ai

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

4 files

SKILL.md

readonly

name	web-interface-guidelines
description	Audit UI code against Vercel's Web Interface Guidelines — ~100 terse, checkable rules covering accessibility, focus states, forms, animation, typography, content handling, touch targets, safe areas, dark mode, i18n, and hydration safety. Use when reviewing UI code for compliance ("review my UI", "check accessibility", "audit UX details"), as the rules-pass companion to ui-review (which covers visual craft) and ui-lint (the deterministic oracle).
metadata	{"upstream":"https://github.com/vercel-labs/web-interface-guidelines (MIT)","vendored":"2026-07-07T00:00:00.000Z"}

Web Interface Guidelines (Vercel) — local rules pack

The full rule set lives in guidelines.md in this directory — vendored locally so reviews are deterministic and work offline. Upstream is vercel-labs/web-interface-guidelines (command.md); refresh occasionally with:

# run from this skill's directory
curl -sL https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md \
  -o guidelines.md

Procedure

Read guidelines.md (the whole file — it is ~180 lines of terse rules grouped by section: Accessibility, Focus States, Forms, Animation, Typography, Content Handling, Images, Performance, Navigation & State, Touch & Interaction, Safe Areas & Layout, Dark Mode & Theming, Locale & i18n, Hydration Safety, Hover States, Content & Copy, Anti-patterns).
Read the target files (user-specified, or the components you just built/changed).
Check every rule against the code. These rules are checkable — each maps to a concrete pattern you can grep or read for (e.g. outline-none without a focus replacement, transition: all, missing autocomplete, straight quotes in copy, onPaste + preventDefault).
Report findings grouped by file in file:line format (clickable), terse, no explanations unless the fix is non-obvious. Note ✓ pass for sections with no findings so coverage is visible.

How this composes

Your visual-design system (whatever owns spacing, type scale, color, density, motion) covers feel; this skill owns interaction correctness details those knobs don't see.
ui-review (ships in this plugin) runs any deterministic lint first, then judgment passes — add this rules pack as an extra pass when the review is pre-ship or touches forms/inputs/motion.
These rules are the checkable-but-not-yet-scripted layer above whatever deterministic UI lint you maintain. Rules that fire repeatedly are candidates to graduate into that script.

More from this repository

same repository

ammon

cpuchip/working-with-ai

When a task is handed off to you — especially unsupervised or "I give you stewardship over this" — carry it through to completion. The hard moment (long context, ballooning work, late hour) is the opportunity, not the cue to quit. Don't beg off — you have durable externalized memory; compact and continue. A handoff weighs more than a normal task. Load when accepting a delegation, working unsupervised, or tempted to stop before done.

2026-07-120

believable-villains

cpuchip/working-with-ai

Design and write antagonists with motivation that makes sense from the inside. Politics, ideology, ambition, wound — never 'evil for evil's sake.' Load when designing villains, faction antagonists, or morally complicated NPCs.

2026-07-120

intent-check

cpuchip/working-with-ai

Quick intent articulation discipline before starting a new task. Names purpose, beneficiary, success criteria, and non-goals upfront so the agent has a target to optimize for when instructions run out. Klarna-failure prevention. Load before any non-trivial new task.

2026-07-120

playwright-cli

cpuchip/working-with-ai

Automate browser interactions, test web pages and work with Playwright tests.

2026-07-120

scene-framing

cpuchip/working-with-ai

Open a location or moment by painting it through the senses so it becomes immersive and real. Load when narrating a new scene, room, or environment.

2026-07-120

story-structure

cpuchip/working-with-ai

Shape a session or arc so each beat causes the next and the character returns changed. Load when planning a session arc, a campaign, or any multi-beat story.

2026-07-120

name	web-interface-guidelines
description	Audit UI code against Vercel's Web Interface Guidelines — ~100 terse, checkable rules covering accessibility, focus states, forms, animation, typography, content handling, touch targets, safe areas, dark mode, i18n, and hydration safety. Use when reviewing UI code for compliance ("review my UI", "check accessibility", "audit UX details"), as the rules-pass companion to ui-review (which covers visual craft) and ui-lint (the deterministic oracle).
metadata	{"upstream":"https://github.com/vercel-labs/web-interface-guidelines (MIT)","vendored":"2026-07-07T00:00:00.000Z"}

Web Interface Guidelines (Vercel) — local rules pack

# run from this skill's directory
curl -sL https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md \
  -o guidelines.md

Procedure

Read guidelines.md (the whole file — it is ~180 lines of terse rules grouped by section: Accessibility, Focus States, Forms, Animation, Typography, Content Handling, Images, Performance, Navigation & State, Touch & Interaction, Safe Areas & Layout, Dark Mode & Theming, Locale & i18n, Hydration Safety, Hover States, Content & Copy, Anti-patterns).
Read the target files (user-specified, or the components you just built/changed).
Check every rule against the code. These rules are checkable — each maps to a concrete pattern you can grep or read for (e.g. outline-none without a focus replacement, transition: all, missing autocomplete, straight quotes in copy, onPaste + preventDefault).
Report findings grouped by file in file:line format (clickable), terse, no explanations unless the fix is non-obvious. Note ✓ pass for sections with no findings so coverage is visible.

How this composes

Your visual-design system (whatever owns spacing, type scale, color, density, motion) covers feel; this skill owns interaction correctness details those knobs don't see.
ui-review (ships in this plugin) runs any deterministic lint first, then judgment passes — add this rules pack as an extra pass when the review is pre-ship or touches forms/inputs/motion.
These rules are the checkable-but-not-yet-scripted layer above whatever deterministic UI lint you maintain. Rules that fire repeatedly are candidates to graduate into that script.