Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use when auditing a user-facing app — web, mobile (iOS/Android/React Native/Flutter), desktop, CLI, or games — for accessibility barriers or WCAG 2.2 conformance, before shipping UI changes, or in response to concerns about screen-reader, keyboard, low-vision, motor, cognitive, or photosensitive users. Not for general bug hunting or code correctness.
App Store screenshot design, theming, and generation skill with three workflows: (A) Template-based: browse templates, apply to screenshots, optionally enhance with Gemini AI. (B) Gallery mode: multi-screen coordinated sets from gallery templates. (C) Themed: apply visual themes (AI-generated ThemeDesign) on top of templates. Use this skill when: (1) User asks to "create App Store screenshots", "design screenshots", or "enhance screenshot" (2) User mentions "templates", "app-shots", "screenshot marketing", "compose screenshots" (3) User wants to browse/preview/apply screenshot templates or gallery templates (4) User wants to apply visual themes (cartoon, luxury, space, zen, neon, etc.) to screenshots (5) User asks about "ThemeDesign", "theme design", "apply theme", or "gallery templates".
Assess and reduce cognitive load in interfaces, flows, and content. Use when designing or reviewing any multi-step process, complex form, dashboard, decision flow, or information-dense screen. Triggers on: cognitive load, too complex, overwhelmed, too many steps, decision fatigue, confusing, information overload, simplify this flow. Applies to any interface where users must think, decide, or remember.
Creates and launches PostHog surveys through MCP, including NPS/CSAT popovers, hosted feedback forms, and headless surveys. Guides survey type selection, audience targeting, draft review, and launch readiness. Use when asked to create a survey or form, or before calling survey-create. For investigating an existing survey's delivery or responses, use debugging-surveys instead.
The judgment layer SSOT for data visualization — load it before drawing any chart, dashboard, or board, not after. It governs "whether it should be drawn this way": what conclusion the chart wants the reader to reach, mean or median, whether aggregation is allowed, stacked or line, whether a dual axis is acceptable, color scheme and number of colors, whether the same entity keeps the same color and position across charts, and how many columns a table should keep. Medium-agnostic: it applies to HTML report pages, React/Vue dashboards, native PPT charts, matplotlib/plotly/ECharts/D3, and charts rendered to PNG alike. Use before drawing charts, or when reviewing existing charts ("what's wrong with these charts", "why are the legends inconsistent"). Not for report page layout/components/interaction (use report-with-html:report-with-html) or the implementation and rendering pitfalls of native PPT charts (use deck-creator:deck-creator).
Design or build a page, screen, landing page, website, app or UI from a request — the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a website", "design the onboarding", "ออกแบบหน้าเว็บ", "ทำหน้า landing", "ออกแบบ UI", "ทำแอป". It runs the pipeline no single skill covers: the house doctrine, a written Brief Inference so the result is not the statistical mean, a committed visual direction, tokens, build, the objective gates, then an adversarial critic. Hands off to data-dashboard for dense data screens, redesign for existing UI, and image-to-code when a reference image is given.
Reduce friction and effort in an offer to increase its perceived value. Use when users feel overwhelmed, drop-off is high, or the offer feels too complex. Maps friction points, removes unnecessary steps, adds templates, and suggests automation and done-for-you elements.
Use when the user wants to optimize any form that is NOT signup/registration—including lead capture forms, contact forms, demo request forms, application forms, survey forms, or checkout forms. Also use when the user mentions “form optimization,” “lead form conversions,” “form friction,” “form fields,” “form completion rate,” “contact form,” “nobody fills out our form,” “form abandonment,” “too many fields,” “demo request form,” or “lead form isn't converting.” Use this for any non-signup form that captures information. For signup/registration forms, see signup-flow-cro. For popups containing forms, see popup-cro.
Guide the agent on creating visually distinctive, polished Vaadin 25 interfaces that go beyond default theme styling. This skill should be used when the user asks to "make it look good", "improve the design", "style the view", "make it visually appealing", "add polish", "design a UI", "create a beautiful interface", or when building a new view where visual quality matters. Also trigger when the user wants to add animations, visual effects, or build polished component compositions in a Vaadin application.
Symfony UX LiveComponent for reactive server-rendered UI -- components that re-render via AJAX on user interaction, zero JavaScript required. Use when building live search, real-time filtering, dynamic forms, inline validation, dependent selects, auto-save, polling, deferred/lazy rendering, or any UI that updates itself based on user input. Code triggers: AsLiveComponent, LiveProp, LiveAction, data-model, data-loading, data-live-action-url, ComponentWithFormTrait, LiveListener, emit, defer, lazy, polling. Also trigger when the user asks "how to build a search that filters as I type", "how to validate a form in real-time", "how to make a reactive component in PHP", "how to build dependent selects", "how to defer component rendering", "how to communicate between components via emit", "how to bind a form to a LiveComponent". Do NOT trigger for static reusable UI without reactivity (use twig-component), pure client-side JS behavior (use stimulus), or page-level navigation (use turbo).
Use when the user says 'migrate beaver builder to gutenberg', 'convert beaver builder to blocks', or 'move beaver builder to the block editor'. Reads the Beaver Builder flat node map, maps modules to core blocks, and creates draft duplicates for review.
Use when the user says 'migrate elementor to breakdance', 'convert elementor to breakdance', or 'rebuild elementor pages in breakdance'. Maps Elementor widgets to Breakdance elements and creates draft duplicates for review.
Use when the user says 'migrate elementor to bricks', 'convert elementor to bricks', or 'move my site from elementor to bricks'. Reads the Elementor JSON widget data, maps each widget to its Bricks equivalent, and creates draft duplicates with clean Bricks JSON.
Use when the user says 'migrate oxygen to breakdance', 'convert oxygen to breakdance', or 'replace oxygen with breakdance'. Maps Oxygen Builder component trees to Breakdance elements and creates draft duplicates for review.
Use when the user says 'migrate thrive architect to gutenberg', 'convert thrive to blocks', or 'replace thrive architect with native wordpress'. Parses Thrive Architect content, maps elements to core blocks, and creates draft duplicates for review.
Use when the user says 'migrate wpbakery to gutenberg', 'remove wpbakery', 'get rid of visual composer', or 'decommission wpbakery'. Parses WPBakery shortcodes, maps elements to core blocks, and creates draft duplicates for review.
Plan a round of user interviews conducted by PostHog''s AI voice agent (a "robo interviewer") — the automated voice-agent interview product. Captures a UserInterviewTopic (who to target, what to ask, framing context, question list) and calls user-interview-topics-create. ONLY trigger when the user clearly wants an AI voice agent to actually run the interview calls (e.g. "set up robo user interviews", "have the voice agent interview these users"). Do NOT trigger for ordinary user research that does not involve the voice agent — finding or shortlisting users to talk to ("who''d be a good fit to interview about Y"), planning questions for a human-run interview, or analysing feedback are audience discovery, handled with normal data queries, not this skill. Also do NOT trigger for uploading a recorded interview audio file or browsing topics with user-interview-topics-list. When intent is ambiguous, first confirm what kind of research it is and whether they want an AI voice agent to conduct it (see Step 0).
Design and build client-ready websites and mobile web apps in a working studio's proven house style, shown throughout on two fictional brands (AURA Heights, The Assembly): tinted grounds, editorial typography, obsessive specificity, and proof over promise. Carries the full working loop (brief, design contract, build, review gate, multi-lens audit, ship), two verified token systems, signature component patterns, proof-driven copywriting, real-photography rules, and a mobile web-app playbook (density budget, bottom tab bar, compaction). Trigger on "make it look expensive", "make it beautiful", "high end design", "client ready", "on brand professional", "use the prom design style", "design this landing page", "make it more like an app", "too much scrolling", "add real images", "the site looks cheap", "too generic", "ai slop". Not for inventing a fresh visual direction from a blank brief: this skill applies ONE proven aesthetic.
Produces the reader-facing HTML artifact — report, dashboard, architecture view, data browser, or review workbench — evidence-backed, browser-verified. Use when the deliverable IS a visual HTML report, or the user asks for an HTML/web presentation. Load data-visualization-discipline for chart judgment. Not for chat status or Markdown prose unless asked to become a report; not for PowerPoint (deck-creator Route C).
Master UI design skill for generating design systems, canvases, prototypes, critiques, and handoff packages. Use for /skema web, mobile, system, landing, review, import, redraw, and migrate, or when the user asks to design, redesign, build UI, create prototypes, extract systems, critique, or hand off frontend design work.
Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.
World-class UI design expertise combining the precision of Jony Ive's Apple work, the systems thinking of Figma's design philosophy, and the accessibility obsession of Inclusive Design principles. UI design is the craft of making interfaces that users don't notice - because they just work. Great UI isn't about making things pretty. It's about making the right thing obvious and the wrong thing impossible. Every pixel, every animation, every spacing decision either helps the user or hurts them. The best UI designers are invisible - users accomplish their goals without ever thinking about the interface. Use when "ui design, visual design, interface design, component, design system, figma, sketch, color, typography, spacing, layout, animation, motion, responsive, mobile design, button, form design, card, modal, navigation, icon, ui, design, visual, interface, components, design-system, figma, accessibility" mentioned.
Entry-point assistant for academic figure generation. Use this skill whenever the user wants to generate academic figures, paper diagrams, or architecture visualizations — including "帮我画图", "从仓库到配图走一遍", "完整论文配图工作流", "帮我分析这个仓库然后出图", or any end-to-end request from code/paper to figure. The assistant analyzes the input, presents a Figure Plan for user confirmation, then generates colors, prompts, and (when an image model is available) the final image. Routes repo-first (code) or paper-first (document/PDF) inputs.
Plan figures for an academic paper or document — map sections to figure types, count, priority, and aspect ratios. Use this skill whenever the user provides paper text, a PDF, an outline, section drafts, or asks what figures their paper needs, including "论文需要哪些图", "论文配图规划", "paper figure planning", "which figures should my paper have", "帮我规划配图". Produces a Figure Plan with must/strong/nice priorities and per-figure visual elements.
A design guide that helps you deliberately design palette, typography, and layout—and avoid template-like, AI-looking design—when creating standalone self-contained HTML artifacts (landing pages, static documents and reports, standalone dashboards, demos and games, pre-development UX/UI alternative mockups). Load it before writing HTML/CSS. Enable it for requests to create or compare standalone HTML artifacts such as "make me a landing page", "make this content look nice as a single HTML file", "compare UX alternatives in HTML", or "settle the design"; do not use it for editing in-app components of existing apps (React, Vue, etc.) or for purely backend and logic work.
Define Page Designer page types and component types with regions, attributes, and rendering scripts. Use this skill whenever the user needs to create a new page or component type, configure regions with allowed component constraints, define attribute_definition_groups, debug why a component does not appear in the editor, or fix enum/color attribute pitfalls. Also use when building visual merchandising experiences -- even if they just say 'my component is missing from PD' or 'add a hero banner component'.
Provides comprehensive guidance for Bootstrap Vue 3 component library including Bootstrap components, grid system, utilities, and Vue 3 integration. Use when the user asks about Bootstrap Vue 3, needs to use Bootstrap components in Vue 3, or implement responsive layouts.
Provides comprehensive guidance for Bootstrap Vue 3 component library including Bootstrap components, grid system, utilities, and Vue 3 integration. Use when the user asks about Bootstrap Vue 3, needs to use Bootstrap components in Vue 3, or implement responsive layouts.
Use when building elaborate, multi-component HTML artifacts using modern frontend technologies (React, Tailwind CSS, shadcn/ui). Triggers include requests for complex web artifacts requiring state management, routing, or shadcn/ui components. Not for simple single-file HTML/JSX artifacts — use direct generation for those.
Build or update Figma variable collections (Primitives and Semantic) from component-contracts token files. Use when the user wants to sync their design token definitions into Figma as native variables — e.g. 'build the token library', 'sync tokens to Figma', 'create Figma variables from tokens', 'update the variable collections'. This skill is a PREREQUISITE for cc-figma-component — tokens must exist in Figma before components can be built. Requires the figma-use and figma-generate-library skills.
Write or audit UI copy (buttons, labels, empty states, error messages, tooltips, form text) anywhere in the monorepo. Load it before shipping or reviewing any user-facing text — including when copy is incidental to the task, like a new feature that adds buttons, toasts, dialogs, or validation messages.
World-class creative director for branding, web design, and UI concepts. Use when the user asks for a new design concept, brand identity, website creative direction, UI experience concept, visual identity, or creative strategy for a business, product, or project. Produces detailed, richly described creative concepts — not code or implementations.
Use when the user says 'build a design system for my site', 'extract design tokens', 'capture my brand', or 'build my style guide', or after a rebrand. Reads representative pages, theme files, and media to extract logo, colors, typography, spacing, and components, then writes a visible style-guide page.
Implement a complete closed-loop process for handling web editor to-dos via the Axhub AI Extension (Chrome extension) together with the @axhub/genie CLI. Guide users through installing the extension and detecting connection status, discovering online editor clients, reading user annotations and to-do nodes, exporting context screenshots and images, setting edit status (editing/idle/completed/error four-state lifecycle), completing code changes and writing back the final state. Supports communication stability safeguards such as CLI automatic retries, exponential backoff reconnection, tab visibility awareness, and task state persistence. Use when the user has annotated web modification to-dos via Genie Editor and wants AI to handle them.
Create polished, self-contained HTML slide presentations — no PowerPoint or Keynote needed. Use this skill whenever the user asks for a presentation, slide deck, slides, or one-pager that will be shown in a browser. Also trigger when the user says things like "make it a deck", "turn this into slides", "build a presentation from this content", or "I need something to present". Prefer this over PPTX when the user has not explicitly asked for a .pptx file — HTML decks are more flexible, more visually rich, and easier to iterate on. Always use this skill when the user provides a brand style guide (PDF, URL, or description) alongside a presentation request. Trigger even if the user only says "make me a deck" with no further detail — start with content questions.
Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.
Use when the user says 'migrate beaver builder to bricks', 'convert bb to bricks', or 'replace beaver builder with bricks'. Reads the Beaver Builder flat node map, maps each module to its Bricks element, and creates draft duplicates for review.
Use when the user says 'migrate divi to breakdance', 'convert divi to breakdance', or 'rebuild divi pages in breakdance'. Parses Divi shortcodes, maps modules to Breakdance elements, and creates draft duplicates for review.
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.