菜单
Ensure digital accessibility. Use when designing for accessibility, auditing WCAG compliance, or implementing a11y features. Covers WCAG 2.1 guidelines.
基于 SOC 职业分类
Biome 2.x linting and formatting patterns. Use when configuring code quality tools, setting up linting rules, formatting code, or integrating with CI/CD. Covers migration from ESLint/Prettier.
Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling.
Radix UI primitive patterns. Use when building accessible, unstyled UI components like dialogs, dropdowns, tooltips, tabs, and selects. Covers Tailwind styling, keyboard navigation, animations, and portal management.
React development patterns. Use when building React components, managing state, creating custom hooks, or optimizing React applications. Covers React 19 features, TypeScript integration, and composition patterns.
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications.
| name | accessibility |
| description | Ensure digital accessibility. Use when designing for accessibility, auditing WCAG compliance, or implementing a11y features. Covers WCAG 2.1 guidelines. |
Content must be presentable in ways users can perceive.
Interface must be operable by all users.
Content and operation must be understandable.
Content must work with current and future technologies.
<!-- Bad -->
<img src="chart.png">
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% in Q4 2024">
<!-- Bad -->
<input type="email" placeholder="Email">
<!-- Good -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>
<!-- Hidden visually but accessible -->
<span class="sr-only">Open menu</span>
<!-- Live regions for updates -->
<div aria-live="polite">Item added to cart</div>
<!-- Roles -->
<nav role="navigation">
<!-- States -->
<button aria-expanded="false">Menu</button>
<!-- Properties -->
<input aria-required="true">
<!-- Labels -->
<button aria-label="Close dialog">×</button>