Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG. Triggers on: "create an image of", "export as PNG", "save as SVG", "concept to image", "screenshot this HTML". NOT for interactive HTML; use static-web-artifacts-builder.
Pixel-perfect Figma-to-React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via a helper script.
Thin dispatcher / entry point for any Penpot request. Use FIRST on any Penpot task to ensure high_level_overview ran, read the user's intent, and route to exactly one target skill or workflow (build a screen, build a slide deck, build a design system, audit accessibility, audit tokens, migrate from Figma, rename layers, code review, extract DESIGN.md, etc.). Never mutates the canvas. Triggers: 'work on this Penpot file', 'help me with Penpot', 'I want to design/build/audit/migrate in Penpot', 'where do I start', 'which skill should I use', 'route this request', ambiguous Penpot asks.
Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web slides, or create a slide deck for a talk, pitch, or tutorial. Generates single self-contained HTML files with inline CSS/JS.
Playtest and QA Roblox experiences for mobile and tablet. Use for device simulator checks, touch controls, safe areas, thumb zones, text readability, orientation, HUD overlap, first-action friction, and mobile performance verification through Studio MCP.
Run a structured usability audit of any UI against Nielsen's 10 heuristics. Produces a severity-rated, prioritized issue list — each finding tagged with the violated heuristic and a concrete fix. Use when auditing a screen, flow, or component for usability problems, or as a validation step after generating UI.
WeChat article formatting｜Markdown to HTML｜layout themes｜paragraph styles — one-click formatting tool for WeChat official accounts: turn Markdown drafts into HTML that can be pasted into the WeChat backend, with multiple themes, font sizes and paragraph style switching, WYSIWYG. Aimed at WeChat account editors, independent writers and formatting specialists. Triggers: 「排版」「版式」「美化」「格式化」「字号」「段落样式」「换个排版主题」「换个版式」「转 HTML」「弄好看点」「调整格式」. For swapping preset packs/brand packs/full theme color schemes use aws-wechat-article-assets; for multi-step pipelines (write + review + format + images + publish) use aws-wechat-article-main.
Push design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes, and values. Use when the user wants to sync tokens code→Figma: triggers 'import tokens into Figma', 'create Figma variables from my tokens.json / DTCG / Tailwind config', 'sync design tokens to Figma', 'push tokens to Figma'. Non-destructively matches existing variables (by saved id/key/name) so re-imports update instead of duplicating. Works on ANY Figma plan. For the reverse (Figma → code) use figma-export-tokens.
Create, update, rename, delete, and organize Figma variables, collections, and modes — including fast batch create/update, setting scopes, code syntax, and adding theme modes. Use for incremental variable work: triggers 'create a variable', 'batch update variables', 'add a dark mode to my collection', 'rename this variable', 'set variable scopes', 'delete a variable/collection', 'add a mode'. Works on ANY Figma plan. For a from-scratch system use figma-setup-design-tokens; for code↔Figma sync use figma-import-tokens / figma-export-tokens.
Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.
Convert raster images (photos, paintings, illustrations, line art) into SVG vector reproductions. Use when the user uploads an image and asks to reproduce, vectorize, trace, or convert it to SVG. Also use when asked to decompose an image into shapes, create an SVG version of a picture, or faithfully reproduce artwork as vector graphics. Handles graphic/line-art inputs (Kandinsky, architectural drawings, ink work) via a compositional pipeline that extracts lines as SVG strokes. Do NOT use for creating original SVG illustrations from text descriptions — only for converting existing raster images.
Load this skill whenever the project uses Mermaid diagrams — flowcharts, sequence diagrams, class diagrams, Gantt charts, or any Mermaid-rendered visualization. Under no circumstances render a Mermaid diagram without an accessible title, description, and text-based alternative. Absolutely always add accTitle: and accDescr: (no %% prefix — that is the comment syntax and will be silently ignored) to every diagram.
Turn a thesis, proposition, trend, question, or explainer topic into a citation-backed, image-rich, interactive website and deploy it with Vercel CLI. Use when the user asks to research a claim deeply, generate visuals, build a shareable web experience, publish a microsite, create an interactive story/report, or deploy a researched site to Vercel.
Change how the Rerun viewer looks by writing a blueprint, for a recording or for a table. Read this whenever asked to change the look of the viewer, such as laying out a recording or dataset, designing a default blueprint, deciding which views show which entities, or making a segment or catalog table look nice by hiding columns, changing column order or filtering rows. Covers archetype-to-view mapping, layout reasoning, the rrb construction API, the contents grammar, table blueprints, and the screenshot loop.
Create comprehensive design systems, brand identities, and UI component libraries. Use when the user says "create design system", "build brand identity", "design UI components", "generate design tokens", "create figma specs", "review my design", "analyze design trends", "audit accessibility", "convert design to code", or "create presentation deck". Covers 10 specialized roles from system architecture to executive presentations.
Helps PostHog engineers and agents pick the right chart when a request is about visualizing change over time, before/after comparisons, or period-over-period movement while building UI with @posthog/quill-charts (dashboards, reports, the mcp_analytics frontend, custom visualizations). Use when a user asks how something "changed", "moved", "grew", "dropped", "improved", or "regressed" between two points or periods, or mentions "before/after", "period over period", "week over week", "delta", "slope graph", "slopegraph", or comparing many series across two snapshots. Surfaces both the `SlopeChart` quill component and the native `ChartDisplayType.SlopeGraph` insight display as options.
Generate on-brand marketing images via Codex's built-in image_generation tool. Trigger when user asks to: (a) create marketing assets (ad / logo / slide / product-mockup / scene / lighting-transform / LinkedIn-or-social carousel) for a specific brand, (b) extract or build a brand profile (DESIGN.md) from URL / Tailwind config / tokens.json / Figma Variables / CSS custom props / description / existing brand asset, (c) maintain on-brand consistency across multiple image jobs for the same brand. Do NOT trigger for: UI code generation, frontend reference imagery (use imagegen-frontend-web instead), video generation, or general image editing without brand context. RUNTIME: Requires OpenAI `image_generation` tool (gpt-image-2 via Responses API). Native to Codex (CLI / App / web). Claude Code users need an MCP server that exposes image generation. If the tool is unavailable, this skill HARD-STOPS with remediation guidance — it does NOT fall back to HTML/CSS/Canvas rendering.
Audits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS, Windows, and Linux, covering Semantics labels and screen reader output under VoiceOver and TalkBack, touch target sizes, dragging alternatives, focus order and keyboard navigation, color contrast, text scaling, animation gating on disableAnimations, and form autofillHints, including the test suite that locks every fix in. Use when building, auditing, or reviewing Flutter widgets for accessibility on one or several of those platforms.
Install, customize, switch, verify, or restore a full adaptive theme for the Codex desktop app on macOS or Windows. Use when the user wants a Codex theme beyond official color settings, wants to turn a personal image into a full-window Codex wallpaper with adaptive readability, needs the skin reapplied after a Codex update, wants to switch saved themes from the menu bar or tray, or needs a safe rollback without modifying the official app or app.asar.
Generate accessible color palettes: OKLCH shade scales (50-950), tinted neutrals, semantic colors, WCAG contrast checks, dark-mode color remaps, gradients, and CSS/Tailwind color output. Use when the task is ONLY about color. Trigger phrases: "color palette", "color scheme", "generate colors", "shade scale", "color tokens", "color system", "accessible colors", "contrast ratio", "semantic colors", "palette from hex". For logo + fonts + guidelines use brand-identity; for full token/component systems (spacing, radius, components) use design-system; for complete dark themes use dark-mode.
Reverse-engineering a Sketch file (or Figma export with similar shape) into pixel-perfect React + CSS — the iteration mental model, tree reconstruction, layout inference algorithms, geometry math, visual-regression diffing, and the style/typography/path conversions that make "improvement without regression" enforceable. Trigger even if the user doesn't explicitly mention "algorithms" but is converting a design source into web code, building a design-to-code pipeline, or struggling to make incremental fidelity improvements without breaking previously-converted output.
Expert knowledge for environment art in games - modular design, visual hierarchy, color scripting, environmental storytelling, optimization, and world-building. From blockout to final art pass, creating immersive, performant, and readable spaces. Use when "environment art, level art, world art, modular kit, kit-bashing, set dressing, prop placement, biome design, visual hierarchy, color script, hero prop, trim sheet, environment composition, skybox, atmosphere, environment, level-art, world-building, modular, kit-bashing, set-dressing, visual-design, game-art, composition, optimization" mentioned.
Library reference for @expo/ui SwiftUI components on iOS — covers Host boundaries, modifier composition, iOS 26 Liquid Glass and Human Interface Guidelines composition rules, layout/input/navigation/display catalogues, and ObservableState patterns. Use this skill whenever writing or reviewing React Native code that imports from @expo/ui/swift-ui or @expo/ui/swift-ui/modifiers — including new Expo apps adopting native SwiftUI views, migrations from React Native primitives to expo-ui, and code targeting iOS 26 features (Liquid Glass, GlassEffectContainer, sheet detents). Trigger even if the user does not explicitly mention "expo-ui" but is writing iOS-targeted Expo UI code that should bridge to SwiftUI.
Feishu instant messaging, group chats and interactive cards: sending, replying, forwarding, urgent, recalling, resource download, chat history and threads, Reaction/Pin, member management and event subscription. Used to build or preview Card JSON 2.0, templates and card references, and also supports brand promotion and themed cards. Handles only IM messages and their resources; for cross-session keyword search use feishu-cli-platform. Explicitly not for mailbox email, video meeting recordings, Minutes or transcripts and their media downloads — use feishu-cli-mail and feishu-cli-meetings respectively.
A terminology layer for the web and mobile H5: turns imprecise interface descriptions into a precise request that can be sent directly to an Agent, and identifies the term the user described but could not name. Applies to every turn of the conversation, at any stage: whenever the user casually describes the appearance, interaction, state, motion, feel, or a problem with a web page or H5 ("changes color on hover", "clicking does nothing", "the black bar at the bottom covers the button", "the page still scrolls under the popup", "the keyboard covers the input", "truncate the long content", "looks a bit tacky", "too cramped", "when there’s no data", "the page jumps down after the image loads", "looks wrong when opened in WeChat", "this H5 looks strange on desktop"), use this Skill: complete the requested task as usual, then naturally mention the relevant term in the progress update or result, give a plain-language explanation, and note its most common pitfall. Includes 142 local terminology entries across five volumes (web · h5 · motion · mp · base), covering layout, interaction, state, components, forms, motion, visual feel, accessibility, performance, container platforms, mini programs, and frontend fundamentals. No network dependency. Use `scripts/term.mjs find` to search by the user's exact words—the search key is how users describe the issue, not what it is called, because not knowing the name is the problem to solve. Three strict rules: every term given must be tied to specific words in the user's current turn; if you cannot point to them, leave it out rather than forcing it. H5 pitfalls come in pairs: terms paired in the `pairs` entries must be mentioned together (sticky-to-bottom ↔ safe area, overlay ↔ scroll lock, input ↔ keyboard lift, image ↔ aspect-ratio placeholder); mentioning only one leaves a trap. Always deliver the task result before adding terminology, with at most 1–3 terms; do not teach when the user's wording is already precise. Also use for the reverse case, when the user does not understand something an Agent or colleague said ("they said to use optimistic updates and error rollback", "they said there’s a CLS issue here"): choose the concept most relevant to the next decision, explain what it means in this task and one boundary it is easy to confuse. Optionally produce `.finesse/lexicon.md`, a terminology alignment sheet for the project to prevent the same component from having three different names in requirements, code, and communication. Supports action commands (say · name · explain · check · align · list). Triggers: "say it more professionally", "how do I phrase this accurately", "turn this into a request I can send to an Agent", "what is this called", "the professional term", "terminology", "I don't understand what they mean", "H5", "mobile", "on a phone", "responsive", "safe area", "sticky-to-bottom", "popup", "skeleton screen", "empty state", "accessibility", "terminology alignment", "/term".
Use this skill to diagnose and fix Jetpack Compose Modifier ordering bugs — wrong paint region for background, wrong click area for clickable, wrong clipping for clip, wrong measurement for padding/size, surprising graphicsLayer scope. Covers the wrap-the-next-modifier mental model, the canonical pitfalls (padding vs background, clickable placement, clip before background, graphicsLayer placement), and why hoisting an entire Modifier chain via remember { Modifier.… } is rarely a real perf win because Compose already interns identical chains. Use when the developer asks "why does the click area extend past the visible button", "why is my background painted in the wrong place", "does Modifier order matter", "should I cache my Modifier chain", or reviews a diff that reorders modifiers.
Translate an existing application page, view, or component code into a Penpot screen that is bound to the existing design system — mapping code styles onto semantic tokens and reusing library components instead of raw shapes. Use when the user has real code/markup and wants it reconstructed in Penpot, section by section, on-system. Triggers: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.
Create animated logo files (Lottie JSON, GIF, MP4) from static logo images. This skill should be used when users provide a logo image (PNG/SVG/JPG) and request any kind of logo animation, motion graphics, animated logo effect, waveform animation, bouncing logo, rotating logo, pulsing logo, wiggling logo, or ask to "animate my logo" or "make my logo move". Outputs standalone animation files (not React/HTML artifacts). Generates Lottie JSON with automatic GIF/MP4 rendering, perfect loop validation, and professional motion design patterns.
Manages zard/ui components and projects — adding, composing, styling, and debugging Angular UI built on TailwindCSS v4. Provides project context, component source, and the real API instead of a remembered one. Applies when working with zard/ui, zard-cli, the zard registry, or any project with a components.json that declares a zard projectType. Also triggers for "zard-cli init", "add a zard component", or "set up zard/ui in an Nx workspace".
Turns plain-language chart design requests into exact Bklit UI (@bklit shadcn registry) components and props, styled to fit the host app. Use when someone describes how a chart should look rather than naming props, e.g. "diagonal pattern background that fades out", "squircle bars", "3D glass bars", "hatched area", "dot grid", "skeleton loading state", "dashed forecast", "half donut", "make the charts match my brand / dark mode / border radius". Detects the project's Tailwind version, colour format, dark-mode strategy, radius, and existing chart tokens, then picks a proven recipe, installs the right @bklit/<item>, adapts colours to theme tokens, and states honestly when Bklit has no prop for the request. Also use when theming or restyling Bklit charts.
Workflow for building and modifying content management systems across WordPress, Shopify, Wix, Squarespace, Drupal, WooCommerce, Joomla, HubSpot CMS Hub, Webflow, Adobe Experience Manager, and similar platforms. Use when working on CMS themes, plugins, apps, modules, admin panels, media uploads, content models, editors, markdown pipelines, or static export workflows.
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
Centralized help URL reference for accessibility remediation. Maps axe-core rule IDs to Accessibility Insights info-examples pages, document rule IDs to Microsoft Office and Adobe PDF help pages, and WCAG criteria to W3C Understanding documents. Use when generating CSV exports, markdown reports, or any output that links findings to external remediation documentation.
Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.
(NS) Security/compat/a11y + Vercel Web Interface Guidelines. Use when hardening security, fixing CSP/CORS/headers, reviewing UI / checking a11y / auditing UX, or Web Interface Guidelines — even without saying "best practices"; also ns-proto-creator close-out. Do NOT use for MR/SOLID (ns-reviewer), visual redesign (ns-frontend-design), or features (ns-coder / ns-spec-driven).
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.