Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.
Apply iOS/SwiftUI design principles following Apple Human Interface Guidelines when building any iOS UI component. Only execute this when the current project is an iOS project and involves UI-related work. Use this skill for SwiftUI views, UIKit components, or iOS app development. Ensures HIG compliance with Clarity, Deference, and Depth principles, system colors with Dark Mode support, 8pt grid spacing, SF Pro typography with Dynamic Type, and native iOS interaction patterns. Prevents common anti-patterns like fixed text sizes, Dark Mode neglect, and Safe Area violations.
Genre pack: wabi-sabi minimalism — rice paper, sumi ink, one seal-red accent, a Japanese mincho serif, negative space as the design, one vertical text element allowed. Calm, deliberate, quiet-luxury's unpolished cousin. Use for studios, tea/food brands, wellness, personal sites, and any brief wanting meditative restraint. Stack on the design-taste core skill.
Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.
CRITICAL: Use for Makepad 2.0 Splash scripting language. Triggers on: splash language, makepad script, script_mod!, makepad scripting, splash 脚本, makepad 2.0 script, mod.state, on_render, script_eval, streaming evaluation, splash syntax, splash vm, let binding, splash functions, hot reload, live reload, ScriptModKey, script_mod_overrides, checkpoint, incremental parsing, canvas splash, POST splash, fn tick, on_audio, set_text, tab switching, 音乐播放器, token monitor, driver script, audio API, 热重载, 脚本引擎, 增量解析
CRITICAL: Use for Makepad 2.0 widget catalog and usage. Triggers on: makepad widget, makepad View, makepad Button, makepad Label, makepad TextInput, makepad PortalList, makepad Dock, makepad Modal, makepad Image, makepad CheckBox, makepad Slider, makepad DropDown, widget catalog, widget reference, widget list, SolidView, RoundedView, ScrollYView, FoldHeader, Splitter, FileTree, 组件, 控件, 视图, 按钮, 标签, 输入框, 列表, 模态框
Build, refactor, audit, and validate marketing websites and public product pages. Use this skill whenever the user asks for landing pages, product pages, brand pages, venue pages, campaign pages, conversion flows, hero sections, CTA hierarchy, social proof, metadata, responsive storytelling, media-heavy public pages, SEO-facing UI, or launch pages. Do not use for private dashboards, admin panels, CRM screens, or dense app workflows.
Guidance for custom drawing with Microsoft.Maui.Graphics, GraphicsView, canvas drawing operations, shapes, paths, text rendering, image drawing, shadows, clipping, and canvas state management. USE FOR: "custom drawing", "GraphicsView", "canvas drawing", "draw shapes", "draw path", "draw text", "ICanvas", "IDrawable", "shadows", "clipping", "Microsoft.Maui.Graphics". DO NOT USE FOR: view animations (use maui-animations), gesture handling on drawn elements (use maui-gestures), or app icons (use maui-app-icons-splash).
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar". DO NOT USE FOR: general layout or grid design (use maui-collectionview), app lifecycle handling (use maui-app-lifecycle), or theming (use maui-theming).
Build, review, debug, migrate, or plan UI animation with Motion for React (motion/react, motion@13). Use for React/Next/Vite: motion.div, AnimatePresence, variants, gestures, drag, layout/layoutId, LazyMotion, useScroll, useAnimate, MotionValues, animateView, AnimateView (motion/react-animate-view, React 19.3), arc(), spring bounce, Reorder grids, reducedMotion, framer-motion→motion, Motion 13 isValidProp, CSS/WAAPI/View Transitions, microinteractions, page transitions, accessibility, and performance-safe animation. Do not use for Vue, vanilla-only Motion, React Native, or non-interactive film/video unless adapting it to product UI.
Use Mowgli to create and iterate on beautiful designs for your projects with high taste and without the usual AI slop design aesthetic. This skill allows you to push existing designs and product flows to a Mowgli project, or read pixel-perfect React + Tailwind designs from one. Mowgli displays all the product's screens and states on an infinite canvas and allows rapid, natural-language iteration. Due to its unique approach of spec-driven design, Mowgli can help redesign, tweak, visualize and experiment on designs with deep product understanding and context. Combined with this skill, it allows full interoperation with existing codebases and GitHub repos, as well as an easy path from beautiful designs to real implementation.
Install and compose Nexus UI components for AI chat UIs — prompt input, model selector, suggestions, attachments, message, thread, citation, reasoning, text shimmer, image, feedback bar, toaster, chain of thought, tool, questions, and AI SDK patterns. Activates for @nexus-ui registry usage or Nexus UI source under components/nexus-ui.
(NS) Security/compat/a11y hygiene + Vercel Web Interface Guidelines review (headers, CSP, deps, accessibility). Use when hardening security, fixing CSP/CORS/headers, reviewing UI / checking a11y / auditing UX, or applying Web Interface Guidelines — even without saying "best practices"; also at ns-proto-creator close-out. Do NOT use for MR/SOLID review (ns-code-reviewer), visual redesign (ns-code-frontend-design), or feature implementation (ns-code-coder / ns-spec-driven).
(NS) Distinctive production UI — layout, typography, motion, and component polish that avoids generic AI-slop aesthetics. Use whenever the user builds or refines pages, components, dashboards, forms, or design-brief work, or asks for better UI/UX — even if they do not say "design". Load docs/context/design-brief.md when present. Do NOT use for backend-only work, requirements writing, or full SDD orchestration (use ns-spec-driven).
When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.
A skill that generates prototype UI based on Mock data without a backend. Vue 3 + TypeScript + NuxtUI v4. It accumulates per-task screens in the modules-task folder of a separate ui-proto repository (e.g. peach-ui-proto-backoffice). Triggered by keywords such as "프로토타입 만들어줘", "Mock 화면", "proto UI", "기획 화면 빠르게", "ui-proto 작업", "기획자 검토용 화면", "태스크 폴더 추가". If a Spec document is provided as input, it automatically switches to team mode (Ralph loop 5/10 times); if a planner works directly without a Spec, it runs in solo mode. If real API integration is needed, use peach-gen-ui.
Image-to-code replication pipeline. When the user provides a screenshot or design reference, this skill runs a structured extraction across seven layers (grid, type, color, spacing, components, atmosphere, interaction), builds an Extraction Sheet before any code is written, implements with exact fidelity to the reference, and verifies through inline Quality Gates and a final Visual Diff. The reference image is the spec. The code is a translation, not an interpretation.
Genre pack: bold, joyful consumer design — giant display type, thick ink outlines, flat vibrant color fields, sticker-like shapes, chunky buttons. For D2C brands, consumer apps, events, education, and youth-facing products. Fun without looking childish: the structure stays strict, only the attitude is loud. Stack on the design-taste core skill.
Preview a single Flutter widget in isolation using the built-in Flutter Widget Previewer (`flutter widget-preview`) — wires up a project-specific `previewWrapper` so the widget renders against the app's real theme and providers, launches the local preview server, and lets the agent take headless-Chrome screenshots of the live preview while a human follows along in their own browser. Use whenever the user wants to design, iterate on, dogfood, share, audit, or sanity-check a standalone Flutter widget — even when they don't say "previewer" (e.g. "let me see the new button", "show me dark mode for this card", "throw this widget on a preview", "iterate on the empty state", "preview just the badge", "what does this look like at tablet width"). For full-screen design polish on a running app, use `design-polish` + `android-emulator` instead. Skips — non-Flutter UIs, full-app QA flows, projects on Flutter < 3.35.
Audits web apps for resilience against unexpected user behavior — accidental, edge-case, and chaotic. Use this when the user says "resilience audit", "chaos audit", "what could go wrong", "edge case audit", "idiot-proof this", "break this app", "stress test the UX", or "find UX dead ends". Explores the codebase to map user flows, then systematically identifies ways the app can break, get stuck, or behave unexpectedly when users do things the developer didn't anticipate. Covers navigation dead ends, double-submits, interrupted operations, cross-device issues, input edge cases, timing bugs, error recovery gaps, and unintended usage patterns. Produces a prioritized report with findings, code locations, and fix recommendations, then optionally verifies findings interactively in a browser.
AI-driven presentation generation system using Touying/Typst. Converts source documents (PDF/DOCX/URL/Markdown) into high-quality Typst slides through either a multi-role Full Mode workflow or direct existing-theme Quick Mode authoring, and exports to PDF/PNG/PPTX. Use this skill whenever the user wants to create slides, make a presentation, build a deck, convert a PDF/document to slides, turn notes into a presentation, or anything involving Typst/Touying slide generation. Trigger phrases include: "create slides", "make presentation", "generate slides", "convert to slides", "turn into a deck", "keynote", "PPT", "slide deck", "生成PPT", "做幻灯片", "制作演示文稿", "用Typst做演示", "做个汇报", "转成幻灯片", or mentions "seaslides-typst-slides-skill". Even if the user does not explicitly say "slides" or "presentation", use this skill when the intent is clearly to create visual presentation materials from source content.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", "switch to --preset", and for building a design system or applying a DESIGN.md or brand spec to shadcn/ui.
Creative Designer skill. Takes a post concept, a client product photo, or a real lifestyle photo and produces on-brand social media visuals using the client's brand style guide. Four modes — Generate (AI image from concept), Composite (client product photo anchored in an AI-generated scene), Brand (apply text overlay treatment to a real client photo), Stop-Motion Reel (6-frame action sequence exported as MP4). Reads brand-style.md, builds prompts, generates/edits images via Nano Banana MCP, outputs images + prompt log + creative brief.
Create and configure ASP.NET Core Stepper controls to support multi-step workflows and progressive user interfaces. This skill should be applied when implementing step navigation, wizards, progress trackers, form flows, checkout processes, or any sequential step-based UI. It is also relevant whenever requirements involve steppers, step validation, step navigation, linear flows, or step-based state management.
Implements Syncfusion Flutter Circular Charts (SfCircularChart) for pie, doughnut, and radial bar data visualizations in Flutter. Use when working with PieSeries, DoughnutSeries, or RadialBarSeries using the syncfusion_flutter_charts package. This skill covers chart setup, data labels, legends, tooltips, selection, annotations, gradients, animation, accessibility, and chart export.
Build carousel components for displaying image galleries, news headlines, and rotating content. Use this skill when implementing image sliders, automatic content rotation, or carousel-based galleries. Covers navigation controls, slide transitions, animation effects, and indicators.
Create and configure Syncfusion TypeScript Timeline control for displaying sequential events and chronological content. Use this skill when implementing timeline layouts, milestone tracking, process flows, progress indicators, or visualizing ordered sequences. This skill covers project milestones, career progression, order status tracking, itinerary planning, and procedural workflow visualization using Syncfusion Timeline.
Use the tailwind-animations npm package (CSS-only Tailwind CSS v4 plugin) to add ready-made animation utilities: fade, slide, zoom, flip, bounce, jelly, dialog entry/exit, scroll/view timelines, scroll-mask edge fades, duration/delay/steps/ iteration/fill-mode, and animate-slide-distance. Use when the user wants CSS animations with Tailwind, animate-* classes, motion utilities, dialog animations, scroll-driven CSS motion, scroll-mask fading edges, or to install/configure tailwind-animations. Triggers: "tailwind animations", "animate-fade-in", "animate-dialog", "scroll-mask", "slide-distance", "tailwind motion plugin", /tailwind-animations.
Build, review, debug, configure, or migrate Tailwind CSS projects using current Tailwind documentation. Use for Tailwind CSS v4.3 utilities, CSS-first configuration, theme variables, Vite/PostCSS/CLI/webpack/Turbopack setup, source detection, variants, responsive design, dark mode, Preflight, custom utilities, @apply/@reference, Prettier class sorting, and v3-to-v4 upgrades.
Landing page structure and conversion craft: the 8-second rule, audience-driven hero patterns, section order that sells (hook → problem → proof → price → close), CTA discipline, social proof placement, pricing psychology, and mobile-first section behavior. Use when generating or restructuring any marketing page. Stack on the design-taste core skill.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Implement and debug Three.js interaction with Raycaster, pointer and touch coordinate conversion, hover/selection state, camera controls, dragging, keyboard input, and world-to-screen projection. Use when picking objects, adding OrbitControls or PointerLockControls, handling mouse/touch input, or fixing interactive 3D behavior. Triggers on: Three.js interaction, Raycaster, raycast, picking, click mesh, hover, object selection, OrbitControls, drag controls, pointer events, touch controls.
Synthesises user interview transcripts into structured research findings. Use when asked to analyse interview notes, synthesise qualitative research, identify themes from interviews, or turn raw interview data into actionable product insights. Produces a themed synthesis with supporting quotes per theme, 'so what' implications, and recommended next steps. For mixed sources beyond interviews (surveys, tickets, feedback) use user-research-synthesis instead.
Map user journeys, onboarding paths, entry points, first actions, trust points, accessibility risks, and SEO/LLM handoffs for public websites without redesigning the visual system. Use this skill when the user asks how new readers, returning users, project reviewers, community members, buyers, or AI agents should move through a site and what each page must make clear before layout implementation.
Symfony UX Map for interactive maps with Leaflet or Google Maps in Symfony. Covers markers, polygons, polylines, circles, info windows, and LiveComponent integration. Use when displaying maps, placing markers, drawing shapes or routes, handling map events, building store locators, using custom tile layers, or making maps reactive with LiveComponent. Code triggers: <twig:ux:map />, Map(), Point(), Marker(), Polygon(), Polyline(), Circle(), InfoWindow(), MapOptionsInterface, ComponentWithMapTrait, fitBoundsToMarkers, ux:map:marker:before-create, ux:map:connect, SYMFONY_UX_MAP_DSN. Also trigger when the user asks "how to display a map", "how to add markers", "how to draw a polygon on a map", "how to handle map click events", "how to make a reactive map", "how to use Leaflet in Symfony", "how to use Google Maps in Symfony", "map not showing", "map has zero height". Do NOT trigger for SVG icons (use ux-icons) or general frontend interactivity (use stimulus).
Create a structured UX research plan for any product question or feature. Use when asked to write a research plan, design a user study, create a discussion guide, write screener questions, or plan usability testing. Produces a full research plan with objectives, methodology, screener, discussion guide, and synthesis framework.
Render inline interactive visuals — SVG diagrams, HTML widgets, charts, and explainers — directly in the conversation. Use this skill whenever the user asks to visualize, diagram, chart, illustrate, or explain something visually, or when an explanation would genuinely benefit from a spatial/interactive diagram rather than text. Also triggers for: flowcharts, architecture diagrams, data visualizations, interactive explainers, comparison layouts, UI mockups, and any request containing 'show me', 'draw', 'map out', 'visualize', or 'diagram'. Even when the user doesn't explicitly ask for a visual, use this skill proactively when the topic has spatial, sequential, or systemic relationships that a diagram would clarify better than prose.
Filters web output against a multi-discipline checklist of AI default patterns. Use before shipping any design, copy, UI code, infrastructure config, or documentation. Trigger when the user asks for something 'premium' or 'not AI-looking', when you're about to reach for a glowing gradient, bento grid, SaaS empowerment copy, a 3-tier pricing section, a 3-stage CI/CD YAML, or a god component.
Use when a UI/UX project must verify that the promised user journey, TASK-PLAN.md, progress-state.json, rendered progress HTML, evidence artifacts, and skipped stages are consistent. Detects lazy skips, fake Ran/Done claims, missing evidence, approval-gated external steps, and user-data blockers; recommends continue, pause_for_user, return_to_rework, skip_with_reason, or block without replacing senior-ui-ux-orchestrator as chair.
WCAG 2.1/2.2 compliance, WAI-ARIA implementation, screen reader optimization, keyboard navigation, and accessibility testing expert. Use PROACTIVELY for accessibility violations, ARIA errors, keyboard navigation issues, screen reader compatibility problems, or accessibility testing automation needs.
Use this skill when you need a complete developer-ready design specification for a named aesthetic: W3C DTCG design tokens, CSS custom properties, cultural marker lists, component-level notes, and accessibility flags. Translates aesthetic understanding into implementable values across all 7 dimensions. Use when the user asks to 'make it look like X', requests design tokens or CSS variables, or needs a developer handoff spec grounded in an aesthetic. Depends on aesthetic-literacy. Do not use before an aesthetic is confirmed; do not use for accessibility resolution or component architecture.
Install AI UI components from the Elements registry. Use when user needs chat interfaces, agentic UIs (tool calls, reasoning, plans), multi-agent dashboards, or AI devtools. Triggers on "AI component", "chat UI", "agent UI", "tool call component", "streaming text", "agentic", "multi-agent", "AI SDK", "chat input", "message bubble", "thinking indicator".
This skill should be used when the user asks about "poster design", "campaign poster", "event poster", "social media graphics", "billboard design", "banner design", "flyer design", "promotional graphics", "visual hierarchy poster", "concert poster", "film poster", "act as a poster designer", "poster designer mode", "key visual", "hero image", "advertising visual", "OOH design", "outdoor advertising", "social media template", "Instagram post design", "event graphics", "format-specific design", "focal point", "large format print", or needs expertise in designing campaign posters, event graphics, social media visuals, and large-format advertising materials. Part of the AlterLab FC Skills collection (VCD department).
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.