How do I install the Web Design Guidelines skill?

Run npx skillmds@latest add tomevault-io/web-design-guidelines-25 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Design Guidelines safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Design Guidelines?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Design Guidelines free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Design Guidelines?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design Guidelines by tomevault-io

Name: Web Design Guidelines
Author: tomevault-io

Web Design Guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to \\\"review my UI\\\", \\\"check accessibility\\\", \\\"audit design\\\", \\\"review UX\\\", or \\\"check my site aga... Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

AGI Framework Integration

Adapted for @techwavedev/agi-agent-kit Original source: antigravity-awesome-skills

Memory-First Protocol

Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.

# Check for prior frontend/design context before starting
python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Web Design Guidelines"

Storing Results

After completing work, store frontend/design decisions for future sessions:

python3 execution/memory_manager.py store \
  --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \
  --type decision --project <project> \
  --tags web-design-guidelines frontend

Multi-Agent Collaboration

Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).

python3 execution/cross_agent_context.py store \
  --agent "<your-agent>" \
  --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \
  --project <project>

Design Memory Persistence

Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: web-design-guidelines-25description: Review UI code for Web Interface Guidelines compliance. Use when asked to \\\"review my UI\\\", \\\"check accessibility\\\", \\\"audit design\\\", \\\"review UX\\\", or \\\"check my site aga... Use when this capability is needed.---# Web Interface GuidelinesReview files for compliance with Web Interface Guidelines.## How It Works1. Fetch the latest guidelines from the source URL below2. Read the specified files (or prompt user for files/pattern)3. Check against all rules in the fetched guidelines4. Output findings in the terse `file:line` format## Guidelines SourceFetch fresh guidelines before each review:```https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md```Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.## UsageWhen a user provides a file or pattern argument:1. Fetch guidelines from the source URL above2. Read the specified files3. Apply all rules from the fetched guidelines4. Output findings using the format specified in the guidelinesIf no files specified, ask the user which files to review.## When to UseThis skill is applicable to execute the workflow or actions described in the overview.---## AGI Framework Integration> **Adapted for [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**> Original source: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)### Memory-First ProtocolRetrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.```bash# Check for prior frontend/design context before startingpython3 execution/memory_manager.py auto --query "design system decisions and component patterns for Web Design Guidelines"```### Storing ResultsAfter completing work, store frontend/design decisions for future sessions:```bashpython3 execution/memory_manager.py store \ --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \ --type decision --project <project> \ --tags web-design-guidelines frontend```### Multi-Agent CollaborationShare design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).```bashpython3 execution/cross_agent_context.py store \ --agent "<your-agent>" \ --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \ --project <project>```### Design Memory PersistenceStore design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/techwavedev) — claim your Tome and manage your conversions.

Frequently asked questions