web-design-guidelines

web-design-guidelines18 wordsCuratedinstall-now-after-trust-gate

Curated third-party skill source. Run external-skill-auditor before repo promotion.

Quick Start

Install:

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --skill vercel-composition-patterns --skill vercel-react-view-transitions --skill web-design-guidelines --skill vercel-react-native-skills -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Use: /web-design-guidelines

Works with Claude Code, Gemini CLI, OpenCode, and other agentskills.io-compatible agents.

Curated external (hand-maintained)

Composed compose-external-wave-14 using authoring SSOT (docs/src/authoring/skills/web-design-guidelines.mdx) + research. Do not run wagents docs generate on this file (HAND-MAINTAINED sentinel). Run external-skill-auditor before using in production or promoting.

What It Does

Audit UI for 100+ web interface best practices (a11y, perf, UX): aria/semantic/keyboard, focus states, forms, animation (reduced-motion), typography, images/lazy/alt, virtualization, nav/state URL, dark mode, touch, i18n Intl. From vercel-labs/agent-skills.

Harness Coverage

Targets verified harnesses: antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode.

Portable multi-harness install command:

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --skill vercel-composition-patterns --skill vercel-react-view-transitions --skill web-design-guidelines --skill vercel-react-native-skills -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Trust / Audit

Trust tier: Curated (curated-trust-gated)

Curated status: install-now-after-trust-gate

Risk notes: Curated third-party skill source. Run external-skill-auditor before repo promotion.

Entry maintained via authoring + research for compose-external-wave-14; provenance and audit notes are authoritative there (research context is advisory).

Install Prerequisites

npx skills add vercel-labs/agent-skills --skill web-design-guidelines ... status=install-now-after-trust-gate.

Public Metadata

Field	Value
Source Type	curated-external
Display Source	vercel-labs/agent-skills
Source Kind	github
Installability	portable command
Review State	curated
Trust Tier	curated-trust-gated
Target Agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

General

Field	Value
Name	web-design-guidelines

Curated catalog entry

docs/src/authoring/skills/web-design-guidelines.mdx (full SSOT excerpt)

---
name: "web-design-guidelines"
description: "Curated third-party skill source. Run external-skill-auditor before repo promotion."
title: "Web Design Guidelines"
source_kind: "curated-external"
source: "vercel-labs/agent-skills"
install_source: "vercel-labs/agent-skills"
status: "install-now-after-trust-gate"
trust_tier: "curated-trust-gated"
provenance_status: "verified-install-command"
install_command: "npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --skill vercel-composition-patterns --skill vercel-react-view-transitions --skill web-design-guidelines --skill vercel-react-native-skills -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode"
target_agents: [antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode]
source_url: "https://github.com/vercel-labs/agent-skills"
notes: "Curated third-party skill source. Run external-skill-auditor before repo promotion."
risk_notes: "Curated third-party skill source. Run external-skill-auditor before repo promotion."
promotion_policy: "Install only after trust gate; audit again before repo promotion."
provenance_evidence: "Curated `npx skills add` command with named `--skill` selectors under `install-now-after-trust-gate` in config/external-skills.md."
---

{/* GENERATED-AUTHORING: source=config/external-skills.md; entry=web-design-guidelines; re-run migration to refresh */}

Curated third-party skill source. Run external-skill-auditor before repo promotion.

Install / provenance (from authoring frontmatter + research):

Field	Value
install_command	npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices --skill vercel-composition-patterns --skill vercel-react-view-transitions --skill web-design-guidelines --skill vercel-react-native-skills -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode
source	vercel-labs/agent-skills
source_url	https://github.com/vercel-labs/agent-skills
trust_tier	curated-trust-gated
curated_status	install-now-after-trust-gate
target_agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

Resources

Skill Catalog Browse custom and external skills.

CLI Reference Install and manage skills.