ワンクリックでManusで任意のスキルを実行

web-interface-guidelines

スター0

フォーク0

更新日2026年7月12日 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).

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

cpuchip

cpuchip/working-with-ai

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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.

このリポジトリの他の Skills

同じリポジトリ

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.