Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs.
Create a comprehensive brand standards document — covering logo usage, color, typography, voice, messaging, and application rules. Use when the user says "brand guidelines", "brand standards", "brand book", "style guide", "brand guide", "brand manual", "brand rules", "brand documentation", "brand toolkit", "onboarding designers or copywriters", "need a document for the team", "brand consistency across teams", or wants to codify all brand decisions into a reusable reference document.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Expert in building Telegram Mini Apps (TWA) — web apps that run inside Telegram with a native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app
A working type director’s reference for selecting, pairing, and shipping typefaces with real taste. Covers a broad, opinionated catalog of typefaces and foundries (libre through commercial), a mood/era/register-driven selection framework that never collapses to one answer, font pairing as logic, fluid type scales, variable-font axes (incl. opsz/GRAD), OpenType features, web-font performance (subsetting, font-display, size-adjust fallback metrics), and licensing literacy (SIL OFL vs commercial EULA, desktop/web/app, trials). Explicitly retires the overused AI-design defaults (Inter, Roboto, Montserrat, Poppins, Fraunces, Geist, Söhne, the Fontshare/ITF starter pack) and names fresher alternatives in every role. Use for font selection, pairing, type scales, web-font optimization, variable fonts, OpenType, and typographic systems. NOT for logo/wordmark design, icon fonts, general CSS, or image-based/raster typography.
Use when the user asks for a publication-quality scientific figure or table, wants help choosing the right chart for results, needs a paper-ready pubfig or pubtab workflow, wants a figure + companion table for a results section, wants an Excel sheet turned into publication-ready LaTeX, or wants an existing scientific figure/table reviewed and upgraded.
Implement and debug React Native or Expo motion with Reanimated 4 and Gesture Handler 3: state transitions, layout, gestures, scroll, worklets, cancellation, and accessible alternatives. Use for native UI motion, not web Motion or a reason to add canvas graphics to ordinary views.
Create a visual identity brief for a brand — logo direction, color palette, typography, imagery style, and design system foundations. Use when the user says “visual identity,” “brand identity,” “logo brief,” “logo direction,” “design brief,” “brand design,” “color palette for my brand,” “typography for my brand,” “visual language,” “design system,” “brand look and feel,” “what should my brand look like,” or is briefing a designer or design agency. Also use when the user has a brand strategy and wants to translate it into visual design direction.
Runs scoped browser probes for focus, hit targets, overflow, themes, request failures, and performance attribution, with evidence linked to UI rule IDs. Use when asked to "verify this in the browser", "reproduce this UI finding", "re-measure after the UI fix", or "review before and after screenshots"
Nuxt UI v4 component library for building Nuxt v4 applications. 125+ accessible components with Tailwind v4, Reka UI, dark mode, theming. Use for dashboards, forms, overlays, editors, page layouts, pricing pages, or encountering component, theming, or TypeScript errors.
Write Celigo settings forms -- the form definition (settingsForm) the Celigo UI renders to collect a resource's settings, on integrations, flow groups, flows, exports, imports, connections, and iClients. Covers the seven scopes and how steps read their values, fields and types, options, conditions, layouts and containers, init scripts, and the dynamic exportSelect and staticMap fields. Use when adding or changing a settings form, giving users a setting that steps read at run time, building a dropdown from an export or a value-mapping table, or working out why a form or a setting doesn't show what you expect.
Build a slide deck whose source is text and whose figures are laid out by TALA — one Markdown file with a ```d2 fence per figure, compiled to a self-contained HTML deck (keyboard nav, overview grid, print-to-PDF), each figure as its own SVG, and a copy manifest. The deck is a page, so vlmkit's own gates read it: `check integrity` for a slide that breaks or clips, `check copy --manifest` for text the frame cut off, `check a11y contrast` for a projector. Loop: write `deck.md` → build → gates → fix. Use when asked for slides, a deck, a talk, a presentation, a review walkthrough, or a figure-heavy explainer that has to be presented rather than read. Not for one diagram (`d2-diagram`) or a moving figure (`explanatory-animation`).
Use when building a visual identity or brand kit with Scenario: a logo, wordmark, or icon as editable SVG, a color palette and typography spec, logo variants (mono, reversed, favicon), and brand applications like social templates, avatars, banners, or merchandise mockups. Also for a rebrand or refreshing an existing mark. Keywords: brandkit, brand kit, visual identity, logo, monogram, wordmark, SVG, vectorize, color palette, typography, brand guidelines, brand board, launch kit.
Create and modify Power BI report files in PBIR/PBIP format using the `powerbi-report-author` and `powerbi-desktop` CLIs. Use when the user wants to: (1) implement an approved report spec or design brief, (2) add or edit pages, visuals, filters, slicers, bookmarks, themes, or formatting, (3) validate PBIR and verify rendering in Power BI Desktop. For open-ended visual design, use `powerbi-report-design` first. For end-to-end requirements and approval workflow, use `powerbi-report-planning` first. Triggers: “edit PBIR,” “create Power BI report page,” “add visual to PBIP,” “format report visual,” “validate Power BI report,” “reload Desktop screenshot,” “implement an approved PBIP report spec,” “edit PBIR pages/visuals”
Creating memorable, readable, and emotionally resonant game characters that work at every scale and in every contextUse when "character design, design a character, character art, character concept, character sheet, turnaround, expression sheet, character silhouette, shape language, character proportions, iconic character, memorable character, character lineup, character family, hero design, villain design, npc design, protagonist design, character, art-direction, visual-design, game-art, concept-art, silhouette, shape-language, color-theory, costume, expression, turnaround, iconic, readable" mentioned.
Build Shopify apps, extensions, and themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. TRIGGER: "shopify", "shopify app", "checkout extension", "admin extension", "POS extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"
Set up, repair, and build components with NativeWind v4 and Tailwind CSS v3 in Expo React Native apps. Use for an explicitly v4 project, v4 configuration failures, className interoperability, or v4 theming; not for NativeWind v5 or generic web Tailwind setup.
Synthesize qualitative and quantitative user research into structured insights and opportunity areas. Use when analyzing interview notes, survey responses, support tickets, or behavioral data to identify themes, build personas, or prioritize opportunities.
Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.
Use when designing or building native macOS applications with SwiftUI or AppKit. Triggers on menu bar structure, keyboard shortcuts, multi-window behavior, Liquid Glass design system, macOS Tahoe/Sequoia, sidebar navigation, toolbar design, app icons, SF Symbols, or making an app feel like a “good Mac citizen”
Implement, migrate, design, review, and troubleshoot haptic feedback with Software Mansion Pulsar across React Native, iOS, Android, Kotlin Multiplatform, Flutter, and Web. Use when the user names Pulsar; a Pulsar package such as react-native-pulsar, com.swmansion:pulsar, com.swmansion:pulsar-kmp, pulsar_haptics, or pulsar-haptics; a Pulsar import, preset, composer, setting, installation, migration, or runtime problem; a Figma design carrying Pulsar haptic bindings; or explicitly requests migration to Pulsar. Do not use for generic haptics, vibration, Core Haptics, browser Vibration API, expo-haptics, animation, audio, motion, or UI-polish work without Pulsar evidence or explicit Pulsar intent
Build or audit a comprehensive brand style guide that documents the full brand system, including story, logo system, color, typography, imagery, voice, applications, and dos and don’ts. Use this skill when the user wants to create brand guidelines, document an existing brand, build a brand book, audit an existing style guide for completeness, or produce an artifact that other teams will reference for years. Triggers on style guide, brand guidelines, brand book, brand standards, brand manual, style sheet, brand documentation, and brand reference. Also triggers when the brand identity is finished and needs to be documented for handoff to designers, developers, vendors, or future team members
Load for large human-facing outputs: reports, docs, multi-section explanations, artifacts. Choose the right form for each beat (prose, diagram, table, mockup) and put the answer first, depth behind it. If the medium allows, use progressive disclosure.
Comprehensive guide for implementing Syncfusion Blazor dropdown components including AutoComplete, ComboBox, DropDown List, MultiSelect Dropdown, and ListBox. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, custom templates, and accessible dropdown experiences in Blazor applications. Covers all dropdown components from Syncfusion.Blazor.DropDowns package
Creates comprehensive Magento 2 frontend solutions. Use when developing frontend features, working with layout XML, templates, JavaScript, or responsive design. Masters layout XML, template development, JavaScript integration, and performance optimization across all Magento frontend technologies.
Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when the user wants to create animations, motion graphics, video intros, animated presentations, or product demos
Upgrade a coded website to award-tier, editorially-crafted design using fal.ai. Takes a local HTML file or a dev-server URL, screenshots it, has an opus-4.7 vision model write a gpt-image-2 edit prompt, uses fal-ai/gpt-image-2/edit to produce the redesigned reference image, then opus-4.7 vision writes a Markdown build-spec with a "Hard constraints" section + a tokens.json. Also supports iterate (screenshot implemented site → delta-spec vs reference) and greenfield generate (brief → mockup → single-file HTML). Invoke when the user says "improve the design", "make it world-class", "redesign this landing page", "upgrade this site", "design pass", or points at a local HTML / dev server for a visual review.
Creates animated lower thirds and other broadcast overlays (name straps, corner bugs, subscribe reminders, scripture or song titles) as transparent video files, drawn frame by frame in JavaScript on a canvas and rendered to WebM with alpha for OBS and browsers, or ProRes 4444 for Premiere Pro, DaVinci Resolve, and Final Cut. Use when someone wants a lower third, a name title, a chyron, a stream overlay, a corner bug, or any graphic with a transparent background to lay over their own footage or livestream.
Create Framer Code Components and Code Overrides. Use before writing or editing any `.tsx` for Framer, including when deciding whether a feature needs code at all. Covers building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, using Framer Motion animations, handling WebGL/shaders in Framer, and debugging Framer-specific issues such as hydration errors and font handling.
Vue Material Component Framework. Use when writing, debugging, or configuring code that imports vuetify v4.x. Covers createVuetify setup, components and labs, composables, theming, icons, dates and locale, styles and SASS variables, treeshaking, and v3 to v4 migration.
Guide for contributing to Nuxt UI. Provides component structure patterns, Tailwind Variants theming, Vitest testing conventions, and MDC documentation guidelines. Use when creating new components, reviewing component PRs, modifying existing components, writing tests, or creating documentation in this codebase.
Build a fully-interactive 3D character-selector experience powered entirely by fal.ai. Generates stylized characters (FLUX.2 / GPT-Image-2), rigged animated GLBs (Meshy v6), themed companion creatures, per-character PATINA floor textures, looped Seedance video backgrounds, and a Three.js scene with palette swaps, breathing reflections, transition effects and a CREATE-YOUR-OWN flow.
Implement the Syncfusion Blazor Chart (SfChart) component for comprehensive data visualization. Use this when creating line charts, bar/column charts, area charts, financial charts, or statistical visualizations. This skill covers 30+ chart types, including scatter plots, bubble charts, candlestick charts, and specialized charts like waterfall, histogram, and polar charts for Blazor applications.
This skill should be used when converting academic papers into promotional and presentation formats including interactive websites (Paper2Web), presentation videos (Paper2Video), and conference posters (Paper2Poster). Use for paper dissemination, conference preparation, creating explorable academic homepages, generating video abstracts, or producing print-ready posters from LaTeX or PDF sources.
Implement modal and modeless dialogs using Syncfusion Blazor Dialog component. Use this skill when creating dialogs, popup windows, modal confirmations, custom forms, or interactive overlay windows. Covers templates, events, positioning, animations, accessibility, and advanced customization
Transform real Chinese architecture and place-based cultural photos into art-directed editorial posters, integrated multi-photo scenes, and optional source comparisons. Use for historic buildings, vernacular streets, culturally rooted shops, interiors, food, travel covers, and place montages; do not use for generic advertising, routine retouching, or invented places
Designs graphics for thumbnails, social media, banners, and presentations. Applies design principles (CRAP, Gestalt, visual hierarchy) with research-backed techniques. Integrates with /geometric-elements for decorative assets. Use when creating layouts, choosing typography/colors, or designing any graphic assets. For photography/cinematography prompts, use /art-director instead.
Change between pages, chapters, or scenes with a paper-burn transition: a ragged ember line sweeps across the frame, chars the old page ahead of it, and reveals the next scene live behind it. Implemented as one WebGL composite pass over a frozen frame and a scissored live scene. Covers the front silhouette, luminous ember gradient with a beading gold thread, torn porous charcoal that is alpha-masked, baked noise, finite-difference slopes, the 0.75-scale live scene, sweep direction, timing, reduced motion, and visibility pausing. Use for a burn transition, paper burn, cinder wipe, chapter change by fire, charring page reveal, burn-away section change, ember dissolve, or when a fade, slide, or generic dissolve between scenes feels cheap.
Generate Power BI report visual design guidance before PBIR files are written. Use when the user wants to: (1) choose tone, signature, page archetypes, chart types, layout, color, typography, theme direction, or accessibility approach, (2) redesign/restyle an existing report, apply a brand, or critique chart/layout choices, (3) produce a design contract for `powerbi-report-authoring`. For end-to-end requirements, approval, and build sequencing, use `powerbi-report-planning`. Triggers: "design Power BI report", "make dashboard look professional", "choose chart type", "apply brand to report", "redesign report", "create design brief", "Power BI report design archetype".
Audit a live page for accessibility issues and locate each violation precisely — pass a URL, a config target name (e.g. `accesslint:scan dev`), or nothing to use the default target from accesslint.config.json. Ensures a debuggable Chrome, runs the @accesslint/core engine via CDP, and returns a worklist of live-DOM WCAG violations grounded to each violation's DOM selector and source file:line. Locates; doesn't edit — output drives fixes by Claude. Use it for “is this page accessible,” or to verify a UI change. For diffing against uncommitted changes or a branch, use the `diff` skill.
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.