Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Design presentation slides, infographic pages, and PPT-style visuals as 1600x900 HTML slides with optional PPT export. Use when the agent needs to pick or explain a slide style, recommend styles based on content, generate one or more static HTML slides, support `background_mode` paper or white for compatible light styles, or render finished slides into a high-fidelity image-based PPTX.
Create premium, Awwwards-quality website designs as React (.jsx) components that look like they were built by a top-tier agency charging $50k+ per project. Use this skill whenever the user asks for a website, landing page, portfolio, or web component that should look expensive, premium, luxury, editorial, high-end, or agency-quality. Also trigger when the user mentions Awwwards, FWA, award-winning design, or references brands like Apple, Aesop, Bottega Veneta, Stripe, or any luxury/fashion/design-forward brand. Trigger when the user says things like "make it look professional", "make it look expensive", "I want it to look really good", "high quality design", "not generic", or expresses dissatisfaction with typical AI-generated website aesthetics. Do NOT trigger for dashboards, admin panels, internal tools, or functional UI where aesthetics are secondary to utility — the standard frontend-design skill handles those.
Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype", "break prototype into flows", "Figma specs from code", or wants to make a working prototype legible to non-technical stakeholders. Even if the user just says "put this in Figma" or "make this reviewable" in the context of a prototype, use this skill.
Use this skill when creating QML view files, designing QML component hierarchies, building layouts, styling QML controls, creating reusable QML components, implementing QML navigation / page switching, or working with QML resources. Covers QML file structure, component patterns, Material/Controls styling, resource management, and common QML idioms for desktop applications.
Art direction for websites from live research on regards.design, a hand-picked index of real website sections searchable by look. A fork of tasteskill v2 (MIT, Leonxlnx) that keeps its inventory, idea test, open-collection pictures, real-browser inspector and look-and-fix loop, and replaces the deal of 20 fixed directions with a search of real sections for this one brief. Use it whenever you design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack, and when the user says a page looks generic, templated, "AI-made" or like every other site. Needs the regards.design MCP server for the research step. Not for dashboards or app screens.
Explain the current topic, a status, or a concept as one designed diagram made with the diagram-design skill. Use when the user asks to see it as a diagram or with diagram-design. For a quick view in plain text, use show-me; for a report or decision page to read later, use show-me-artifact.
Design, implement, or review framework-neutral embedded interfaces for SillyTavern rolecards, including message content pages, opening pages, MVU status bars, control centers, drawers, and popups. Use for creative visual design, message-to-page protocols, state-to-display mapping, HTML/CSS/JavaScript, interaction states, responsive behavior, accessibility, safe rendering, optional project-specific frontend sandboxes using real source, and the real-runtime handoff. Do not use as the primary skill to close behavior in a live SillyTavern instance; hand that work to sillytavern-runtime-debug.
Build Slack Block Kit UIs for messages, modals, and Home tabs. Use when creating Slack notifications, interactive forms, bot responses, app dashboards, or any Slack UI. Covers blocks (Section, Actions, Input, Header), elements (Buttons, Selects, Date pickers), composition objects, and the slack-block-builder library.
Turn a post, article, or idea into a complete slide-by-slide carousel script for Instagram or LinkedIn, with a hook cover, one-idea-per-slide content slides, a recap, and a CTA slide. Use when someone says "make a carousel", "carousel about", "slide deck post", or "LinkedIn document post". Every slide ships with its copy plus a design note and an image-generation prompt a designer or image model can execute directly. Instagram feed carousels and LinkedIn document posts follow different size, density, and cover conventions, so the script adapts to the platform chosen. Reads social-context.md for brand voice and audience setup so slides sound like the brand and land with the right readers.
Create 3:4 Xiaohongshu covers using Codex's built-in image_gen, based on the topic, title, portrait or product material, and optional background. Supports extracting cover titles, original style recommendations, font and color selection, subject fidelity, background compositing, decoration notes, and single or multiple variants; no API Key required. Use when the user asks to "make a Xiaohongshu cover", "add a lead image to my post", "make a cover like this image", "put the person into the cover", "make a few cover versions".
Based on an article, tutorial, SOP, checklist or topic provided by the user, use the Codex built-in image_gen model to generate 3:4 Xiaohongshu infographics and image series. Always uses a light AI product infographic style: white or light lavender background, large black headings, purple-blue and lime green accents, rounded cards, linear tech icons, process/comparison/checklist modules; supports single images and 6–9 image series, with no API Key or external image-generation backend required. Triggered when the user says "make Xiaohongshu images", "generate an image series from content", "make a tech-feel infographic", "make an image like this", "generate images with Codex", "make cover and inner-page images" and similar requests.
Generates Spartan/ng UI code and guidance for Angular projects using @spartan-ng/helm (styled components copied into the repo) and @spartan-ng/brain (headless primitives). Covers installation, Tailwind v4 theming, component usage across all categories (forms, overlays, layout, display, data), Brain primitives, ReactiveForms / Signal Forms integration, and accessibility. Use when the user mentions Spartan, spartan-ng, @spartan-ng, hlm-* or brn-* components, OR when the Angular project's package.json contains @spartan-ng/* dependencies. Pairs with angular-developer for Angular fundamentals.
Guide for implementing the Syncfusion WinUI Ribbon control (SfRibbon) to organize application commands into tabs and groups, similar to Microsoft Office. Use this when working with ribbon-based navigation, Quick Access Toolbar (QAT), or backstage menus. This skill covers ribbon setup, tab and group configuration, keyboard navigation (KeyTip), and ScreenTip tooltips.
Use when consolidating, deduping, or reducing the number of CSS custom properties / Tailwind v4 design tokens in a globals.css file. Triggers on requests like "reduce tokens", "standardize design tokens", "too many tokens", "dedupe globals.css", "shrink @theme inline", "collapse similar colors", or any task whose goal is fewer tokens while keeping the same visual result. Covers @theme inline, --color-* aliases, :root/.dark/.dashboard-page blocks, dead-token analysis, value-similar collapse, single-use inlining, and the Tailwind v4 arbitrary-value escape syntax.
Build, validate, or repair Adaptive Card layouts, actions, forms, and delivery wrappers for Microsoft Teams. Use when Teams is the target host, including bot, webhook, Graph, and MessageCard migration tasks. Exclude Windows/custom card hosts and Teams text-only formatting.
Transform a user-uploaded photograph into one horizontal collectible memory card with a large quiet editorial illustration, six integrated journaling-sticker motifs, three small English keywords beneath the left illustration, tactile paper grain, and deliberately clumsy flat color fields. Use when Codex needs to P图, edit, redraw, stylize, or turn a travel, street, landscape, lifestyle, portrait, or pet photo into a minimalist postcard-like card or sticker-card in this visual language. Preserve recognition through one same-medium identification anchor and optionally one exact place-defining landmark text shown once; never retain an unintended photorealistic patch, signature, or watermark.
Create visual parameter tuning panels for iterative adjustment of animations, layouts, colors, typography, physics, or any numeric/visual values. Use when the user asks to "create a tuning panel", "add parameter controls", "build a debug panel", "tweak parameters visually", "fine-tune values", "dial in the settings", or "adjust parameters interactively". Also triggers on mentions of "leva", "dat.GUI", or "tweakpane".
Capture baseline evidence from a live website URL: screenshots, scroll states, hover/click behavior, parallax, timers, and transition recordings. Use when reference artifacts are needed before implementation or comparison; not to build or diagnose a clone.
Create distinctive, production-grade frontend interfaces directly in code with a strong visual point of view. Use when Codex is asked to design or redesign a page, screen, flow, or component; improve UI quality; or ship polished frontend experiences that must feel intentional and non-generic. Default to Next.js unless the user specifies another framework, and use targeted 21st.dev inspiration with screenshot capture only for specific components that need references.
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
Entry-point for the `@mizchi/vlmkit` toolkit — VLM-driven frontend kit covering visual regression (snapshot / diff / regression-watch), markup synthesis from screenshots, design-token / theme / a11y / i18n audits, and a 2-stage VLM + LLM CSS auto-repair loop. Use when a coding agent has edited HTML/CSS and needs to know whether the visible output changed, where it changed, and which CSS properties drove the change — or when the task is markup-from-image / token / theme audit / fix-loop driven by VLM. This skill orients you to the 5 detailed sub-skills (vrt-visual-diff / vrt-migration-eval / vrt-markup-synth / vrt-regression-watch / vrt-css-fix-loop) and the verb-group CLI; pick the matching sub-skill once the task shape is clear.
Accessibility as part of building, not a pass afterwards. Semantic HTML first, keyboard order and focus management, visible focus, names for every control, ARIA only where HTML cannot, live regions, reduced motion, contrast, hit sizes, forms with linked labels and errors, headings and landmarks, inert layers, zoom to 200%, and how to test with a screen reader in five minutes. Use when building any interactive UI, when asked to make something accessible, or when a review needs an accessibility pass.
Design evidence-grounded academic figures and construct, diagnose, or revise scientific image prompts. Use for figure layout, semantic palettes, reference-led styles, prompt engineering, information-density feedback, and FigureSpec v1 compilation.
Generate publication-ready figure prompts for image models (GPT-Image-2, Gemini NanoBanana, etc.) in the classic academic style. Use this skill whenever the user wants a box-border architecture diagram, framework/network/module figure, or JSON figure spec — including "生成框架图", "画架构图", "JSON配图规范", "academic figure prompt", "框架图JSON". Produces a structured JSON spec AND a 200-400 word English image prompt with icons, dimension labels, and panel grouping. For pastel/airy ICLR-style figures, route to academic-figure-prompt-pastel instead.
Generates publication-quality figures for ML papers from research context. Given a paper section or description, extracts system components and relationships to generate architecture diagrams via Gemini. Given experiment results or data, auto-selects chart type and generates data-driven figures via matplotlib/seaborn. Use when creating any figure for a conference paper.
Guide users through creating, designing, signing, distributing, and updating Apple Wallet passes using the PassKit framework. Use this skill whenever the user mentions Wallet passes, .pkpass files, boarding passes, event tickets, store cards, coupons, loyalty cards, membership cards, NFC passes, or anything related to Apple Wallet integration. Also trigger when the user asks about "Add to Wallet" badges, pass signing certificates, pass updates via push notifications, or barcode/NFC-based redemption flows. Even if the user just says "I want to create a digital ticket" or "loyalty card for my app", this skill applies.
Generates infographic image card series with 12 visual styles, 8 layouts, and 3 color palettes. Breaks content into 1-10 cartoon-style image cards optimized for social media engagement. Use when user mentions "小红书图片", "小红书种草", "小绿书", "微信图文", "微信贴图", "image cards", "图片卡片", baoyu-xhs-images, or wants social media infographic series.
Build or adapt a Shopify storefront with Vercel Shop source-backed patterns. Use when creating, redesigning, refactoring, or reviewing storefront routes, commerce data, rendering, caching, streaming, navigation, cart, account, mutations, product cards, media, loading states, or when applying Vercel Shop outside the template
Build, review, or refactor React UI components into shadcn-style compound components. Use when creating composable component APIs, splitting prop-heavy components into named parts, wrapping Radix/Base UI primitives, adding asChild/Slot behavior, designing data-slot styling hooks, or enforcing accessible source-owned component primitives.
Designs and creates Grafana dashboards with gcx, using `gcx dashboards snapshot` as a visual feedback loop. Use to build a new dashboard, add panels, variables, or annotations, or redesign a dashboard. Not for inventory, audit, or pull/push of existing dashboards (use manage-dashboards).
Design and execute customer onboarding that drives activation and retention. Use when building onboarding flows for new users, reducing churn in the first 30 days, improving time-to-value, or creating onboarding sequences (email, in-app, or manual). Covers activation metrics, onboarding step design, friction reduction, and measuring onboarding success. Trigger on "customer onboarding", "onboarding flow", "user onboarding", "reduce early churn", "improve activation", "onboarding sequence", "time to value".
Build virtualized data tables with @virtuoso.dev/data-table. Use this skill when (1) building a data grid with sorting, filtering, or grouped rows, (2) installing the shadcn-styled or headless table, (3) connecting remote/paginated data sources, (4) adding sticky, resizable, reorderable, or hideable columns, (5) persisting table state, (6) controlling a table from outside (scrolling, actions), (7) migrating from TableVirtuoso, or any task involving VirtuosoDataTable, DataTable, DataTableColumn, localModel, remoteModel, or engine refs like scrollToRow$ and dispatchModelAction$.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 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, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples
Implement drag and drop using @atlaskit/pragmatic-drag-and-drop. Use when implementing sortable lists, reorderable items, kanban boards, or any drag-drop interactions. Covers draggable setup, drop targets, edge detection, drag previews, and critical state management patterns to avoid performance issues.
Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a complete annotation set covering interactions, states, spacing, accessibility, and edge cases.
Define component variants and states systematically for Figma. Use when asked to plan component variants, define states for a component, set up a Figma variant matrix, or work out what properties a component needs before building it. Produces a complete variant matrix with all properties, values, and combinations needed.
Audit existing Flutter interfaces for product hierarchy, visual coherence, interaction quality, adaptive behavior, accessibility, and implementation risks. Use when asked to review, critique, diagnose, assess, or prioritize improvements to Flutter screens or flows; remain read-only unless implementation is explicitly requested.
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.