1,404 free skills
Accessibility skills
Skills for accessibility — WCAG compliance audits, screen-reader testing, keyboard navigation, and inclusive design patterns.
Sourced from real, public repositories — synced daily, never invented.
1,404 free skills
Skills for accessibility — WCAG compliance audits, screen-reader testing, keyboard navigation, and inclusive design patterns.
Sourced from real, public repositories — synced daily, never invented.
15 tools across six categories
13 of them never send your data anywhere
Free · No signup · No trial clock
SEE THE DIRECTORY
audit
accesslint/skills
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to HTML-string audits.
storybook-story-writing
thebushidocollective/han
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
webflow-mcp:accessibility-audit
webflow/webflow-skills
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely headlessly against a page ID — no Designer connection required. Excludes image alt text (covered by asset-audit skill).
muapi-logo-branding
samuraigpt/generative-media-skills
Design a professional logo with full branding package — primary logo, variations (dark/light/icon-only), color palette, and real-world application mockups.
animation-systems
mengto/skills
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
color-accessibility
aj-geddes/useful-ai-prompts
>
syncfusion-react-scheduler
syncfusion/react-ui-components-skills
Implement Syncfusion React Scheduler component for calendar, event scheduling, and appointment management. Use this when building scheduling systems, calendar applications, booking systems, or time management interfaces. Covers all scheduler views (Day, Week, Month, Timeline, Agenda, Year), data binding, resource scheduling, recurring events, CRUD operations, drag-and-drop scheduling, customization, accessibility, and advanced features.
email-creative-builder
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "write the email", "draft subject lines", or "build email creative"; produces the pre-click unit — subject-line variants + preheader, body copy, one clear CTA, and a plain-text alt — message-matched to the destination page and claims-ledger-aware. Not for pre-scoring or ranking subject-line variants (spam/truncation/render pre-score) — use subject-line-lab; not for scoring the email or computing EQS — use email-quality-auditor; not for the multi-step flow — use email-sequence-designer; not for the A/B test plan — use send-experiment-designer. 邮件文案/主题行/邮件创意
app-ui-design
majiayu000/spellbook
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.
email-render-builder
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "build the email HTML", "make this email responsive", "fix dark-mode rendering", or "QA the email across clients"; produces the coded HTML build — a responsive table layout, dark-mode + accessibility pass, a client-render matrix, image-block fallbacks, and a plain-text parity check. Not for writing the copy — use email-creative-builder; not for scoring the email or computing EQS — use email-quality-auditor. 邮件HTML/响应式邮件/暗色模式渲染
social-creative-builder
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "turn this idea into posts for every platform", "write the X thread / LinkedIn post / 小红书 note", or "spec the carousel slides"; turns one idea into N platform-native ready-to-paste packages — post/thread, caption, Threads text, 小红书 note, link post with first-comment placement — each adapted per the dated platform norm card (never verbatim cross-posting), every product claim held to approved claims-ledger wording or flagged [needs source], every variant tagged {formula | hook family | CTA type | signal optimized}, plus a carousel slide-spec mode (intro/content/outro slide roles, per-element char budgets, 小红书 3:4 / IG 4:5 / LinkedIn document PDF artboards, text-safe-zone + alt-text checklist). Not for creator deliverable briefs — use brief-generator; not for repurposing existing assets with paid boost — use content-amplifier. 社媒文案/一稿多发改写/小红书笔记/轮播图脚本
dynamic-content-personalizer
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "personalize the email", "add merge tags / dynamic content", "set up conditional blocks per segment", or "make first-name and product-recommendation fields fall back safely"; produces a merge-tag map with per-tag fallbacks, conditional-block rules with per-segment variations, a fallback-safety audit, and a PII guard on what may render, informing the SEND E (Engagement/personalization) dimension. Not for building the segments — use list-segment-builder; not for writing the base copy — use email-creative-builder; not for scoring EQS or running vetoes — use email-quality-auditor. 邮件个性化/合并标签/条件内容块/兜底默认值
subject-line-lab
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "generate subject line variants", "pre-score my subject lines", or "will this subject get truncated / trigger spam filters"; produces a labeled subject + preheader variant set and a per-variant heuristic pre-score card — spam-trigger flags, length/truncation across desktop + mobile, emoji-count, and the inbox preview render (from-name + subject + preheader) — before any test is run. Not for the body copy or CTA — use email-creative-builder; not for the A/B test design or significance read — use send-experiment-designer; not for the profile-weighted EQS or the S1/S2/N1/D1 vetoes — use email-quality-auditor. 邮件主题行生成/主题行预打分/截断与垃圾词检查
advocacy-program-designer
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "design an employee advocacy program", "set up founder-led sharing", or "build a share kit for the team"; produces an advocacy program blueprint in two modes — participation-driven opt-in (default) or top-down assigned with its coercion and authenticity risks flagged — with a voluntary opt-in roster spec submitted as channel-registry proposal events, share kits with mandatory per-person variation, staggered human posting windows plus anti-pod guardrails (no coordinated identical reshares, no engagement rings), per-person material-connection disclosure lines per FTC and 《互联网广告管理办法》, and a Slack/Teams distribution spec. Not for paid creator campaigns — use campaign-planner. 员工倡导/创始人IP分享/内部分享计划/披露合规
social-pulse-monitor
aaron-he-zhu/aaron-marketing-skills
Use when the user asks to "monitor brand mentions", "set up social listening", "did anything spike about us this week", or "watch these accounts for buying triggers"; runs always-on keyless listening — a versioned listening-query architecture (brand variants incl. misspellings and 中文 names, exclusion terms, per-source syntax for HN Algolia / Bluesky / GDELT / Tavily), a mention sweep with six-class triage (crisis / bug / lead / praise / question / spam) each routed with an SLA, a 7-day rolling baseline with spike flags (the crisis trigger input), a B2B trigger watchlist (funding / hiring / launch signals), and an explicit coverage disclosure where X/IG/TikTok/LinkedIn/小红书 numbers are proxy-labeled, never Measured. Not for launch-window telemetry (T-0→T+30 rank and review polling) — use launch-monitor. 舆情监听/品牌提及监测/基线突刺/触发信号
dart-write-documentation
dart-lang/skills
Rules and formatting guidelines for writing Dart /// API documentation and doc comments. Use when documenting Dart code, writing doc comments for any Dart declaration (libraries, classes, methods, variables, etc.), or when instructed to follow the Effective Dart documentation guidelines.
shiny-bslib-theming
posit-dev/skills
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bs_theme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection, or making R plots match the app theme with thematic.
semantic-html-and-seo
dembrandt/dembrandt-skills
Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optimising for search and accessibility.
frontend-accessibility-best-practices
sergiodxa/agent-skills
Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.
syncfusion-react-charts
syncfusion/react-ui-components-skills
Implement Syncfusion React Charts component for data visualization. Use this when creating charts, configuring axes and series, or customizing visualization styles. This skill covers chart types, data binding, user interactions, financial indicators, accessibility features, and professional data visualization in React applications.
frontend-accessibility
aj-geddes/useful-ai-prompts
>
design-first-ui-prompting
mengto/skills
Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.
subtitles
zeropointrepo/youtube-skills
Use when subtitles or the spoken text of a YouTube video is needed: pasted video links or IDs, requests to translate a video, read along, follow foreign-language content, or extract what was said. Also use for language learning or accessibility. Fetches timestamped subtitles from any YouTube video. Not for uploading subtitles or account management.
asset-allocation
joellewis/finance_skills
Determine how to distribute capital across asset classes using strategic and tactical allocation frameworks. Use when the user asks about portfolio allocation, mean-variance optimization, Black-Litterman, risk parity, glide paths, or target-date strategies. Also trigger when users mention 'how much in stocks vs bonds', '60/40 portfolio', 'policy portfolio', 'core-satellite', 'liability-driven investing', 'asset-liability matching', or ask how to split their money across investments.
algorithmic-color-palette
dembrandt/dembrandt-skills
Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the brand hue for borders and backgrounds, and semantic colours that feel coherent with the brand rather than generic. Use when building a colour system from scratch or expanding a limited brand palette for UI use.
syncfusion-react-file-manager
syncfusion/react-ui-components-skills
Implement Syncfusion React File Manager component for file system navigation and management. Use when users need file browsing, upload/download, file operations (create, delete, rename), multiple views, drag-drop, customization, or accessibility features. Supports local and remote file systems with comprehensive customization options.
syncfusion-react-themes
syncfusion/react-ui-components-skills
Use this skill when users need to apply themes, customize appearance, switch dark mode, use CSS variables, configure icons, or modify visual styling for Syncfusion React components. Covers icon library, size modes, and Theme Studio integration.
web-design-guidelines
asyrafhussin/agent-skills
UI/UX best practices and accessibility audit. Use when reviewing UI code, checking accessibility, running accessibility audits, auditing forms, or ensuring web interface best practices. Triggers on "audit accessibility", "check WCAG", "review UI", "check accessibility", "audit design", "review UX", or "check best practices".
syncfusion-react-image-editor
syncfusion/react-ui-components-skills
Master Syncfusion React Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or implement image editing features. Supports multiple formats (PNG, JPEG, SVG, WEBP, BMP), annotations (text, shapes, freehand, images), effects (filters, finetune), and accessibility features.
accessibility-testing
aj-geddes/useful-ai-prompts
>
foundation-stakeholder-update
product-on-purpose/pm-skills
Produces async communication to stakeholders, primarily non-attendees and secondarily some attendees who want a reference. Translates meeting outcomes into what-it-means language for readers, with channel variants (slack, teams, email, notion, exec-memo) and audience variants (engineering, design, leadership, customer-facing, mixed). Surfaces a primary CTA up front, flags technical-to-business translations for user verification, and detects thread continuation from prior updates.
syncfusion-react-accumulation-chart
syncfusion/react-ui-components-skills
Implement Syncfusion React Accumulation Charts including Pie, Doughnut, Funnel, and Pyramid chart types. Use this skill when users need circular data visualization, percentage-based charts, or proportional data displays. Covers data labels, legends, tooltips, grouping, smart labels, drill-down charts, explode effects, theming, accessibility, export/print capabilities, and dynamic data updates.
obsidian-clipper-template-creator
sickn33/agentic-awesome-skills
Guide for creating templates for the Obsidian Web Clipper. Use when you want to create a new clipping template, understand available variables, or format clipped content.
syncfusion-react-blockeditor
syncfusion/react-ui-components-skills
Implement the Syncfusion React BlockEditor component for block-based content editing. Use this skill for block-based rich content editing, document creation, CMS interfaces, markdown alternatives, editor setup, block configuration, toolbar or menu customization, drag-and-drop behavior, formatting options, APIs, accessibility, real-time collaborative editing with Yjs integration, user presence and remote cursors, document version history and snapshot management in React.
syncfusion-react-dropdown-tree
syncfusion/react-ui-components-skills
Implement Syncfusion React Dropdown Tree component for hierarchical data selection with dropdown interaction. Use this when working with multi-select checkboxes, lazy loading, remote OData integration, custom templates, keyboard navigation, RTL support, or localized interfaces. Supports auto-check hierarchy, filtering, tree settings, comprehensive event handling, and full accessibility.
syncfusion-react-ribbon
syncfusion/react-ui-components-skills
Implement the Syncfusion React Ribbon component. Use this skill for creating Ribbon UIs with tabs, groups, items, Classic or Simplified layouts, file menu and backstage view, contextual tabs, galleries, KeyTips, accessibility, theming, responsive behavior, customization, and troubleshooting in React.
syncfusion-react-treeview
syncfusion/react-ui-components-skills
Implement Syncfusion React TreeView component for hierarchical data display with node selection, drag-drop reordering, inline editing, and custom templating. Use this when building organizational charts, file systems, navigation trees, or any multi-level hierarchical interface. Covers selection modes, checkboxes, filtering, sorting, keyboard navigation, accessibility, and performance optimization with stateless templates.
web-animation-design
connorads/dotfiles
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
build-awwwards-quality-sites
mengto/skills
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.
ios-ux-design
mosif16/codex-skills
Activate this skill when analyzing iOS app UI/UX, evaluating iOS design patterns, proposing iOS interface improvements, or creating iOS implementation specifications. Provides deep expertise in Apple Human Interface Guidelines, SwiftUI patterns, native iOS components, accessibility standards, and iOS-specific interaction paradigms.
frontend-ui-ux-design
dauquangthanh/hanoi-rainbow
Creates comprehensive frontend UI/UX designs including user interfaces, design systems, component libraries, responsive layouts, and accessibility implementations. Produces wireframes, mockups, design specifications, and implementation guidelines. Use when designing user interfaces, creating design systems, building component libraries, implementing responsive designs, ensuring accessibility compliance, or when users mention UI design, UX design, interface design, design systems, user experience, or frontend design patterns.
accessible-animation
iart-ai/web-animation-skills
This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.
accessibility
jezweb/claude-skills
|
syncfusion-react-inputs
syncfusion/react-ui-components-skills
Comprehensive guide for implementing Syncfusion React input components including Uploader, NumericTextBox, TextBox, TextArea, CheckBox, OTP Input, Signature, RangeSlider, ColorPicker, MaskedTextBox, and Rating. Use this when building file upload UIs with async/chunk uploads, drag-and-drop functionality, numeric inputs with validation and formatting, text inputs with floating labels, custom adornments, form integration, accessibility compliance, and styling in React applications.
wcag-accessibility
dembrandt/dembrandt-skills
UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification. Disabled UI elements are explicitly exempt from colour contrast requirements. Use when designing, building, or reviewing any user-facing interface for accessibility compliance.
shadcn-component-review
mattbx/shadcn-skills
Review custom components and layouts against shadcn design patterns, visual style conventions (Vega, Nova, Maia, Lyra, Mira), composition rules, design token usage, and Radix/Base UI composition patterns. Use PROACTIVELY after writing or modifying any custom UI component, page layout, or variant of a shadcn component. Use when the user says "review this component", "check my spacing", "does this follow shadcn patterns", "audit this layout", "is this shadcn-idiomatic", or shares a component for feedback. Catches spacing drift, hardcoded colors, missing data-slot attributes, inconsistent theme application, and composition anti-patterns that shipping-fast-with-AI tools often miss.
syncfusion-react-popups
syncfusion/react-ui-components-skills
Comprehensive guide for implementing Syncfusion React popup components including Dialog, ToolTip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in React applications.
syncfusion-react-3d-chart
syncfusion/react-ui-components-skills
Implement Syncfusion React 3D Chart component from the @syncfusion/ej2-react-charts package. Use this skill when users need 3D column, bar, stacked column, stacked bar, or 100% stacked chart variations. Covers Chart3DComponent, axis configuration (category, numeric, datetime, logarithmic), data binding, multiple panes, data labels, legends, tooltips, selection, print/export, theming, and accessibility.
trader-portfolio-cg
ruvnet/ruflo
Mean-variance portfolio optimization via Conjugate Gradient — 40-60× faster than the legacy Neumann path (ADR-126 Phase 3, ADR-123 Wedge 8)
syncfusion-react-appbar
syncfusion/react-ui-components-skills
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-heatmap
syncfusion/react-ui-components-skills
Implement Syncfusion React HeatMap Chart component for data visualization. Use this skill when user needs to create heatmaps, visualize 2D data patterns, display matrix data with color gradients, configure axes (numerical/categorical/datetime), implement legends, handle cell selection, apply custom styling, or work with large datasets. Covers installation, data binding, axis configuration, appearance customization, interaction patterns, tooltips, events, and accessibility.
syncfusion-react-notifications
syncfusion/react-ui-components-skills
Comprehensive guide for implementing Syncfusion React Notification components including Badge, Message, Skeleton, Toast, and Spinner. Use this when applying status indicators and badges with color variants and shapes; showing informational, success, warning, or error messages; configuring severity levels and display variants (Text, Outlined, Filled); handling message dismissal; toast positioning, toast templates, toast animations; displaying skeleton loading placeholders with shimmer animations (Wave, Pulse, Fade) and shapes (Circle, Rectangle, Text); or customizing notification appearance and accessibility.
ui-audit
tommygeoco/ui-audit
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.
syncfusion-react-carousel
syncfusion/react-ui-components-skills
Complete guide to implementing the Syncfusion React Carousel component for rotating image galleries, product carousels, slideshow presentations, testimonials, and sequential content display. Use this skill when working with slide transitions, navigation controls, animations, styling, and accessibility features. Covers installation, item population, and all API properties, methods, and events.
syncfusion-react-bullet-chart
syncfusion/react-ui-components-skills
Implements the Syncfusion React Bullet Chart component for KPI and performance indicator visualization. Use this when users need feature measure displays, comparative measures, target comparisons, or metric visualizations. Covers data binding, value bars, target bars, ranges, titles, tooltips, data labels, axis customization, orientation, and accessibility.
syncfusion-react-sidebar
syncfusion/react-ui-components-skills
Implement responsive Syncfusion React Sidebar component for navigation layouts. Use this when building responsive navigation menus, drawer layouts, or collapsible sidebars with various display modes (Over, Push, Slide). This skill covers sidebar configuration, animations, backdrop overlays, keyboard accessibility, and integration with multi-level navigation systems.
accessibility-audit
webflow/webflow-skills
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Requires Webflow Designer connection. Excludes image alt text (covered by asset-audit skill).
Causal Inference
aj-geddes/useful-ai-prompts
Determine cause-and-effect relationships using propensity scoring, instrumental variables, and causal graphs for policy evaluation and treatment effects
inspira-ui
secondsky/claude-skills
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.
syncfusion-react-smithchart
syncfusion/react-ui-components-skills
Implements and customizes the Syncfusion React Smith Chart component for transmission line and RF circuit visualization. Use this when users need Smith Charts for impedance matching, RF design, or telecommunications data visualization. Covers series configuration, axis customization, markers, data labels, legend, tooltip, print/export, and accessibility features.