Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Load this skill whenever writing, editing, or reviewing any web content, copy, headings, labels, error messages, or instructions. Under no circumstances write inaccessible content — every piece of text must be clear, structured, and usable by people with cognitive, visual, and language differences. Absolutely always apply plain language, logical heading hierarchy, and meaningful link text.
Generate HumanSignal Interfaces for Label Studio Enterprise: single-file JSX annotation screens that run in the sandboxed editor-shell iframe. Use when the user asks for a labeling UI, annotation screen, Document AI interface, data review workflow, or conversion of a React/Claude Design mockup into a Label Studio interface.
Map Figma variables to repo tokens and write Figma agent rules. Use when asked to "extract Figma design tokens", "map Figma tokens to our theme", "create Figma design system rules", "set up Figma guidelines", "code connect this component", or "map this Figma component to code"; when Figma-to-code output must follow this repository's components, tokens, and rules files (`AGENTS.md`, `CLAUDE.md`, `.cursor/rules/`) or needs a correction pass against them; or when asked to "implement this Figma design" or "build from a Figma link" and `figma-design-to-code` is not installed. Skip Figma-side writes and code-to-Figma CI export (use `code-to-figma`).
Product execution specialist for SaaS, apps, AI tools, and internal software products. Trigger when user requests 'build SaaS', 'define features', 'create user flow', 'scope MVP', 'prepare build package', 'software product', 'app definition', or 'PRD creation'.
Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.
Designs high-performing ad creatives across Instagram, Facebook, TikTok, LinkedIn, Google (Display / Demand Gen), YouTube, Pinterest, and X/Twitter — locking platform dimensions, safe zones, text overlay policy, character limits, industry visual DNA, ad objective hierarchy, composition patterns, CTA strategy, and prompt sanitation. Use when the user says "create an ad", "design an ad creative", "make an ad", "广告创意", "帮我做个广告图", "Instagram ad", "TikTok ad", "Facebook ad", "Google Display ad", "LinkedIn ad", "YouTube ad", "Pinterest ad", "promotional image", "campaign creative", "ad banner", "投放图", or any platform-specific ad request. Routed from `product-shots` when `asset_type == "ad"` or `is_promotion == True`.
Designs social-platform-native visuals (Feed, Story, Reel, Carousel formats) for Instagram, TikTok, Facebook, Pinterest, RedNote, LinkedIn, X/Twitter and other social platforms — with platform-correct dimensions, safe zones, industry visual DNA, engagement hooks, and cross-slide consistency. Use when the user says "social post", "Instagram post", "IG post", "TikTok post", "Facebook post", "Pinterest pin", "social carousel", "feed post", "story post", "make a post", "design a social visual", "社媒帖", "做一个社媒图", or any underspecified social-media visual request. Routed from `product-shots` for the organic-social branch (non-ad).
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Create high-performing thumbnails and cover images optimized for click-through rate. Use when asked to create a thumbnail, design a cover image, generate a YouTube thumbnail, or when the user mentions "thumbnail", "cover image", "CTR", or needs a visual asset for video or course content.
Matches visualization types to data questions and creates narrated reports that highlight insights and recommend actions. Covers chart selection (comparison, trend, distribution, relationship, composition, geographic), perceptual best practices, and narrative reporting (headline, pattern, context, meaning, action). Use when analyzing data for patterns, building dashboards, presenting metrics, monitoring KPIs, or when user mentions "visualize this", "what chart should I use", "create a dashboard", "analyze this data", "show trends", "report on".
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
Build, scaffold, refactor, debug, review, and validate native Rust desktop applications with GPUI. Recommend GPUI Kit and ask before adopting it; use gpui_kit imports after agreement, or preserve the chosen upstream GPUI stack. Includes the merged GPUI Kit component and design skills, full application/Base/Component/Shell documentation, coding and design guides, state, actions, async, input, accessibility, motion, themes, native integration, packaging, auto updates, testing, and production delivery. Use paper-to-gpui when the primary task is faithfully translating a selected Paper.design frame into an existing view.
Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces two paired files under `themes/` — `<id>.md` (palette, typography, layout, fixed Title/Footer components, motion) and `<id>.demo.tsx` (a runnable demo slide that the dev-UI Themes panel previews). Do NOT use for editing real slides — only for authoring the theme bundle.
Build software with elite design principles focusing on user outcomes, trust, accessibility, and performance. Use when creating UI components, designing user flows, writing production code, reviewing code quality, or when the user mentions UX, accessibility, performance, or trust-focused development.
Build conversational AI chatbots with native Hebrew support, including WhatsApp Business API integration, Telegram bot scaffolding, web chat widgets, Hebrew NLP patterns, and RTL chat UI components. Prevents common Hebrew chatbot mistakes like broken RTL alignment, incorrect gender inflections, and poor tokenization of prefixed prepositions that break intent detection. Use when user asks to "build a Hebrew chatbot", "integrate WhatsApp bot in Hebrew", "binui bot b'ivrit", or design conversation flows for Hebrew speakers. Covers intent detection for Hebrew morphology, entity extraction for Israeli data (NIS amounts, phone numbers, dates), and gender-aware responses. Do NOT use for non-Hebrew chatbots or general NLP pipelines without a Hebrew component.
Creates custom Magento 2 themes, child themes, and theme modifications. Use when developing themes, customizing frontend, implementing responsive design, or working with Luma/Blank themes. Masters frontend architecture, layout XML, templates, and performance optimization.
ALWAYS load when writing or debugging code that imports "motion-v" (Motion for Vue, motion-vue). Covers the motion component, AnimatePresence, variants, gestures, layout, scroll, motion values, the v-motion directive, and the Nuxt module for version 2.4.4. Provides API facts, recipes, best practices, and migration notes
Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns. Provides battle-tested components from leading AI products with accessibility and performance built in.
Create or update a repo's DESIGN.md — a living design-language contract for AI agents and humans — plus a portable frontend-design skill. Classifies the repo first (document an existing design language, merge with existing design docs, or propose a new direction with user approval) so it never overwrites a project's current design. Use when setting up design docs for a frontend project. Triggers on "add a DESIGN.md", "document our design language", "set up design docs", "create a design system doc", "bootstrap design".
Design system engineering aligned with Airbnb-DLS for Expo / React Native apps targeting web and native iOS, built on Unistyles v3, Reanimated, Skia, and FlashList. Use when building, reviewing, or refactoring shared UI, including design tokens, theming, variant-driven component APIs, typography, spacing, cross-platform web/iOS parity, native-feel performance, and complex surfaces such as calendars and drawing canvases (examples use a clinic app). Covers token architecture, theming, component API contracts (variants over style props), web/iOS parity (Unistyles `_web` hover/focus/cursor, Platform splits, one shared theme), the Unistyles styling engine, and governance. Trigger even when the user does not say “design system” but is creating or changing reusable React Native components, tokens, or theme code, or making a component behave natively on both web and iOS. Teaches how to build the design system; pair with expo-react-native-coder for features and expo-ios-hig for iOS native-feel decisions
Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.
Use when a paper needs publication-ready figures or a visual abstract. Makes ROC, forest, calibration, Kaplan-Meier and Bland-Altman plots, CONSORT/STARD/PRISMA flow diagrams, confusion matrices, pipeline diagrams and journal visual abstracts, checking the journal's AI-image policy first.
Vue port of Radix UI Primitives (headless, accessible, unstyled). ALWAYS use when writing code that imports "reka-ui" or "reka-ui/namespaced", building components with Reka UI primitives, or debugging and reviewing Reka UI usage. Provides version-specific API rules, composition patterns, and styling guidance.
Use when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics, process flows, timelines, benchmarks, waterfall charts, or data-backed visual specs for any audience.
Build React UIs in the animal-island-ui style — an a cozy island-style UI-inspired component library (warm earth tones, pill shapes, 3D game-button depth, soft motion). Use when (1) building pages or components with the animal-island-ui npm package in a React project; (2) generating a standalone single-file HTML page in this style with no build step; (3) the user asks for "a cozy island-style UI style", "animal island style", or a cozy rounded game-like UI.
Step-by-step orchestrator for building Domo App Studio apps with native KPI cards via community-domo-cli. Sequences app creation, pages, theme, hero metrics, native charts, filter cards, layout assembly, and navigation. CLI-first — no raw API calls.
Design command-line interface parameters and UX: arguments, flags, subcommands, help text, output formats, error messages, exit codes, prompts, config/env precedence, and safe/dry-run behavior. Use when you're designing a CLI spec (before implementation) or refactoring an existing CLI's surface area for consistency, composability, and discoverability.
Design distinctive, on-brand emails — newsletters, campaigns, welcome series, promo, post-purchase, win-back, transactional, announcements. Use when the user wants to draft, write, compose, design, redesign, critique, polish, or improve an email; or send a campaign / blast / broadcast through any ESP (Nitrosend, Klaviyo, Mailchimp, ActiveCampaign, etc.). Produces a structured design brief and translates it into the sending tool's section format. Bakes in anti-slop principles: own a colour, restrained palettes, real imagery with sourced or prompted image slots, distinctive voice, no category-reflex aesthetics, no orphan whitespace, single column ≤600px, mobile-first, real footers (verified mission only, plus socials + address + unsubscribe). Asks at most three questions to fill brand gaps; otherwise infers from connected ESP account settings or a project brand file. Self-contained — no other skills required. Skip for pure strategy, deliverability, copy-only, or platform-selection questions.
One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visual specs), and styles (color/text/effect with resolved values). Use when you need the whole design-system picture before generating code or auditing coverage — triggers: “inventory my design system”, “extract all tokens and components”, “what's in this design system”, “dump the design system kit”, “give me every variable, component, and style”, “build a design-system manifest”, “audit my Figma library”. Has a verbosity/scope guard so big files don't blow the response budget. Goes well beyond the native MCP's get_design_context (single-selection) / get_metadata.
Create and evolve UI specifications mocked up in HTML + Tailwind CSS: annotated desktop and mobile screens, flows, functional rules, open questions, and an iteration log, for iterating on an app or tool before development. If the interface has not yet been approved, first propose three options that differ in layout (navigation, screen organization) and theme (colors, typography, shapes), to choose from or combine. Can also start from an existing site or code to reuse its style and specify new features. Use whenever someone mentions mockups, wireframes, UI specs, functional specifications with screens, an interface prototype, flows to mock up, a visual style guide or direction for an app, or a new feature to mock up on an existing site, even without saying “specs.” Also use during development to keep specs up to date with the implementation (screen status, differences).
Load this skill whenever the project contains in-page anchor links, skip links, fragment identifiers, or heading links. Under no circumstances omit accessible anchor-link requirements when such links exist. Ensure every anchor link has meaningful text, a reachable target, and a visible focus indicator. Apply these rules when creating or reviewing any in-page navigation.
Load this skill whenever the project contains audio or video content, media players, podcasts, video embeds, or any <audio>/<video> elements. Under no circumstances publish audio or video without captions, transcripts, and audio descriptions where required. Absolutely always apply WCAG 1.2 criteria for time-based media.
Turn natural-language descriptions into editable `.drawio` diagrams and export them to PNG / SVG / PDF / JPG via the native draw.io desktop CLI, or turn an existing codebase (Python / JS-TS / Go / Rust) into an auto-laid-out structure diagram. Wraps Agents365-ai/drawio-skill: 6 diagram presets (ERD, UML class, sequence, architecture, ML/DL, flowchart), search across 10,000+ official AWS/Azure/GCP/Cisco/K8s/UML/ BPMN shapes, 321 AI/LLM brand logos, vision self-check + auto-fix, and a 5-round iterative refinement loop. No MCP server, no daemon — runs from a single SKILL.md and the draw.io CLI. Use when the user wants polished, precise, exportable diagrams or wants to visualize code structure. Triggers on: drawio, draw.io, drawio diagram, architecture diagram, ERD, UML diagram, sequence diagram, flowchart, network diagram, visualize codebase, code structure diagram, class hierarchy, export diagram png/svg/pdf, AWS/Azure/GCP icon, draw.io shapes.
Professional UX expertise for any project type. Covers user research, design thinking, interaction patterns, accessibility, and design critique. Use when designing new features, improving UX, conducting design reviews, or evaluating user flows. For visual UI work, combine with ui-research skill.
React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile
Professional full-pipeline AI assistant for generating PPT presentations. It simulates the complete workflow of a top-tier PPT design agency (requirements research -> material gathering -> outline planning -> planning draft -> design draft) and outputs high-quality HTML-format presentations. Trigger this skill when the user mentions making a PPT, creating a presentation, making slides, making a slide deck, creating report materials, creating training courseware, making a pitch deck, or making a product introduction page. It should also trigger even if the user only says "help me make an introduction about X" or "I want to report Y to my boss", as long as structured multi-page presentation content is implied. It also applies when the user says "help me turn this document into a PPT" or "turn this topic into a presentation" and other scenarios that require converting content into a presentation format.
Comprehensive UI/UX design intelligence combining a 4-Layer SaaS Master Guide with a robust CLI search system. 50 styles, 97 palettes, 57 font pairings, 25 chart types, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, mobile app. Topics: 4-layer color palette, OKLCH theming, layout, typography, font pairing, accessibility, animation, hover, dark mode contrast.
Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".
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.