Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Turn a local video into metadata, transcript, and an AI-composed card-based video where the agent freely designs and writes HTML cards in conversation. Use when the user asks for VTake, vtake-cut, video takeaways, transcript cleanup, or AI-composed video repurposing.
Designs user interfaces with clear information hierarchy, intuitive interaction patterns, and accessibility-first layouts. Use when creating wireframes, evaluating UX flows, auditing visual hierarchy, designing responsive layouts, or improving usability of existing Loom interfaces.
Define a distinctive, implementable visual direction for websites and web apps. Use when an agent must establish or repair art direction, typography, color, composition, imagery, density, motion, or the first-screen impression before substantial frontend implementation.
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when "3D website, three.js, WebGL, react three fiber, 3D experience, spline, product configurator, " mentioned.
Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for a11y issues, or create an accessibility remediation plan. Produces a prioritised checklist with pass/fail assessments and specific fixes.
Design patterns for chat interfaces, agent UX, streaming UI, and tool visualization. Covers chat architecture, message types, streaming rendering, tool execution cards, and sandbox UI derived from 21st.dev Agents SDK documentation and templates.
Clarify, create, review or change product, service and office workflow requirements, PRDs and interactive prototypes. Use for vague goals, process improvements, spreadsheet/form rules, small UI edits and changes to existing systems, even without the word requirement. 中文：产品、服务及办公流程的需求判断、深挖澄清、PRD、原型、变更与验收；一句话想法、表单/表格规则和微小改动也适用。明确的纯翻译、排版、抄录或既定步骤执行由对应工具直接处理。
Use when you need Apple's accessibility / inclusive-design bar (VoiceOver, Dynamic Type reflow, Reduce Motion/Transparency, contrast, 44pt targets, WCAG 2.2 AA) or its marketing / persuasion / brand tactics (whitespace as luxury signal, product-as-hero photography, the confident benefit-led copy voice, pricing presentation & anchoring, the one-idea-per-section reveal cadence). Part of the apple-design family. Keywords: accessibility, a11y, VoiceOver, dynamic type, reduce motion, prefers-reduced-motion, reduce transparency, prefers-contrast, focus-visible, WCAG, inclusive design, curb-cut, marketing, brand, copywriting, persuasion, whitespace, pricing anchoring, product photography, hero headline, reveal cadence, keynote.
UIKit iOS/iPadOS UI framework. UIViewController, UINavigationController, UITabBarController, UISplitViewController, UIView, UILabel, UIButton, UITextField, UIScrollView, UIStackView, UITableView, UICollectionView, diffable data source, NSDiffableDataSourceSnapshot, UICollectionViewCompositionalLayout, Auto Layout, NSLayoutConstraint, NSLayoutAnchor, UILayoutGuide, intrinsicContentSize. UIArrangementViewController, UISplitArrangement, UIOverlayArrangement, UIView.ReservedRegion, UIHingeInteraction, vertical bar, iPhone Duo adaptive layout (iOS 27.1+), migration to the scene-based life cycle, UISceneAccessory. A separate API from SwiftUI ArrangementView.
AutoCAD drafting via the autocad-mcp MCP server (8 tools: drawing, entity, layer, block, annotation, pid, view, system). Use when creating or modifying AutoCAD drawings, site plans, P&ID diagrams, equipment layouts, or any CAD automation through the autocad-mcp tools. Covers both File IPC (live AutoCAD LT) and ezdxf (headless DXF) backends. Essential for avoiding common pitfalls: parallel tool call races, LISP timeouts, dialog traps, and batch sizing. Use this skill whenever autocad-mcp tools are invoked.
Hero-section pipeline for building Awwwards/FWA-tier hero sections. Extracts design direction from reference images, provides six hero architectures with implementation blueprints, and enforces the fundamentals that separate award-winning heroes from generic AI output - viewport-scale typography, single focal point, extreme whitespace, tight palette. Hero-only. Pair with other skills for full pages.
Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 10 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".
This skill should be used when the user asks "how do I customize Bootstrap", "how to create a custom Bootstrap theme", "what Sass variables can I override", "how to implement dark mode in Bootstrap", "how to change Bootstrap colors", "how to override Bootstrap defaults", "how to add custom colors to Bootstrap", "how to enable Bootstrap shadows", "how to compile Bootstrap Sass", "how to use Bootstrap CSS variables", or needs help with Bootstrap theming, Sass variable overrides, CSS custom properties, or color mode implementation.
Brand onboarding setup skill. Captures a client's visual identity, content patterns, audience, and goals through evidence capture + pre-filled client doc + structured intake. Writes context/brand-style.md as the foundation for all social skills. Run once per client before using /social-creative-designer, /content-calendar, or /caption-writer.
Author the React + Quill implementation of a PostHog canvas: the single-component contract, the allowed imports, Quill (PostHog's design system) component and composition rules, theme-aware design tokens, loading skeletons, and the in-canvas date picker. Use after building-canvases has routed a canvas request to a React implementation — dashboards, data boards, forms, tools, or any canvas that should look native to PostHog.
Writes and reviews composables for Compose and CMP: the Route/Screen/leaf split, state-read placement and stability, loading/empty/error UX states, LazyColumn lists and grids, animation choice, accessibility and semantics, design-system tokens, CMP Res resources, Coil images, and keyboard/focus. Use when touching @Composable code, recomposition, stability, LazyColumn, animation, shimmer or skeleton, accessibility, theme, colors, Res.string, Coil, focus, or keyboard. Do NOT use for MVI, error tiers, or module graph (compose-architecture), ViewModel or data work (compose-feature, compose-data), Gradle or module work (compose-project), or expect/actual splits (compose-platform).
Inspect, capture, create, and refine graphics in an open Singular Composer session, including composition elements, control nodes, layouts, timeline animations, and composition scripts. Use when AI needs to control Composer, verify graphics and runtime behavior, or respond to generate improvement handoff with retrospective feedback on user corrections; the retrospective requires no paired session.
Compose PostHog grid canvases — widget grids (including the user's home canvas) built from reusable component canvases. Use when a task asks to add, fill, move, resize, or remove a widget on a grid or home canvas, to compose a whole canvas of widgets from one ask, to build a reusable widget/component, or when a placement id or grid canvas id is the target. Covers the component store search → configure → fork → build ladder, the component placement contract (size, configSchema), the placement lifecycle (pending/generating/live/failed), the guarded layout patch loop, and reading the canvas's comment threads.
Create dimensioned 3D CAD parts from natural-language requirements and export validated STEP, STP, or STL files with OpenCAD. Use when a user asks an AI agent to model a mechanical part, make a printable STL, create an editable STEP file, convert a dimensional description into CAD, or revise a previously generated OpenCAD model.
Author or edit a Datex Studio Custom Angular Component (CAC, configurationTypeId=36) on a branch via the `dxs ng` command family — a screenshot-driven create → edit-regions → preview → push loop for bespoke Angular UI (charts, dashboards, custom widgets).
This skill should be used when the user asks to "create a deck", "make a presentation", "build slides", "pitch deck", "investor deck", "sales presentation", "design a deck", "interactive presentation", "presenter mode", "HTML slides", "video background deck", "deck playground", "visual deck editor", "deck builder UI", "publish deck link", or needs to generate a complete deck with minimal friction. Handles low-question discovery, early Deck Creator UI launch, theme selection, copywriting, parallel slide generation, PDF stitching, optional HTML presenter, and publishing workflows.
Transform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD into design requirements. Produces a brief with user goal, emotional context, success criteria, constraints, edge cases, and out-of-scope boundaries.
Generate product prototypes / page-flow wireframes in two forms: mobile (App) and PC (desktop web). Use when the user wants product prototypes, wireframes, page-flow diagrams, interaction flows, App prototypes, admin/management system prototypes, or to lay out multiple pages and annotate click flows with arrows. Output is a single HTML file: mobile uses iOS standard dimensions (375×812) with Apple HIG font sizes, PC uses desktop dimensions (1440×900) with denser web font sizes; both are minimal black-and-white-gray wireframe styles, with a built-in annotation system and full-page screenshot export.
Runs a pre-handoff QA checklist on a Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, or validate a Figma file is ready to build. Produces a structured QA report covering file hygiene, component usage, accessibility, and handoff readiness with explicit pass/fail status per item. Optimised for Opus 4.7 and newer models.
Translate Figma design properties and structures into IDS (Iress Design System) component implementations. Use when the user provides Figma designs, mentions Figma MCP, asks to convert a design to code, or references Figma component names, variants, or auto-layout properties.
Router for web form development. Use when creating forms, handling validation, user input, or data entry across React, Vue, or vanilla JavaScript. Routes to 7 specialized skills for accessibility, validation, security, UX patterns, and framework-specific implementations. Start here for form projects.
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
Create distinctive, production-grade, high-quality frontend interfaces. Use this skill when the user asks to build web components, pages, works, posters, or applications (for example websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling any web UI). Generate creative, polished code and UI design, avoiding generic AI aesthetics.
Designs and troubleshoots responsive Godot 4.x Control interfaces using anchors, containers, themes, focus navigation, keyboard and controller input, localization-safe sizing, and accessibility practices. Use when requests mention menus, HUDs, forms, responsive layouts, Control nodes, themes, focus, UI input, or accessible interaction.
Use when designing or reviewing a user-facing GUI and the goal is to reduce first-use cognitive load, clarify the primary path, improve discoverability and feedback, prevent errors, ensure accessibility, and ground decisions in established HCI and usability theory.
HTML PPT refined presentation designer - turns user content into polished HTML presentation pages, with LLM-driven design as the priority and support for multiple visual styles, motion design, and a color cognition system. Trigger words: PPT, presentation, HTML slides, slide, presentation, make a PPT, create a presentation.
Prevent bloated text scaffolds in new web pages. Use when creating or refactoring landing pages, SaaS pages, dashboards, marketing sections, UI copy, placeholders, labels, eyebrow text, or feature cards. Remove generic labels unless explicitly requested. Do NOT use for prose-only articles, legal copy, or exact client-provided copy.
Generate images via multiple mechanisms. Supports: (1) End-to-end AI generation via Gemini/ZenMux — given a prompt, directly output an image. (2) Code-based rendering — generate HTML/React single-file, render to PNG via Playwright. (3) Prompt engineering — generate optimized prompts for external models (nano-banana-pro, etc.). Trigger words: image, generate image, 生图, render, poster, 海报, banner, card, 卡片
Research-driven UI/UX improvement using Mobbin. Use when user explicitly requests design pattern research ("use Mobbin", "research design patterns", "find UX patterns for X"). Requires Mobbin account and browser automation (claude-in-chrome MCP). Searches Mobbin for relevant UI patterns, extracts design principles, generates a spec document for approval, then implements. NOT for general UI work—only when user wants research-backed design.
Generate and edit high-quality images using Google's Nano Banana Pro (Gemini 3 Pro Image) AI model. Use this skill when working with AI image generation or editing tasks including (1) Creating images from text prompts with professional quality, (2) Editing existing images with natural language instructions, (3) Multi-turn iterative image refinement, (4) Product photography and marketing visuals, (5) Creating infographics and diagrams with text, (6) Photorealistic and artistic image generation, (7) Batch image generation workflows, (8) Testing and troubleshooting Gemini image generation API. Supports up to 4K resolution, multiple aspect ratios, reference images, and advanced prompting techniques for cinema-quality results.
Generate covers for Xiaohongshu and Bilibili AI tool walkthrough videos, with script mode and autonomous Agent mode, real video evidence, three aspect-ratio outputs, and an optional creator avatar. Trigger only when the user explicitly mentions oil-cover, $oil-cover, uses oil-cover, or names this Skill; do not auto-trigger for ordinary cover, thumbnail, or video cover requests.
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," or "new user experience." For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence.
Create stunning, animation-rich HTML presentations from scratch or convert PowerPoint files (.ppt/.pptx) to beautiful web slides. Use when the user wants to build a pitch deck, presentation, slideshow, or slide deck — or convert an existing PPT to a web presentation. Generates zero-dependency single HTML files with keyboard/touch navigation and scroll-triggered animations. Style options include Neon Cyber, Bold Signal, Swiss Modern, Paper & Ink, and 8 more curated presets.
Platform-specific building systems for mobile, VR, and accessibility. Use when implementing touch controls for building games, VR spatial input, colorblind-friendly feedback, or cross-platform building mechanics. Covers input adaptation and inclusive design patterns.
Manage Power BI report pages and bookmarks -- add, remove, configure, and lay out pages in PBIR reports using pbi-cli. Invoke this skill whenever the user mentions "add page", "new page", "delete page", "page layout", "page size", "page background", "hide page", "show page", "drillthrough", "page order", "page visibility", "page settings", "page navigation", "bookmark", "create bookmark", "save bookmark", "delete bookmark", or wants to manage bookmarks that capture page-level state. Also invoke when the user asks about drillthrough configuration or pageBinding.
Main Figma orchestration skill for the UI/UX skill system. Use this skill whenever the user asks to read Figma design context, turn Figma frames into implementation plans or code, sync live UI back to Figma, edit Figma canvas objects, manage variables/components/assets/effects, audit Figma MCP workflows, or coordinate Figma work under $senior-ui-ux-orchestrator. Routes to figma-context-reader, figma-design-to-code-bridge, figma-code-to-canvas, figma-canvas-editor, figma-design-system-sync, figma-assets-manager, figma-apply-effects, and figma-workflow-auditor while enforcing privacy, tool availability, and evidence boundaries.
Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs.
Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup; configure components.json, add components via CLI, theming with CSS only. Use when adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or other shadcn components, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind.
When the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "registration friction," "signup form optimization," "free trial signup," "reduce signup dropoff," or "account creation flow." For post-signup onboarding, see onboarding-cro. For lead capture forms (not account creation), see form-cro.
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.