How do I install the Web Design Guidelines skill?

Run npx skillmds@latest add florianbruniaux/web-design-guidelines 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?

FlorianBruniaux (@florianbruniaux) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design Guidelines by florianbruniaux

Name: Web Design Guidelines
Author: FlorianBruniaux

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.

StarMapper Patterns (Priority)

Before applying external guidelines, check against StarMapper internal patterns:

Priority Rules (apply systematically)

Icon buttons : aria-label obligatoire sur tout bouton icon-only
- ✅ <button aria-label="Close panel"><XIcon aria-hidden="true" /></button>
- ❌ <button><XIcon /></button>
Icônes décoratives : toujours aria-hidden="true"
- ✅ <StarIcon aria-hidden="true" />
Focus visible : ne JAMAIS supprimer l'outline Tailwind focus-visible:ring-*
- ❌ focus:outline-none interdit sauf si remplacé par focus-visible ring
MapLibre popups : utiliser textContent pour les données user (location, login), jamais innerHTML avec des données non sanitisées
Tokens CSS : toujours utiliser les tokens @theme de globals.css (voir design-system.md)
- ❌ bg-[#0d1117], text-[#8b949e]
- ✅ bg-background, text-muted
Touch targets : minimum 44px sur mobile pour tout élément interactif

Review Process

Apply StarMapper priority rules first (above)
Then fetch and apply external guidelines (web-interface-guidelines)
Output findings with rule reference when applicable

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 + StarMapper patterns
Output findings using the format specified in the guidelines

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

---name: web-design-guidelinesdescription: 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 against best practices".---# 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.## StarMapper Patterns (Priority)**Before applying external guidelines**, check against StarMapper internal patterns:### Priority Rules (apply systematically)1. **Icon buttons** : `aria-label` obligatoire sur tout bouton icon-only - ✅ `<button aria-label="Close panel"><XIcon aria-hidden="true" /></button>` - ❌ `<button><XIcon /></button>`2. **Icônes décoratives** : toujours `aria-hidden="true"` - ✅ `<StarIcon aria-hidden="true" />`3. **Focus visible** : ne JAMAIS supprimer l'outline Tailwind `focus-visible:ring-*` - ❌ `focus:outline-none` interdit sauf si remplacé par focus-visible ring4. **MapLibre popups** : utiliser `textContent` pour les données user (location, login), jamais `innerHTML` avec des données non sanitisées5. **Tokens CSS** : toujours utiliser les tokens `@theme` de `globals.css` (voir `design-system.md`) - ❌ `bg-[#0d1117]`, `text-[#8b949e]` - ✅ `bg-background`, `text-muted`6. **Touch targets** : minimum 44px sur mobile pour tout élément interactif### Review Process1. Apply StarMapper priority rules first (above)2. Then fetch and apply external guidelines (web-interface-guidelines)3. Output findings with rule reference when applicable## 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 guidelines + StarMapper patterns4. Output findings using the format specified in the guidelinesIf no files specified, ask the user which files to review.

Frequently asked questions

Web Design Guidelines