无障碍
无障碍测试与改进
css-coder
schalkneethling
CSS authoring guidance emphasizing web standards, accessibility, and performance. Use when writing, reviewing, or refactoring CSS. Provides patterns, snippets, and conventions that prioritize native CSS over frameworks, semantic structure, and maintainable code. Refer to references/patterns.md for specific patterns and snippets.
semantic-html
schalkneethling
Write well-considered semantic HTML that serves all users. Use when creating components, page structures, or reviewing markup. Emphasizes native HTML elements over ARIA. Treats proper document structure and accessibility as foundations rather than afterthoughts.
svg-graphics
zircote
Generate branded SVG graphics for blog content including social preview images, flowcharts, architecture diagrams, data visualizations, and styled tables. USE THIS SKILL when user says "create social preview", "generate diagram", "add flowchart", "create hero image", "visualize this", "svg graphic", "mermaid to svg", or when content would benefit from visual enhancement. Auto-triggers during blog content creation.
tailwind
display-design-studio
Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design tokens, or asks to build, configure, audit, or migrate a Tailwind CSS project (including v3 to v4 migrations).
aesthetic
zircote
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
Accessibility Color Checker
Eli-yu-first
"Validates color combinations against WCAG contrast ratios and suggests accessible alternatives"
seo-pro-max
aycanozarpaci
Production-grade SEO implementation skill. Analyzes the existing project first, asks the user the right questions, and then implements every chosen SEO surface (meta tags, Open Graph, Twitter Cards, canonical, robots, sitemap, schema.org/JSON-LD, favicons, llms.txt, admin-panel wiring, database schema) exactly as the user decided. The skill is an EXECUTOR, not a decision-maker.
universal-design-for-learning
reggiechan74
This skill should be used when the user asks to "design accessible curriculum", "apply UDL", "accommodate diverse learners", "create inclusive workshops", "ensure accessibility", or references Universal Design for Learning. Also applies when generating lesson plans, outlines, or activities to ensure multiple means of representation, engagement, and expression. Provides practical guidance for creating inclusive, accessible learning experiences in 1-2 day workshop contexts.
Accessibility Test Agent
Eli-yu-first
"Audit web applications for WCAG compliance with detailed remediation suggestions"
a11y-annotation-generator
Dexploarer
Adds accessibility annotations (ARIA labels, roles, alt text) to make web content accessible. Use when user asks to "add accessibility", "make accessible", "add aria labels", "wcag compliance", or "screen reader support".
Accessibility Audit Agent
Eli-yu-first
"Performs comprehensive WCAG 2.1 accessibility audits on web pages and generates fix recommendations"
wcag-compliance-checker
Dexploarer
Checks websites for WCAG 2.1 Level AA compliance, identifies accessibility violations, and provides remediation guidance. Use when user asks to "check accessibility", "wcag compliance", "a11y audit", "accessibility violations", or "screen reader testing".
ui-designer
marcioaltoe
Expert UI/UX designer for React applications with shadcn/ui and Tailwind CSS. ALWAYS use when creating UI components, implementing responsive layouts, or designing interfaces. Use when user needs component creation, design implementation, responsive layouts, accessibility improvements, dark mode support, or design system architecture. Examples - "create a custom card component", "build a responsive navigation", "setup shadcn/ui button", "implement dark mode", "make this accessible", "design a form layout".
perf-expert
hardikpandya
Comprehensive frontend performance auditing. Analyzes websites for Core Web Vitals, accessibility, and SEO issues, then delivers a clear actionable improvement plan.
vscode-extension-uiux
kcchien
Build secure, elegant, and accessible VS Code extensions with excellent UI/UX. Covers the complete Extension API including webviews, tree views, custom editors, sidebars, panels, and activity bar integration. Use this skill when: (1) Creating new VS Code extensions, (2) Building webview-based UIs, (3) Implementing tree views or custom editors, (4) Adding sidebar/panel contributions, (5) Ensuring extension security (CSP, message validation), (6) Theming and accessibility compliance, (7) Reviewing or improving existing extension UI/UX.
ux-antipatterns
cassiozen
Use when reviewing, building, or refactoring frontend UI — components, pages, forms, or interactive flows. Triggers on code review, pull requests, and new feature implementation involving user-facing interfaces.
accessibility-expert
slb2248
Build inclusive interfaces with WCAG compliance and best practices.
Orquestador Frontend
scaleto
Líder del Grupo Frontend. Planifica y delega tareas de UI/UX, React, Next.js, y desarrollo cliente a los especialistas del grupo.
context-and-impact
ShunsukeHayashi
The Universal Context-to-Execution Pipeline. 最強統合スキル: コンテキスト収集（5層）→ 品質保証 → GNI-First DAG計画 → マルチエージェント実行 → ARIA監査フィードバックループ の完全自動化。 Obsidian Semantic Search + GitNexus Code/Wikilink Graph + Agent Skill Bus + task-dag-planner + ARIA LDD/ADD + cycle-ops self-improvement を一つのパイプラインに統合。
solid-js-best-practices
richardcarls
"Solid.js best practices for AI-assisted code generation, code review, refactoring, and debugging reactivity issues. Use when working in any SolidJS project or codebase — writing components, auditing code, migrating from React, fixing signals and fine-grained reactivity bugs, or integrating web component libraries. 59 rules across 9 categories (reactivity, components, control flow, state management, refs/DOM, performance, accessibility, testing, web component integration) ranked by priority."
accessibility-testing
adaptationio
Accessibility testing with axe-core and Playwright. Use when checking WCAG compliance, finding a11y issues, ensuring keyboard navigation, or testing screen reader compatibility.
Blazor Framework - Quick Reference (SKILL.md)
FortiumPartners
Next: See REFERENCE.md for comprehensive guides, advanced patterns, and production deployment strategies.
creative-coder
mae616
Translate motion, interaction, and visual experience into implementable constraints while preserving accessibility and performance. Apply when working on animations, transitions, scroll effects, or micro-UX.
design-system-starter
ArieGoldkin
Use this skill when creating or evolving design systems for applications. Provides design token structures, component architecture patterns, documentation templates, and accessibility guidelines. Ensures consistent, scalable, and accessible UI design across products.