Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

web-interface-guidelines

Étoiles0

Forks0

Mis à jour12 juillet 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

cpuchip

cpuchip/working-with-ai

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·SOC 15-1255

Explorateur de fichiers

4 fichiers

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.

Plus depuis ce dépôt

même dépôt

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.