Accessibility
Accessibility testing and improvements
wcag-audit-perceivable-text-size
by Jkense
Convert between px, pt, em, rem units with accessibility context
wcag-audit-understandable-forms
by Jkense
Route form input and data collection accessibility requirements
agent-browser
by watzon
MUST USE for any browser automation tasks. Headless browser via agent-browser CLI - web interactions, scraping, testing, screenshots, login flows, and form submission. Uses ref-based element selection (@e1, @e2) from accessibility snapshots.
wcag-audit-perceivable-layout-deep
by Jkense
Page structure and spatial organization accessibility design patterns
ultracite
by tylergibbs1
Enforce strict type safety, accessibility standards, and code quality for TypeScript/JavaScript projects using Biome's formatter and linter. Use when writing, reviewing, or fixing TS/JS/TSX/JSX code, checking for a11y issues, linting errors, type safety problems, or when the user mentions code quality, formatting, accessibility, or best practices.
vercel-design-guidelines
by tylergibbs1
Check web interfaces against Vercel's design guidelines. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "apply Vercel design guidelines".
wcag-audit-perceivable-color-blindness
by Jkense
Simulate how colors appear to users with different types of color blindness
frontend-design
by UholySmokes
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
ui-ux-guidelines
by tylergibbs1
Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms.
wcag-audit-perceivable-color-contrast
by Jkense
Calculate WCAG contrast ratios for text and non-text elements
wcag-audit-operable-target-size
by Jkense
Validate touch target sizes meet 44x44px minimum requirement
component-library
by pluginagentmarketplace
Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
a11y-best-practices
by moderndegree
Comprehensive accessibility patterns for building, testing, and fixing accessible interfaces. Use when building UI components, forms, pages, or auditing code for accessibility issues.
mariadb-best-practices
by jcastillotx
MariaDB database development standards. Triggers when working with MariaDB databases, Galera cluster, or MariaDB-specific features.
data-visualization
by moderndegree
Chart selection, data viz accessibility, and dashboard patterns. Use when building charts, graphs, or data dashboards.
ink
by modersetech
Use this skill whenever the user wants to build a CLI (command-line interface) tool or terminal UI using React/JSX. Triggers include: "build a CLI", "terminal UI", "interactive command-line app", "CLI tool with components", or any mention of the Ink library. Also trigger when the user wants to render dynamic styled output in the terminal, handle keyboard input in a CLI, or build a multi-component terminal layout. Use this skill even if the user just mentions "React for the terminal" or wants to add interactivity (spinners, prompts, menus, progress bars) to a Node.js CLI.
frontend-studio
by potatoman03
Build tasteful, modern, production-grade frontends with distinctive design. Use when building websites, landing pages, dashboards, SaaS UIs, e-commerce pages, portfolios, or any web interface. Extends Anthropic's frontend-design skill with a design decision framework, shadcn/ui defaults, rams.ai accessibility enforcement, and a technique library that produces clean, unique output — never AI slop. Activate for: "build me a website", "create a landing page", "design a dashboard", "make a UI for...", or any frontend request.
figma-d3-react-ts
by CoRLab-Tech
D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.
design-system-guardian
by agebold
Strictly enforces the local design system, accessibility (WCAG 2.2 AA), and world-class design craft for any web or responsive UI work. Use this skill whenever the user asks to build, edit, style, refactor, or review ANY frontend component, page, layout, form, or markup — even casual requests like "make this look nicer", "add a button", "build a card", "fix this CSS", or "create a settings page". Trigger on any mention of HTML, CSS, JSX/TSX, Tailwind, components, styling, layouts, responsive design, accessibility, or visual polish. Do NOT skip this skill just because the request seems small — every UI change must pass through the design system rules.
geist-nuxt
by abel-2333-org
geist-nuxt 是基于 Nuxt UI v4（Vue）的 Geist 风格 Source-first 设计系统。用于在本仓库或消费 Nuxt 项目中设计、实现、预览、安装、更新和评审页面、布局、表单、导航、反馈、覆盖层、主题、通用组件与 API Docs 组件；触发词包括 geist-nuxt、Geist、Nuxt UI、registry、copy-in、gallery、playground。视觉参考 Vercel Geist，组件方法论参考 Adobe Spectrum；不用 React。
wcag-audit
by waseemkhan00777
Automated WCAG 2.1 AA accessibility audit using Puppeteer and axe-core across all application routes.
agentic-ui-qa
by HomenShum
Universal QA + dogfooding protocol for agentic application UIs (worked profiles included for NodeBench AI, NodeRoom Live, NodeSlide/parity-studio; template for any app). Use when asked to QA, dogfood, verify, regression-test, or "revamp the agent UI" of ANY app — it drives the UI end to end as personas, verifies every claim with artifacts, scores the app against the Agentic UI Bar, and runs the bounded fix-revamp loop. Agent- and model-agnostic — a literal floor any small model can execute, an additive ceiling that scales with stronger models.
angular
by yldgio
Angular component architecture, RxJS patterns, change detection, and module organization
show-and-tell
by wan-huiyan
Turn dense technical findings, an analysis, a code/research session outcome, or a jargon-heavy document into a beautiful, genuinely PLAIN-ENGLISH self-contained HTML explainer that a non-technical or busy stakeholder can actually understand — built on a single everyday metaphor carried through the whole piece, with the REAL numbers shown honestly beside each plain claim, an "engineer's note" layer so technical readers aren't shortchanged, an honesty/limits box, and an arcade/pixel aesthetic that opens straight from file:// (no build, no server). Use this WHENEVER the user wants to explain technical work in plain English, make a pretty/shareable report, one-pager, or recap, summarize an investigation/session "so my boss/team/client can understand it," translate jargon results for a lay audience, or asks for an explainer/writeup/"make this readable" of findings — even if they don't say "HTML." Also use to turn an existing analysis doc or markdown report into a friendly visual explainer. Prefer this over a plain markdown summary when the audience is non-expert or the user says "pretty," "plain English," "for my boss," "easy to understand," or "report."