Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
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
Embed a Factorial Code process's input-parameter form on a webpage — embed methods, version pinning to the stable alias, what a public form means for the process behind it, driving behavior from the process return value, styling and themes, multi-step flows, and file uploads. Use when embedding, configuring, styling, or wiring up a Factorial Code (fcode) form.
Use when asked to "jobs to be done", "JTBD", "why customers churn", "prep for customer interviews", "hire and fire products", or "find real competitors". Helps discover unmet needs and the context behind purchasing decisions. The Jobs to be Done framework (created by Clayton Christensen and Bob Moesta) explains why customers hire and fire products.
Author Factorial Code process input-parameter schemas (parametersSchema.json) — every supported input type and validation option, with a complete annotated sample. Use when creating or editing a parametersSchema.json, or defining a Factorial Code (fcode) process's input parameters or form fields.
Expert blueprint for RichTextLabel with BBCode formatting (bold, italic, colors, images, clickable links) and custom effects. Covers meta tags, RichTextEffect shaders, and dynamic content. Use when implementing dialogue systems or formatted text. Keywords: RichTextLabel, BBCode, [b], [color], [url], meta_clicked, RichTextEffect, dialogue.
three.js Scene graph root object, linear Fog and exponential FogExp2, Scene.background for solid colors or textures, and high-level environment background concepts that tie to PMREM and loaders in other skills. Use when configuring world container, atmospheric fog, or background; for HDR env map file loading use threejs-loaders; for GPU texture settings after load use threejs-textures; for tone mapping use threejs-renderers
One-shot, brand-faithful presales redesign of a website page. The user provides only the URL; everything else — extraction, tension identification, three differentiated variants (one fully cinematic), validation — is derived from the captured brand surface. Use when the user asks to “uplift”, “refresh”, or “redesign a site for presales” without wanting to coordinate the extract / direct / prototype chain themselves.
Use when building or customizing Auth0 Universal Login screens with full UI control — creating branded login, signup, or MFA screens using the ACUL React or Vanilla JS SDK. Use this even if the user says "custom login page", "style my Auth0 login", or "build my own Universal Login UI" without mentioning ACUL directly. Does not cover basic branding (colors/logo only) — use auth0-branding for that.
Generate or edit images using the OpenAI Image API (gpt-image-2). Use when the user asks to generate, create, draw, render, illustrate, mock up, or edit an image, icon, logo, mockup, illustration, OG image, blog hero, marketing asset, or similar visual. Also use when the user supplies a reference image and asks to modify, restyle, or remix it. Triggers on: "generate an image", "create an image", "make a picture of", "edit this image", "restyle this", "make a mockup of", "draw a", "render a", "illustration of".
Best practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens with VStack/HStack, managing @State or @Binding, building declarative iOS interfaces, or needing component-specific patterns and examples.
Adapt a Capacitor or Ionic app to iPhone Duo, Apple's first foldable iPhone — why the standard Device Posture and Viewport Segments CSS does not reach a web view, what CSS gives you today, and how to get fold state, hinge angle and bar placement from the native side. Use when a Capacitor, Ionic, Angular, React or Vue app needs foldable iPhone support.
Expert in building portfolios that actually land jobs and clients—not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
Run a broad web UI review for pages, flows, or component surfaces using audit categories such as layout hierarchy, content clarity, CTA emphasis, visual consistency, interaction states, responsiveness basics, performance signals, and accessibility basics. Use when the user asks to review a UI, audit a page, critique UX polish, check interface quality before launch, or turn vague design-feedback requests into a structured audit packet. Not for accessibility- only remediation, reusable component API design, system-level token governance, or React/runtime performance debugging. Triggers on: UI audit, design review, UX review, interface critique, polish review, landing-page review, dashboard review, usability review, visual consistency, CTA clarity.
Make a 3D object lean around on hover and open a full inspect view on click. Hover is a damped, bounded camera lean; click lifts the piece off its bench into the hand, where you drag to turn it, coast, dolly with wheel or pinch, and put it back with Esc, click-away, or a Close button. Use for product, object, joinery, and portfolio pieces in Three.js where a hover orbit and click-to-full-view must not fight each other; use webgl-3d-object for a floating hero mesh with no inspect mode, and 3d-virtual-tour for a camera path through a place.
Frontend implementation and acceptance baseline for PMA-managed React + Vite SPA and internal-tool frontend projects. Covers required quality gates, file-based type-safe routing with TanStack Router, server state with TanStack Query, the shadcn/ui (base-nova) hard lock, Tailwind theming, testing, i18n, nsl-based dev integration, and delivery rules. Use when implementing, scaffolding, upgrading, or validating acceptance of a React/Vite SPA; use pma-cr for code-review workflow.
This skill should be used when users need to generate detailed, structured prompts for creating UI/UX prototypes. Trigger when users request help with "create a prototype prompt", "design a mobile app", "generate UI specifications", or need comprehensive design documentation for web/mobile applications. Works with multiple design systems including WeChat Work, iOS Native, Material Design, and Ant Design Mobile
Tailwind CSS v4 fundamentals — installation, CSS-first configuration, and 2025-2026 best practices. PROACTIVELY activate for: (1) installing Tailwind v4 (Vite plugin, PostCSS, CLI), (2) CSS-first configuration with @theme, (3) @import "tailwindcss" syntax, (4) v3-to-v4 migration, (5) new utilities introduced in v4 (text-shadow, mask-*, container queries), (6) Lightning CSS engine, (7) zero-config content detection, (8) Oxide engine performance, (9) @utility for custom utilities, (10) @variant for custom variants. Provides: v4 install guide, @theme reference, v3-to-v4 migration checklist, new utility catalog, and @utility/@variant examples.
Implement Syncfusion Blazor Input components including FileUpload, TextBox, NumericTextBox, TextArea, Signature, RangeSlider, OtpInput, Rating, InputMask, and ColorPicker. Use this when working with file uploads, text entry, numeric values, multi-line text inputs, signatures, ratings, or color selection. This skill covers input validation, events, data binding, and advanced customization options for all input-related components in Blazor applications.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components—not for simple single-file HTML/JSX artifacts.
Implement Syncfusion Blazor Scheduler component for comprehensive appointment and event scheduling. Use this when building calendar interfaces, managing appointments with CRUD operations, implementing multiple view modes, setting up recurring events, or handling timezone-aware scheduling. This skill covers views (day, week, month, timeline, agenda), drag-and-drop functionality, resizing, resources, localization, data binding, state persistence, and advanced customization options for scheduling applications.
This skill should be used when a system design needs a diagram — "draw the architecture", "diagram this system", "show the components", "make an architecture/infrastructure/topology diagram", or visualizing boxes-and-arrows, data flow, regions, or failure paths for a design. It generates a self-contained dark-theme HTML + SVG diagram (with PNG/PDF export). Use it whenever the `system-design` orchestrator or a building block reaches the "draw it" step, even if the user doesn't say "diagram".
Professional print design guidelines for producing high-quality printed output from HTML/CSS. Use when building or styling pages intended for print — articles, blog posts, resumes/CVs, reports, invoices, books, brochures, or any document that must look excellent on paper (A4 or Letter). Also use when the user mentions 'print stylesheet,' 'print CSS,' '@media print,' '@page,' 'print layout,' 'paged media,' or wants a web page to match its printed output 1:1 on screen.
Build a burning-paper ring loader whose GLSL flame is drawn by a Worker on an OffscreenCanvas started from the head, so a main thread blocked by the page build cannot freeze it, with a progress count, an even-paced run into the hand-off, and a clean fade to the page. Covers the ember thread and ember gradient, porous char, worker start-up, parallel shader compile with a waited 1-px warm-up draw, hand-off without a stall, reduced motion and hidden-tab behaviour. Use for a loading screen, preloader, page loader, splash, "kindling", burn loader, ember ring, burning paper hole, fire loader, or a loader that must keep moving while heavy JavaScript, three.js or shader builds hold the main thread.
Comprehensive Flutter UI/UX development skill for creating beautiful, responsive, and animated mobile applications. Use when the user asks to: (1) Build Flutter UI components or screens (2) Implement animations and transitions (3) Design responsive layouts (4) Create custom widgets and themes (5) Optimize UI performance and accessibility. Triggers: "create Flutter UI", "build Flutter screen", "Flutter animations", "responsive Flutter layout", "custom Flutter widgets", "Flutter theme design"
This skill should be used when the user asks to "prepare conference presentation", "create presentation slides", "design poster", "make academic poster", "write promotion content", "create Twitter thread", or mentions post-acceptance conference preparation. Provides comprehensive workflow for presentation, poster, and promotion content creation.
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.