无障碍
无障碍测试与改进
theme-evaluation
etewiah
Evaluate themes for accessibility, contrast, and design issues. Use when auditing themes for WCAG compliance, checking color contrast ratios, or identifying visual/UX problems.
design-systems
Mindrally
Comprehensive design system guidelines for building consistent, accessible, and scalable digital products
accessibility-a11y
Mindrally
Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.
color-palette
jezweb
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output. Includes WCAG contrast checking. Use when setting up design systems, creating Tailwind themes, building brand colours from a hex value, or checking colour accessibility.
web-design-methodology
jezweb
"Universal web design implementation methodology — BEM, responsive, accessibility, CSS architecture, spacing systems, dark mode. The HOW of building production-grade HTML/CSS."
color-palette
jezweb
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output. Includes WCAG contrast checking. Use when setting up design systems, creating Tailwind themes, building brand colours from a hex value, or checking colour accessibility.
oklch-skill
jakubkrehel
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
ring:dev-cycle-frontend
LerianStudio
Frontend development cycle orchestrator with 9 gates. Loads tasks from PM team output or backend handoff and executes through implementation → devops → accessibility → unit testing → visual testing → E2E testing → performance testing → review → validation.
ring:dev-frontend-accessibility
LerianStudio
Gate 2 of frontend development cycle - ensures all components pass axe-core automated accessibility scans with zero WCAG 2.1 AA violations.
accessibility-wcag
rohitg00
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
design-system-starter
softaworks
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
accessibility
yonatangross
Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, and React Aria component patterns. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, or accessible component libraries.
ui-web
alinaqi
Web UI - glassmorphism, Tailwind, dark mode, accessibility
fixing-accessibility
agentset-ai
Fix accessibility issues.
new-agent
wcygan
Create custom Claude Code subagents. Interactive wizard that gathers requirements, generates the agent .md file with proper frontmatter and system prompt. Use when creating a new agent, adding a subagent, or making a custom agent available globally. Keywords: agent, subagent, create agent, new agent, custom agent
hig-components-content
raintree-technology
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about "charts component", "collection view", "image view", "web view", "color well", "image well", "activity view", "lockup", "data visualization", "content display", displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says "how should I display charts", "what's the best way to show images", "should I use a web view", "how do I build a grid of items", "what component shows media", or "how do I present a share sheet". Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
Frontend Development Expert
anton-abyzov
Frontend developer for React, Vue, Angular, TypeScript. Use for components, hooks, state management, responsive UIs. Covers React 18/19, custom hooks, forms, a11y.
Design System Architect
anton-abyzov
Scalable design systems with Atomic Design, design tokens, theming. Use for component libraries, dark mode, typography, color systems, Storybook, multi-brand, a11y.
front-end-checklist
fabricioctelles
This skill should be used when a developer or team needs to review, validate, or audit front-end code before launching a website or HTML page to production. Triggers on requests such as "run the front-end checklist", "validate my front-end", "check my site before launch", or when the user asks for a structured review of HTML, CSS, JavaScript, accessibility, performance, security, or design quality.
Ultimate Design System Master
fabricioctelles
A collection of skills for AI agents (Kiro, Cursor, Windsurf, Claude Code, and others). Each skill is a reusable module that teaches the agent to perform complex tasks with context, structure, and best practices.
Echo
simota
ãã«ã½ãï¼åå¿è ãã·ãã¢ãã¢ãã¤ã«ã¦ã¼ã¶ã¼çï¼ã«ãªãããUIããã¼ãæ¤è¨¼ããæ··ä¹±ãã¤ã³ããå ±åãã¦ã¼ã¶ã¼ä½é¨ã®åé¡ç¹çºè¦ã使ããããæ¤è¨¼ãå¿ è¦ãªæã«ä½¿ç¨ã
accessibility-implementation
laurigates
WCAG 2.1/2.2 compliance implementation, ARIA patterns, keyboard navigation, focus management, and accessibility testing. Use when implementing accessible components, fixing accessibility issues, or when the user mentions WCAG, ARIA, screen readers, or keyboard navigation.
a11y-playwright-testing
fugazi
Accessibility testing for web applications using Playwright (@playwright/test) with TypeScript and axe-core. Use when asked to write, run, or debug automated accessibility checks, keyboard navigation tests, focus management, ARIA/semantic validations, screen reader compatibility, or WCAG 2.1 Level AA compliance testing. Covers axe-core integration, POUR principles (perceivable, operable, understandable, robust), color contrast, form labels, landmarks, and accessible names.
webapp-playwright-testing
fugazi
Browser automation toolkit using Playwright MCP for testing web applications. Use when asked to navigate pages, click elements, fill forms, take screenshots, verify UI components, check console logs, debug frontend issues, or validate responsive design. Supports live browser interaction and accessibility snapshots.