Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, game UIs, landing pages, dashboards, or any visual web interface. Prevents purple-gradient-rounded-corner-Inter-font syndrome.
Use when designing app UI for Apple operating systems—iOS/iPadOS surfaces (sheets, detents, tab bars, large titles, widgets, lock screen, Dynamic Island), macOS (windows, traffic lights, sidebars, menus, vibrancy), visionOS spatial design, watchOS (complications, Digital Crown), or standard UIKit/SwiftUI component anatomy (nav bars, lists, forms, buttons, alerts, search, empty states). Part of the apple-design family. Keywords: iOS design, iPadOS, macOS Tahoe, visionOS, watchOS, spatial, ornament, sheet, presentationDetents, tab bar, navigation bar, large title, sidebar, traffic lights, widget, dynamic island, stage manager, components, SwiftUI, List, Form, button hierarchy, ContentUnavailableView, alert, searchable.
Review Argos visual regression builds as one input to a pull request review. Use when a PR has an Argos build link, an Argos status check, or a bot comment pointing to an Argos build, and you need to decide whether the visual diffs match the developer's intent before approving.
Add, update, or remove Avonni Flow Screen Components inside a Salesforce flow. Use when the user wants Avonni components in a screen flow, when editing flow XML that contains avcmpbuilder extensions, or when creating a new screen flow built around Avonni components. Does not cover general flow logic (decisions, assignments, record operations). Do NOT use when the request spans multiple Avonni artifact types (e.g. the flow plus a dynamic component or portal page that launches it) — use the avonni-architect skill instead.
Integrate Avonni components into the code of an LWC component (HTML, JS, CSS). Covers MCP tool usage, attribute/event/type/slot resolution, styling hooks, and validation — not general LWC creation. Trigger when: user asks to add, use, or style an Avonni component in their code; when writing or editing LWC that references avonni-* tags; when the user mentions a component name that starts with "avonni-".
Build stunning glassmorphism dark-mode interfaces with Next.js and Tailwind CSS v4. Use when creating any frontend UI, component, page, or application. Specializes in glass-like translucent surfaces, luminous color palettes on dark backgrounds, fluid animations with Framer Motion, and premium visual polish. Always generates dark-mode-first, glassmorphic, production-grade code with exceptional aesthetic quality.
Condense a detailed brand description into a usable Brand Kit (brand kit, design system, design tokens, style guide). Generates a short, binding BRAND.md, executable CSS tokens, wordmark SVGs, reference artboards, and a CLAUDE.md that makes the rules take effect automatically. Use this skill as soon as a brand interview exists, when someone wants to turn a long style guide into something workable, or asks why their design system gets ignored in everyday use.
Builds websites, PDFs and AI images from an existing Brand Kit and labels generated images in line with the EU AI Act (brand kit, landing page, PDF, AI images, AI labeling, EU AI Act, higgsfield, gpt image). Integrates the unslop, web-design-guidelines and seo-audit skills and burns in the AI marking via the bundled script. Use this skill as soon as something is to be built with an existing Brand Kit, or someone asks how to label AI images in a legally compliant way.
Check and fix accessibility (a11y) on front-end projects (web and mobile web), including Next.js, React, Vue, Angular. Use when the user asks about accessibility, a11y, WCAG, screen readers, voice control, Voice View, keyboard navigation, focus management, ARIA, semantic HTML, color contrast, or fixing accessibility issues in HTML, React, Next.js, Vue, or other front-end code. For native mobile apps (React Native, iOS, Android), see reference; patterns differ.
Design and build polished web UI in Tailwind v4, or rescue a screen that looks messy, generic, or unfinished. Use when an interface should look gorgeous. Not for page directions (`maquette`), app shells (`armature`), screen sizes (`reflow`), Paper mockups (`paste-up`), or QA (`fieldtest`).
Decomposes underspecified design requests by classifying gaps (missing brand context, visual ambiguity, false premises, scope faults) and generating targeted clarifying questions. Produces a confirmed design brief before any design work begins. For sharpening a design request that already exists; not for open-ended design brief discovery from a vague idea (use /design-for-ai:research).
H3 prompt writing for a co-op two-player game main menu/intro: style and identity locks, first-frame confirmation prompt, and a 15s menu interaction timeline video prompt. Applies to game concept showcase prompts. Not for playable projects or complex multi-page UI specs.
Implement a framework-agnostic version badge component with a tooltip showing build info (version, commit, branch, timestamp) and recent changelog entries. Use when the user wants to add a version display to their app header or footer, surface build information in the UI, expose recent changelog entries as a tooltip, or when they mention "version badge", "build info display", or "commit SHA in UI". Supports Next.js, Nuxt, SvelteKit, Vite+React, and plain React/Vue/Svelte.
Garnish — Craft CMS's built-in JavaScript UI toolkit for the control panel. ALWAYS load when writing, editing, or reviewing JavaScript that runs in the Craft CP — plugin CP assets, custom field type JS, element index JS, CP webpack config, or code importing garnishjs / referencing window.Garnish. Also for CP accessibility, keyboard interactions, drag-sort, and CP JS memory issues.
Create truthful, human-centered marketing campaigns for an app or product, including positioning, channel copy, original artwork, editable layouts, README banners, and selective website integration. Use when asked to make launch materials, promotional artwork, social assets, campaign kits, ads, or marketing content from an existing product; to adapt a visual reference without copying it; or to add approved campaign art to product surfaces. Do not invent claims, fake UI, publish, deploy, or replace product proof without explicit evidence and authorization.
Professional workflow for creating bespoke vector and complex raster icons. Professional icon design workflow including Design (visual), Path (vector), Desire (conceptual), and 3D chroma-key modes. Features AI prompt engineering, automated binarization, alpha cleanup, and SVG optimization.
Convert a business question into a complete dashboard specification. Use when asked to design a dashboard, create a dashboard spec or brief, plan a BI report, or define what charts and metrics a dashboard should include. Produces a structured spec with metrics, dimensions, chart types, filters, and layout guidance.
UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. This skill owns design *rationale*; pixel craft (easing values, contrast ratios, component props) routes to the design-engineering skill.
Genre pack: Swiss-editorial design identity. Warm paper background, ink-black type, one vermillion accent, oversized serif display with monospaced labels, hairline grids, indexed sections, strict asymmetric composition. Use when the brief asks for a calm, editorial, print-inspired, or quietly premium feel. Stack on top of the design-taste core skill.
Review and design empty states, loading states, skeletons, progress indicators, offline states, first-use states, zero-result states, and error recovery for apps, SaaS, games, utilities, and web products. Use when a product surface feels blank, confusing, slow, dead, or when designing resilient UI states beyond the happy path.
Design and author structured technical proposals, responsive artifacts, architecture diagrams, Mermaid charts, and interactive components. Use when creating standalone markdown reports, architectural specifications, Mermaid diagrams, or interactive artifact widgets — even if the user does not explicitly say "fable-artifact" (e.g. "create an artifact", "draw an architecture diagram", "write a technical proposal", "generate a mermaid flowchart"). Do NOT use for quick one-line conversational answers.
Design and generate accessible, cohesive data visualizations, SVG charts, metric cards, and dashboard tiles with theme-adaptive styling and verified viewports. Use when creating SVG charts, rendering metrics plots, designing dashboard visuals, or visualizing performance trends — even if the user does not explicitly say "fable-dataviz" (e.g. "make a chart of this data", "plot these benchmarks", "create an SVG graph", "visualize these metrics"). Do NOT use for non-visual text-only data summaries or generic code edits.
Runs a structured PM design review against product requirements. Use when asked to review a Figma design, check a design against requirements, or assess whether a design meets the product spec. Produces a requirements coverage check, UX concerns, open questions, and an explicit approval status — approved, approved with conditions, or not approved.
Audit Figma MCP, design-to-code, code-to-canvas, canvas-editing, and design-system workflows for correctness, freshness, privacy, evidence, and routing quality. Use this skill when the user asks whether a Figma workflow, skill, task plan, MCP capability claim, or agent handoff is valid, current, safe, or production-ready.
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," or "contact form." For signup/registration forms, see signup-flow-cro. For popups containing forms, see popup-cro.
Create stunning, 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, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Create, configure, and use Frontic blocks, listings, and pages for e-commerce data. Use when working with Frontic configuration, building product/category pages, creating data sources, or integrating the Frontic client. Covers resource decision-making, block/listing creation guidelines, and client usage patterns.
A professional PPT design and production skill that creates polished, professional presentations based on design best practices. Covers core design principles such as typography, color schemes, image handling, and visual hierarchy. Use when users need to create high-quality PPTs, improve an existing PPT design, learn PPT production techniques, or need professional presentations for business pitches, academic reports, creative proposals, and similar scenarios. Can work with the seedream-imagegen skill to generate customized images for PPTs.
This skill should be used when the user asks to "generate an image", "create a banner", "make artwork", "create an illustration", "generate a logo", "make a graphic", "design a header", "AI art", "img2img", "social share image", "OG image", "open graph image", "Twitter card", "hero image", "cover photo", "profile picture", "social media graphic", or needs AI image generation. Handles prompt rewriting and Gemini 3 Pro image generation API calls.
Build visually stunning geospatial demo webapps with MapLibre globe, DuckDB-WASM, and a warm dark HUD aesthetic. Use when building satellite imagery retrieval demos, embedding visualization tools, geospatial search UIs, or any map-centric data exploration frontend. Triggers on requests to scaffold a new geo demo, build a map-based UI, or create a retrieval/search visualization over satellite data.
Huashu Design — Create high-fidelity prototypes, slides, animations, visualizations, and expert reviews with HTML. For any new design, always produce three initial directions for the user to choose from before proceeding (this also applies when a style or brand is specified). Proceed only after a direction is selected. Triggers: create a prototype, PPT, slides, animation, design style, review, make an HTML page, UI mockup, export MP4/GIF, make it look good. Not suitable for production-grade web apps or systems requiring a backend.
Implement integration-ready UI code from a Figma selection or a provided nodeId using TemPad Dev MCP as the only source of design evidence (code snapshot, structure, assets, tokens, codegen config). Detect the target repo stack and conventions first, then translate TemPad Dev's Tailwind-like JSX/Vue IR into project-native code without adding new dependencies. Never guess key styles or measurements. If required evidence is missing/contradictory or assets cannot be handled under repo policy, stop or ship a safe base with explicit warnings and omissions.
Critique and improve landing pages for SaaS, apps, games, utilities, developer tools, marketplaces, and launches. Use when reviewing hero copy, positioning, proof, demos, CTAs, objections, social proof, SEO, conversion analytics, waitlists, product-led growth pages, or campaign landing pages.
Provides comprehensive guidance for Lime ECharts including chart creation, configuration, data visualization, and interactive charts. Use when the user asks about Lime ECharts, needs to create charts, visualize data, or work with ECharts features.
CRITICAL: Use for Makepad 2.0 DSL syntax and property system. Triggers on: makepad dsl, script_mod!, makepad syntax, makepad property, makepad 2.0 syntax, colon syntax, merge operator, named instance, let binding, mod.widgets, register_widget, script_component, type_default, widgets_internal
CRITICAL: Use for Makepad 2.0 layout system. Triggers on: makepad layout, makepad width, makepad height, makepad flex, makepad flow, makepad padding, makepad margin, makepad spacing, makepad align, makepad sizing, Fill, Fit, Inset, Flow.Down, Flow.Right, ScrollXView, ScrollYView, 布局, 对齐, 间距, 填充, 排版, 滚动视图, 尺寸, 宽度, 高度
CRITICAL: Use for Makepad 2.0 shader system. Triggers on: makepad shader, Sdf2d, pixel shader, draw_bg, draw_text, draw_quad, makepad gpu, shader function, pixel fn, vertex fn, instance, uniform, shader variable, sdf, premultiply, Pal.premul, GaussShadow, makepad graphics, custom draw, DrawQuad, DrawVector, 着色器, 像素, 渲染, 自定义绘制, 距离场
Design, implement, or review Material 3 and Material 3 Expressive interfaces for Android Compose, Android Views, Wear OS, and the web. Use for Material Design, M3, Material You, adaptive Material layouts, Material-focused Android UI modernization, or Material web component work; do not apply it to a non-Material design unless the user asks to adopt Material
Design and review mobile app and mobile game product systems including refunds, promotions, subscriptions, in-app purchases, in-app ads, notifications, daily check-ins, rewards, entitlement states, retention loops, and store-compliant monetization UX. Use when building or auditing iOS/Android apps, mobile games, consumer apps, app-store monetization flows, or lifecycle engagement systems.
Review and improve mobile-first UI for apps, web products, SaaS, utilities, and games across touch ergonomics, safe areas, navigation, forms, permissions, loading, offline states, and perceived speed. Use when designing or auditing mobile interfaces, responsive mobile views, onboarding screens, purchase flows, settings, or any UI that must feel fast and modern on phones.
Review and design subtle product motion, animation, and transitions for UI state changes, navigation, loading, gestures, modals, drawers, games, and desktop/mobile apps. Use when an interface feels jumpy, slow, lifeless, over-animated, or when adding modern micro-interactions while preserving accessibility and reduced-motion behavior.
Genre pack: neo-brutalism for the web — loud consumer energy with hard discipline. Bright warm paper, ink-black 2.5px borders on everything, hard offset shadows, one dominant hot accent plus one supporting accent, chunky pills and stickers, playful copy. Use for consumer apps, agencies, crypto/tech novelty brands, and anything wanting maximum personality. Stack on the design-taste core skill.
Design or audit notification strategy across push, email, in-app messages, SMS, lifecycle messaging, reminders, games, SaaS, mobile apps, and desktop utilities. Use when planning permission prompts, notification taxonomy, user controls, retention campaigns, quiet hours, deliverability, fatigue, event triggers, or support-safe messaging.
Pull real-world UI design references before building any frontend. Use this skill whenever implementing, restyling, or improving any web UI — pages, components, layouts, dashboards, forms, cards, navs, modals, marketing sections — even when the user does not explicitly ask for a "design reference." Phrases like "build me a settings page," "make a pricing card," "this looks plain, improve it," or "match the style of X" should all trigger it. It queries a multimodal design search API for reference screenshots from top products, structured style descriptions, and HTML/CSS snippets, so the implementation is grounded in proven patterns instead of invented from scratch. Skip it only for pure logic/back-end work with no visual surface.
Review and design onboarding and activation flows for SaaS, mobile apps, games, developer tools, utilities, marketplaces, and web products. Use when improving first-run experience, setup checklists, permission timing, aha moments, trial activation, invite/team setup, empty states, tutorials, or early retention measurement.
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.