无障碍
无障碍测试与改进
typo3-records-list-types
dirnbauer
Configure and extend the Records List Types extension for TYPO3 v14. Grid, Compact, Teaser, and custom view modes for the backend Records module with thumbnails, drag-and-drop, dark mode, workspace indicators, and zero-PHP extensibility via TSconfig + Fluid templates. Use when working with backend record listing, creating custom view types, or configuring per-table display fields.
d3js-data-visualization
besoeasy
Create interactive, custom data visualizations using d3.js — including charts, graphs, network diagrams, and geographic maps. Use when you need fine-grained control over visual elements, transitions, or interactions beyond what standard charting libraries offer, in any JavaScript environment (vanilla JS, React, Vue, Svelte, etc.).
color-system
sanky369
Master color design with color theory, accessibility, theming, and dark mode. Create harmonious color systems that work across contexts, support accessibility standards, and enable flexible theming. Includes color psychology, contrast ratios, and color-blind friendly palettes.
layout-system
sanky369
Master responsive layout design using modern CSS (Flexbox, Grid), mobile-first approach, and breakpoint strategies. Create layouts that adapt beautifully across all devices while maintaining accessibility and performance. Includes container queries, aspect ratios, and advanced responsive patterns.
jaws-accessibility
Ambitos-1995
Accessibility engineering skill for web products with JAWS and NVDA testing plus Spain/EU compliance guidance. Use when the task involves WCAG 2.2 implementation, ARIA behavior, keyboard/focus issues, screen-reader regressions, accessibility audits, remediation plans, or legal scope checks for Ley 11/2023, RD 1112/2018, EAA, and EN 301 549.
interaction-physics
sanky369
Master microinteractions, animations, transitions, and feedback systems. Create intentional, delightful interactions that guide users and provide clear feedback. Includes animation principles, timing, easing, state transitions, and best practices for performance and accessibility.
impeccable-bolder
SebastiaanWouters
"Skills-only equivalent of impeccable.style /bolder. Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use for frontend and UI design tasks."
accessibility-expert
slb2248
Build inclusive interfaces with WCAG compliance and best practices.
typography-system
sanky369
Master typography design with font selection, type scales, hierarchy, readability, and accessibility. Create consistent, beautiful typography that works across all devices and contexts. Includes modular scales, fluid typography, variable fonts, and accessibility best practices.
accessibility-excellence
sanky369
Master web accessibility (A11y) to ensure your product is usable by everyone, including people with disabilities. Covers WCAG standards, semantic HTML, keyboard navigation, screen readers, color contrast, and inclusive design practices. Accessibility is not a feature—it's a fundamental requirement.
impeccable-teach-impeccable
SebastiaanWouters
"Skills-only equivalent of impeccable.style /teach-impeccable. One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. Use for frontend and UI design tasks."
nordic-epub-evaluation
GauteR
Evaluate unzipped EPUB files against the Nordic Accessible EPUB Guidelines (2015-1, 2020-1, or 2025-1), WCAG 2.2 and Nordic MathML Guidelines; includes validation towards Daisy Pipeline (nordic-epub3-validate). Use when reviewing EPUB accessibility, checking EPUB compliance, or working with unzipped EPUB directories.
ux-designer
k1lgor
Use this for designing user interfaces, defining user flows, creating design systems, and ensuring accessibility and usability.
frontend-architect
k1lgor
Use this for UI implementation, component design, state management logic, responsive layouts, and accessibility improvements. (Works for React, Vue, Svelte, etc.)
frontend-developer
BenjaminG
Specialist for modern React applications, TypeScript frontend code, UI development, TanStack Query, component creation, CSS styling, responsive design, accessibility, form validation, state management, routing, and performance optimization. Use for ANY work involving .tsx/.jsx files, React components, frontend bugs, or client-side development tasks.
frontend-ui-engineering
jankneumann
Builds production-quality, accessible, performant user interfaces. Applies to React/TypeScript frontends — verify stack before invoking; teams using other stacks should treat the principles (state-management ladder, AI-aesthetic avoidance, WCAG 2.1 AA) as transferable but the code patterns as React-specific. Use when building or modifying user-facing components, managing UI state, implementing layouts, or when output needs to look hand-built rather than AI-generated.
shipping-and-launch
TinyAssets
Sets up CI quality gates and ships to production safely. Use when configuring build/deploy pipelines or automated checks, or when preparing a launch — pre-launch checklist, feature flags, staged rollout, monitoring, and rollback.
aesthetic
mamba-mental
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.
consumer-app-outcomes
krishanraja
Diagnose consumer-app lifecycle problems and translate them into measurable, ethical product interventions. Use for onboarding, activation, retention, monetisation, engagement, habit formation, growth and sharing, conversion, trust, experience refinement, intent shaping, or premium positioning. Do not use for visual taste, paywall or landing copy and angles, generic accessibility lookup, implementation ownership, or UX testing; route those to their named owners.
ux-foundations
krishanraja
"Current-source lookup for generic UX, accessibility, interaction-pattern, usability-heuristic, and experiment-design fundamentals. Use when asked what WCAG or platform guidance actually requires, which heuristic applies, whether a UI rule is normative or advisory, how web/iOS/Android guidance differs, or what a sound pre-launch A/B test contract contains. Verify current primary sources, preserve units and exceptions, and label the authority of every rule. Do not use to design Krish's artifacts (krish-design), exercise a live product (ux-testing-agent), implement or deploy a fix (krish-build), certify legal compliance, or operate/analyse an experiment. Last reviewed 2026-08-05."
ui-design-principles
ssiumha
UI 디자인 기본 원칙 가이드. Use when creating UI components, writing frontend code, reviewing designs, or avoiding AI-looking interfaces.
kanpeki
fellipeutaka
"Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Covers installation, component patterns, forms, theming, and dark mode with React Aria Components + Tailwind CSS 4.1 + CVA."
pixel-pusher
slamb2k
Comprehensive UI/UX design system for creating professional web interfaces through structured multi-stage process. Use when users request website designs, landing pages, web apps, UI mockups, design systems, or interface prototypes. Guides through requirements gathering, design system creation from references/screenshots, HTML mockup generation, iterative refinement, and final design delivery. Ideal for "design me a website", "create a landing page", "build a UI for X", or providing design inspiration screenshots/URLs.
play-tight
slamb2k
Context-efficient browser automation using Playwright scripts and subagent isolation. Use when you need to interact with web pages, extract data from websites, verify page elements, or automate browser tasks while avoiding context window pollution from verbose HTML/accessibility trees. Provides both direct script execution and a specialized subagent pattern for complex investigations that generate large intermediate responses.