Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use whenever a task adds, embeds, or changes video or audio on a web page, even before a player is chosen: an HTML `video` or `audio` element, player component, podcast player, hero or background video, or livestream. Build customizable, accessible Video.js 10 players with React components or HTML custom elements in React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Astro, or CDN pages. Covers custom UI and skins, captions, HLS, DASH, DRM, casting, analytics, and hosted media. Also use for Video.js 8 migrations or comparisons with Plyr, Media Chrome, Mux Player, Vidstack, or react-player. Start with version-matched installation instructions and docs from installed packages, then videojs.org.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components—not for simple single-file HTML/JSX artifacts.
Audits codebases and product copy for deceptive dark patterns inferable from local source code and text—no runtime inspection or screenshots needed. Produces a structured narrative report with confidence grading, source locations, concise reasoning, and official pattern reference links for each detected pattern. Covers pricing, subscriptions, consent, modals, preselected controls, misleading CTAs, and more.
Use when writing BK-CI frontend Vue pages and components, such as developing Vue components, managing state with Vuex, calling APIs, following styling conventions, and implementing page interactions. Prefer this when the user wants to change a frontend page rather than a backend service.
Generates horizontal-swipe web decks as a single HTML file: WebGL backgrounds, presenter view, synced audience screen, speaker notes, section covers, big-number data slides, and image grids. Two visual systems: "electronic magazine x e-ink" (serif, fluid background, warm) and "Swiss international" (sans-serif, grid, high-saturation accent colors). Also produces slide images and platform covers. Output is HTML, not .pptx. The skill text is Chinese-first.
Design engineering principles for making interfaces feel polished and alive. Covers micro-interactions, typography details, visual refinement, and the small decisions that separate "it works" from "it feels right". By Jakub Krehel (Interfere, Interfaces magazine, oklch.fyi).
Use when building, redesigning, polishing, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, charts, sidebars, auth screens, blocks, responsive layouts, theming, icon selection, component or CLI installation questions, and requests to turn an idea or rough mockup into polished Svelte UI without inventing component APIs.
Tailwind CSS v4.2 browser-runtime patterns for FrameVideo compositions. Use when scaffolding or editing projects created with `framevideo init --tailwind`, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to CSS instead of using the browser runtime
Structure a dev-tool homepage that converts developers into champions. Use when the landing page is written for the buyer instead of the developer, reads as salesy, buries what the product does, or makes it hard to start. Pairs with the ShipReady homepage audit.
Enterprise SaaS frontend — Tailwind v4, shadcn/ui, Next.js App Router or Vite SPA, accessibility, responsive design, component patterns. Use when: React component, Next.js page, frontend UI, Tailwind, shadcn, accessibility, a11y, responsive design, form validation, server component, client component, design system, dark mode, SaaS UI, dashboard, pricing page, enterprise UI, data table, landing page, Vite, React Router, SPA, single page app.
Render, preview, validate, and burn consistent production subtitles from QC-passed real-timestamp caption artifacts. Use for AI-video production, washed-video production, IndexTTS2 explainers, practical long-form videos, talking-head edits, Kimi-style dark rounded captions, warm-white translucent captions, subtitle styling, subtitle overlays, or fixing caption size, position, shadow, drift, and 4K scaling. Always pair with ra-audio-to-subtitles when final word timestamps do not already exist.
Designs, builds, and reviews clean, professional terminal UIs and CLIs across four ecosystems: Go (Bubble Tea/Lipgloss), Rust (Ratatui), Python (Textual), and TypeScript (Ink). Covers layout patterns, color systems, keybinding conventions, discoverability, and framework-specific design patterns.
Enforces the non-happy paths every screen owes the user — loading/empty/error/content resolved in ONE switch over an AsyncValue or sealed view state, never an isLoading+error+data bool triple; a delayed skeleton shaped like the result instead of a spinner that flashes; a refresh that keeps stale content on screen; "nothing yet" distinguished from "nothing matches this filter", each with its own action; error text from a typed Failure code (never e.toString()) plus a retry that invalidates the provider; the surface ladder inline, snackbar, banner, dialog, with a modal earned only by a decision that must resolve now; soft-delete + Undo over a confirmation; showDialog's null dismissal handled as its own outcome; ScaffoldMessenger captured before an await; and announcements for eye-only changes. Use when writing loading, empty, error, or offline UI, calling AsyncValue.when, showDialog, showModalBottomSheet, showSnackBar or showMaterialBanner, or adding a confirmation, Undo, or retry
Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.
WCAG 2.2 AA enforcement as a package of Agent Skills: router skills for web UI, full-site audits, Office/PDF/ePub documents, markdown, desktop and Python tooling, and GitHub workflows dispatch specialist, helper and reference skills by name.
Implement accessibility (a11y) best practices to make applications usable by everyone. Use when building UIs, conducting accessibility audits, or ensuring WCAG compliance. Covers screen readers, keyboard navigation, ARIA attributes, and inclusive design patterns
Designer role. Reads deck.md and generates a single HTML presentation file with a CSS design system, JS slide engine, and per-slide content. Accepts visual references (URLs, screenshots, design specs) and extracts design signals to inform the isomorphic mapping. Use whenever the user says "design slides", "generate deck", "generate the deck", "build slides", "visual style", "reference this style", "like this design", "design", "generate slides", "visual style", "reference this style", or wants to turn an outline into actual slides.
Use this skill when the user wants to create, draft, author, or generate new slides / a presentation in this open-slide repo. Triggers on phrases like “make slides about X,” “make a deck about X,” “create a presentation,” “draft slides for,” “new slide,” “a deck with speaker notes / a script,” or when the user asks to add content under `slides/`. Do NOT use for editing the framework itself — only for authoring content inside `slides/<id>/`.
Produce a design-system adoption plan for a product — tear down its bespoke UI, map every custom pattern to its design-system replacement, estimate the effort, and hand back a prioritized, phased build schedule. Use when the user wants to adopt, migrate to, or fully embrace a design system in an existing product, asks "what would it take to move this to our design system?", wants custom CSS replaced with system components, or asks for an adoption/migration plan or estimate. Companion to ds-inspection and product-inspection — the inspections find the warning lights; this produces the restoration estimate and build schedule.
Translate reference images or brief descriptions into editable halftone paper-collage specifications. By default, use Codex built-in image_gen to create brand-consistent stills and transparent layers, then use local FFmpeg or HyperFrames to make deterministic motion videos that assemble piece by piece from an empty background. Use for requests involving halftone collage, paper collage, paper-cut collage, editorial collage, magazine collage, vintage print collage, collage motion, collage animation, paper-cut animation, assembling paper pieces, layer-by-layer assembly, building from nothing, elements flying in to assemble, stop-motion collage, stop-motion animation, Arcads style, breaking down a reference image or style, reverse-engineering a visual look, making something in this style or something similar, generating collage stills, animating an image or assembling elements, or creating collage ads or explainer videos. English trigger phrases include editorial collage, halftone collage, paper collage, paper-cut motion, stop-motion graphic, assemble from empty, build-on motion, analyze this, break this down, reverse-engineer this look, generate the stills, animate this, and make these move. Do not call Arcads, Nano Banana, Seedance, or Kling by default; use an external generation path only when explicitly requested and the corresponding connector is available
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
Development assistant for the Kuikly Compose DSL framework. Helps with cross-platform UI development using Kuikly Compose DSL syntax, providing correct usage guidance and complete code examples for APIs such as Compose components, Modifier, animations, gestures, state management, navigation, and ViewModel. Use for Kuikly Compose page development, Compose component usage, layout implementation, animations, state management, and navigation routing while writing Kuikly Compose code. To use the traditional Kuikly DSL (attr/event syntax), use the kuikly-ui-framework skill.
Expert guidance for using Lucide icons in Rails applications via the lucide-rails gem. Use when adding icons, choosing icon names, styling SVG icons, making icons accessible, or building icon-based UI patterns (buttons, nav, badges, empty states). Triggers on "lucide", "icon", "lucide-rails", "SVG icon", "icon library", "lucide_icon", "feather icon", "inline SVG", "add an icon", "icon button", "icon name".
UX agency skill for user journey mapping with emotional tracking. Includes Playwright testing (happy path, cognitive walkthrough, accessibility, synthetic user), a library of proven UX patterns, synthetic personas, Nielsen heuristics scoring, and anti-generic-AI guardrails.
Use when building Google Play Store screenshot pages, generating exportable marketing screenshots for Android apps, or creating programmatic screenshot generators with Next.js. Triggers on google play store, play store, screenshots, marketing assets, phone mockup.
Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.
Generate professional infographics with 21 layout types and 20 visual styles. Analyze content, recommend layout and style combinations, and create publishable infographics. Use when the user asks for an “infographic”, “visualization”, “high-density information graphic”, or “visual summary”
An Agent skill that turns long Markdown articles into 3:4 (1080×1440) image sets for Xiaohongshu. Includes five design skins (E Elegant Journal · default / A Warm Apricot Latte / B Misty Pine Green / C Ink and Gold / D Gilded Night Reading) plus three women-oriented themes (F Pink Kingdom / G Otome Game Night / H Ghibli) × multiple page layouts. The Agent reads the article, splits it into pages, and fills in HTML; the Playwright renderer captures and exports each image as PNG. Use when the user says “turn a long article into images”, “Xiaohongshu long image”, “turn this article into Xiaohongshu graphics/images/cards”, “article to images”, “typeset with my design draft”, “convert to a 3:4 image set”, wants a “women-oriented/girly/pink/otome-game/Ghibli-style” layout, or provides an article and mentions posting it on Xiaohongshu.
Enforces adapting layout by available CONSTRAINTS/size, never device or platform checks — LayoutBuilder + MediaQuery.sizeOf/paddingOf/viewInsetsOf (not .of) for narrow rebuilds, Material 3 window size classes (compact <600, medium 600-840, expanded 840-1200, large >1200) as the breakpoint vocabulary, navigation affordance chosen by width (NavigationBar → NavigationRail → NavigationDrawer), list-detail single-pane-vs-two-pane, readable max-width via ConstrainedBox, Flexible/Expanded/FractionallySizedBox over fixed widths, SafeArea + display cutouts + keyboard insets, never lock orientation, foldable/hinge awareness via MediaQuery.displayFeatures, and golden-matrix verification across sizes. Use when building responsive or adaptive UI, tablet/desktop/foldable support, master-detail or two-pane screens, a NavigationRail-vs-BottomNav shell, breakpoints, LayoutBuilder, MediaQuery sizing, SafeArea/cutouts, or fixing overflow at large widths.
Expert guidance for CSS architecture in Rails applications using modern CSS (no Tailwind). Use when writing stylesheets, organizing CSS files, implementing dark mode, defining design tokens, using CSS custom properties, creating component styles, working with CSS layers (@layer), using the light-dark() function, setting up color schemes, or structuring CSS for maintainability. Covers design tokens, semantic color systems, component-scoped styles, utility classes, responsive patterns, and file organization.
Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports, presentations, infographics, data stories. Triggers: data visualization, chart, graph, data chart, bar chart, line chart, scatter plot, data viz, visualization, dashboard chart, infographic data, data presentation, chart design, plot, heatmap, pie chart alternative
A comprehensive designer toolkit by Marie Claire Dean, organised into nine plugins: design-research, design-systems, ux-strategy, ui-design, interaction-design, prototyping-testing, design-ops, designer-toolkit, and visual-critique. Covers the design practice from research to systems, UI, interaction, testing, and handoff.
Use this skill to run a visual-craft audit of a rendered UI and produce an evidence-grounded Craft Report across Useful, Usable, Reliable, Coherent, and Well-Crafted. Invoke it for craft audits, visual critiques, design comparisons, felt-quality reviews, or visual-craft readiness checks on screenshots (.png, .jpg, .jpeg, .webp, .gif), Figma frames, rendered prototypes, and live URLs. Do not use it for source-code review, SLDS compliance (use design-systems-slds-validate), or accessibility compliance (use experience-accessibility-validate).
Expert Flutter and Dart development skill for building beautiful, performant, and maintainable applications. Use when users request Flutter/Dart development tasks including creating apps, widgets, screens, implementing features, debugging, testing, state management, navigation, theming, layouts, or working with Flutter projects. Covers mobile, web, and desktop platforms with modern best practices, Material Design, responsive UI, and code quality standards.
Apply these opinionated rules whenever CSS is written, refactored, or reviewed, so agents and people write it consistently. They complement the Modern Web Guidance skill and resolve choices it leaves open across architecture, layout, typography, colors, and motion. Use this skill when the user asks things like “set up the base styles for this project,” “style this component,” “make this responsive,” “add dark mode,” “scope these styles,” “fluid type scale,” or “refactor my styles to modern CSS”; when they ask to build a page or component; and for any other CSS task, even if they don't say “CSS”
Load this skill whenever the project involves writing, editing, or reviewing content for a general audience, including UI copy, help text, error messages, documentation, and instructions. Under no circumstances use jargon, complex sentence structures, or unexplained acronyms without providing plain alternatives. Absolutely always target a reading level accessible to the broadest possible audience. Load alongside content-design/SKILL.md for all content work.
visionOS skills—spatial design (layout ergonomics, eyes-and-hands input, motion comfort, immersion, environments) and widget patterns (mounting styles, glass/paper textures, proximity-aware layouts). Use when designing, building, or reviewing anything for visionOS.
Motion and creative-coding skill package covering Three.js, GSAP ScrollTrigger, React Three Fiber, Framer Motion, Babylon.js, A-Frame, PixiJS, Locomotive Scroll, Barba.js, React Spring, Magic UI, AOS, Anime.js, Lottie, Rive, Spline, and a Blender-to-web pipeline. One of the broadest motion/creative suites available.
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.