Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

web-interface-guidelines

Estrellas0

Forks0

Actualizado12 de julio de 2026 a las 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).

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

cpuchip

cpuchip/working-with-ai

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·SOC 15-1255

Explorador de archivos

4 archivos

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.

Más de este repositorio

mismo repositorio

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.