web-design-guidelines
Web Interface Guidelines
Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
Rules
Accessibility
- Icon-only buttons need
aria-label - Form controls need
<label>oraria-label - Interactive elements need keyboard handlers (
onKeyDown/onKeyUp) <button>for actions,<a>/<Link>for navigation (not<div onClick>)- Images need
alt(oralt=""if decorative) - Decorative icons need
aria-hidden="true" - Async updates (toasts, validation) need
aria-live="polite" - Use semantic HTML (
<button>,<a>,<label>,<table>) before ARIA - Headings hierarchical
<h1>–<h6>; include skip link for main content scroll-margin-topon heading anchors
More from bradsjm/skills
development
Cross-language software development workflow emphasizing type safety, root-cause fixes, clear design, and rigorous validation (format/lint/typecheck/tests) for planning, implementing, debugging, and refactoring.
4microsoft-docs
Query official Microsoft documentation to understand concepts, find tutorials, and learn how services work. Use for Azure, .NET, Microsoft 365, Windows, Power Platform, and all Microsoft technologies. Get accurate, current information from learn.microsoft.com and other official Microsoft websites—architecture overviews, quickstarts, configuration guides, limits, and best practices.
3microsoft-code-reference
Look up Microsoft API references, find working code samples, and verify SDK code is correct. Use when working with Azure SDKs, .NET libraries, or Microsoft APIs—to find the right method, check parameters, get working examples, or troubleshoot errors. Catches hallucinated methods, wrong signatures, and deprecated patterns by querying official docs.
3mcp-server-development
Develop, review, and refactor Model Context Protocol (MCP) servers in Python or TypeScript/Node.js. Use when designing MCP tool/resource/prompt contracts, implementing an MCP server (stdio/SSE/Streamable HTTP), tightening JSON Schema inputs, improving error handling, adding security guardrails (secret scrubbing, permissions, destructive confirmations), and creating tests for MCP tools.
3vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
3