メニュー
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".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Git 브랜치 전략·커밋 컨벤션·머지 정책 가이드라인. Conventional Commits, GitFlow vs Trunk-based vs Feature Branch 선택 기준, 브랜치 네이밍 규칙(Jira 이슈 키 연계), 리베이스 vs 머지 vs squash 전략, destructive 작업 안전 가이드(force-push/reset/branch 삭제). git 에이전트(git-workflow-expert)가 실행 시 참조하는 SSOT.
Atlassian Jira (Cloud) 워크플로우 가이드라인 — Epic/Task 생성, 상태 전이, 브랜치 생성 컨벤션 검증, 시안 사전 승인 정책. 모든 write/update/delete 작업은 시안 제시 후 사용자 명시 OK 대기. 프로젝트별 커스터마이징(PROJECT_KEY / ASSIGNEE / COMPONENT / customfield) 가이드 포함. Jira CLI/MCP/REST 4-tier fallback 설계.
Create, edit, read .docx Word documents with formatting (TOC, headings, page numbers, letterheads, tables). Also for tracked changes, find-and-replace, image insertion, or converting content to polished Word format. Triggers: 'Word doc', '.docx', 'report', 'memo', 'letter', 'template'. Do NOT use for PDFs, spreadsheets, or Google Docs.
C99 embedded firmware — HAL Ops Table pattern, FreeRTOS static tasks/queues/semaphores, ISR-safe ring buffer, no-malloc policy, Unity test with mock drivers, CMake HOST/STM32 dual-build. For writing drivers (GPIO/UART/SPI/I2C), HAL abstraction, RTOS tasks, or MCU firmware (STM32/ESP32).
PDF 파일 작업 — 생성/편집/병합/분할/회전/워터마크/암호화/폼 채우기/이미지 추출/OCR. .pdf 파일 언급 또는 PDF 산출물 요청 시 사용.
Create, modify, and manage Claude Code skills. Covers SKILL.md YAML frontmatter, skill-rules.json trigger patterns (keywords/intent/path/content), enforcement levels (block/suggest/warn), hook mechanisms (UserPromptSubmit/PreToolUse), session tracking, and 500-line rule with resources/ progressive disclosure.
| name | web-design-guidelines |
| description | 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". |
| metadata | {"author":"vercel","version":"1.0.0","argument-hint":"<file-or-pattern>"} |
| triggers | ["accessibility","a11y","UX review","UI review","design audit","WCAG","aria","web interface guidelines","semantic HTML","responsive design"] |
Review files for compliance with Web Interface Guidelines. Provides inline fallback patterns for offline use and fetches the latest rules from the source URL when available.
Ensure web interfaces meet accessibility, usability, and design quality standards. Covers semantic HTML, ARIA, responsive layout, color contrast, and keyboard navigation.
Use semantic elements instead of generic <div> for accessibility and SEO. Add ARIA attributes only when native semantics are insufficient.
BAD — div-soup with click handler:
<div class="nav">
<div class="nav-item" onclick="navigate('/home')">Home</div>
<div class="nav-item" onclick="navigate('/about')">About</div>
</div>
<div class="content">
<div class="title">Page Title</div>
<div class="text">Content here...</div>
</div>
GOOD — semantic structure with proper elements:
<nav aria-label="Main navigation">
<ul role="list">
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main>
<article>
<h1>Page Title</h1>
<p>Content here...</p>
</article>
</main>
Page Structure Template:
<body>
<header>
<nav aria-label="Primary">...</nav>
</header>
<main id="main-content">
<article>
<h1>...</h1>
<section aria-labelledby="section-heading">
<h2 id="section-heading">...</h2>
</section>
</article>
<aside aria-label="Related content">...</aside>
</main>
<footer>...</footer>
</body>
Use CSS Grid + clamp() for fluid layouts that adapt without excessive media queries.
BAD — fixed pixel widths:
.container {
width: 1200px;
margin: 0 auto;
}
.card {
width: 380px;
height: 250px;
font-size: 16px;
}
@media (max-width: 768px) {
.container { width: 100%; }
.card { width: 100%; }
}
@media (max-width: 480px) {
.card { height: 200px; font-size: 14px; }
}
GOOD — fluid layout with CSS Grid + clamp():
.container {
width: min(90%, 1200px);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 3rem);
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: clamp(1rem, 2vw, 2rem);
}
.card {
font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
}
Responsive Typography Scale:
:root {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
--text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}
Ensure WCAG AA compliance: 4.5:1 contrast ratio for normal text, 3:1 for large text. Never remove focus indicators.
BAD — invisible focus, low contrast:
*:focus {
outline: none; /* Removes all focus indicators */
}
.subtle-text {
color: #ccc; /* ~1.5:1 contrast on white — fails AA */
background: #fff;
}
a {
color: inherit;
text-decoration: none; /* Links indistinguishable from text */
}
GOOD — visible focus, proper contrast:
:focus-visible {
outline: 2px solid var(--color-focus, #2563eb);
outline-offset: 2px;
}
/* Skip-link for keyboard navigation */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 100;
padding: 0.5rem 1rem;
background: var(--color-bg);
color: var(--color-text);
}
.skip-link:focus {
top: 1rem;
}
.body-text {
color: #374151; /* ~7.5:1 contrast on white — passes AAA */
background: #fff;
}
.secondary-text {
color: #6b7280; /* ~4.6:1 contrast on white — passes AA */
}
a {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 2px;
}
a:hover {
text-decoration-thickness: 2px;
}
Contrast Quick Reference (WCAG AA):
| Element | Min Ratio | Example |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | #6b7280 on #ffffff = 4.6:1 |
| Large text (>= 18pt bold / 24pt) | 3:1 | #9ca3af on #ffffff = 3.0:1 |
| UI components & icons | 3:1 | Border, icon against background |
| Focus indicator | 3:1 | Against adjacent colors |
<div> and <span> everywhere instead of semantic elements. Screen readers cannot navigate the page structure.
<div class="button" onclick="submit()">Submit</div><button type="submit">Submit</button>Removing all focus indicators breaks keyboard navigation. 2.4 million US keyboard-only users affected.
*:focus { outline: none; } or button { outline: 0; }*:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }Users who set browser font size larger cannot override px values. Use rem for text sizing.
body { font-size: 16px; } → user settings ignoredbody { font-size: 1rem; } → respects user preferenceRelying solely on color to convey meaning (error states, status, required fields). ~8% of males have color vision deficiency.
<input style="border-color: red"> (error indicator)<input aria-invalid="true" style="border-color: red"> + error icon + text messageAutoplaying video/animation without respecting prefers-reduced-motion. Can trigger vestibular disorders.
<video autoplay loop> + CSS animations always running@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Fetch the latest complete 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 rules and output format instructions.
file:line formatalt text (decorative images: alt="")<label> elements<h1>, headings in logical orderlang attribute on <html> elementprefers-reduced-motion respected for animations