Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Solutioning-phase UX planning skill (optional; activate when the project has a UI). Produces TWO planning documents: DESIGN.md (the visual system — design tokens, color palette, typography, spacing, component specs, WCAG 2.1 AA contract) and EXPERIENCE.md (user journeys, flow diagrams, screen states, error/empty/loading handling). Use when the user says "design the UX", "create UX planning docs", "define the design system", "map the user flows", "UX for this feature", "wireframe the flows", "what are the user journeys", "accessibility design", "WCAG compliance", "design tokens", "responsive design plan", "mobile-first design", or "create DESIGN.md / EXPERIENCE.md". Runs after architecture is drafted and before stories are created. Supports Create / Update / Validate intents.
Extract brand identity from a website URL — voice, colors, typography, imagery, values, and target audience — into a structured brand-profile.json. The profile feeds downstream skills (seo-content-writer, email-composer, frontend-design, pro-deck-builder, cross-platform-audit) for brand-consistent output. Use when the user says brand DNA, brand profile, extract brand, analyze brand, brand voice, brand identity, brand colors, or brand style guide.
Individual card components and card grids: anatomy, grid/masonry/carousel layouts, hover effects, and ready patterns for product, feature, testimonial, blog, expandable, and flippable cards plus skeleton loaders. Use when the user asks to "design a card", "build card layout", "create a product card", "make a card grid", "design a testimonial card", "blog post card", "feature card", "pricing card", or any card-based UI component. For the full page section around the cards use landing-page-design; for KPI/stat tiles use dashboard-design; for general components use ui-design.
Design and build websites with film-inspired visual systems, director-driven art direction, storyboard-first layout planning, and cinematic motion. Use when the user asks for a cinematic site, movie-style landing page, director-inspired UI, film-noir, sci-fi, romance, thriller, action, animation, or a movie-like website aesthetic, including requests phrased in Chinese. Do not use for generic web design unless the user explicitly wants a film or director reference.
Personal IP diagram creator. Use your IP character to generate bespoke content diagrams. It turns photos, profile screenshots, bios, account materials or character profiles that the user has authorized into a consistent minimalist hand-drawn diagram character, and then generates long-form article illustrations, knowledge cards for image-and-text accounts, phone posters, method breakdown diagrams, storyboard story diagrams, IP talk PPTs, livestream sharing decks and fully illustrated hand-drawn PPT pages. It emphasizes a knowledge-diagram system of IP protagonist + execution agent: the user's IP does the presenting, breaking down, annotating and dispatching, while the execution agent moves cards, gives feedback, tries and errors, flags risks and hands over results. Use this Skill when the user wants a personal IP character, wants to make knowledge diagrams with their own character, knowledge cards for image-and-text accounts, article illustrations, course diagrams, content posters, method breakdown diagrams, IP talk PPTs, livestream sharing decks, or uploads photos / profile screenshots / bios for content visuals.
Create or redraw concept diagrams, research-content relationship diagrams, and technical roadmap diagrams for NSFC grant proposals; when the deliverable needs editable source diagrams, stable layout, or verifiable export, prefer generating Draw.io XML. Pure data/statistical charts, photo editing, or reuse of original figures from papers should not trigger this skill.
Audit interface copy — labels, buttons, errors, empty states, tooltips, notifications, form hints — against UX-writing standards. Produces a severity-rated issue list with concrete rewrites. Use when reviewing UI copy for clarity, tone, and consistency, or as a validation step on any generated screen.
Diagnose weapp-tailwindcss and `weapp-tw` CLI issues with styles not being generated, JS/template classes not being transformed, classNameSet, @source/cssEntries, source candidates, rpx, pseudo-class/custom variant, component isolation, Rspack, minification, watch/HMR, and multi-platform output for H5/Web/App/uni-app x. Use for debugging, troubleshooting, CLI output failures, classes not working, broken hot reload, wrong output, or runtime compatibility; not for new project configuration, custom API design, or Lynx-specific integration.
Use when the user needs an end-to-end article illustration workflow in this repository that preserves Type x Style planning, loads article-illustration preferences, recommends Alibaba Cloud image backends, and produces a Markdown article with inserted local image references.
Apple グラフィックス。Metal, Core Animation, Core Graphics, Core Image, SpriteKit, SceneKit。 MTLDevice, MTKView, MTLBuffer, MTLTexture, MTLResidencySet, MTLTensor, Metal 4 (MTL4CommandQueue, MTL4CommandBuffer, MTL4CommandAllocator, MTL4ArgumentTable, MTL4RenderCommandEncoder, MTL4Compiler), CALayer, CABasicAnimation, CADisplayLink, CAMetalDisplayLink, CAMetalDrawable, CGContext, CGPath, CGImage, CIFilter, CIContext, CIImage, CIRAWFilter, CIWarpKernel, CIBlendKernel, SKScene, SKSpriteNode, SKAction, SCNNode, SCNGeometry, SCNMaterial。
Build fully customizable, agent-ready design systems with Astryx — Meta's production design system now open source. Ships 150+ React components built on StyleX with zero styling lock-in, component swizzling, brand theming, dark mode, and CLI tooling. Use when building component libraries, design systems, UI applications, design tokens, or when teams need consistent accessible components that AI agents can understand and extend. Triggers on: astryx, design system, component library, design tokens, react components, accessible components, astryx design, stylesheets, theme customization, component composition.
Migrate an app's charts from Recharts or TanStack Charts to Bklit UI. Detects Recharts usage — direct `recharts` imports or shadcn/ui's `components/ui/chart.tsx` wrapper (ChartContainer, ChartConfig, ChartTooltipContent, ChartLegendContent) — and `@tanstack/charts` definitions (defineChart with lineY / areaY / barY marks), inventories every chart, classifies each as clean / needs workaround / keep, installs the matching `@bklit/*` shadcn registry items, and rewrites each chart with the equivalent bklit components while preserving data, colours, and labels. Tiny axis-less charts (Recharts "Tiny" line/area/bar charts, TanStack KPI sparklines) become LineSparkline / AreaSparkline / BarSparkline. Use when the user asks to replace, migrate, convert, or port Recharts, shadcn charts, or TanStack Charts to bklit, to swap sparklines or tiny charts, to remove the recharts or @tanstack/charts dependency, or asks what it would take to switch chart libraries.
Convert a public brand URL into a practical DESIGN.md file and optional single-file HTML demo. Use when the user asks to extract, distill, compile, generate, or validate a DESIGN.md/design system from a website, brand page, press kit, or public visual identity.
Create or edit a PostHog freeform canvas — a sandboxed browser application (data board, document, form, small tool, graphics experiment) stored in PostHog and rendered by the desktop/web app. Use when a task asks to build, generate, update, or fix a standalone canvas app, or when a freeform canvas id is given as the publish target. For grid/home canvases, widget placements, or reusable components, use composing-grid-canvases instead. Covers resolving or creating the target canvas, choosing an implementation approach (React + Quill vs plain HTML/browser APIs), the read → edit → validate → publish → build loop, and which companion canvas skills to load for the details.
Author a PostHog canvas with semantic HTML, CSS, and direct browser APIs — documents, articles, generative graphics, 2D canvas and WebGL experiences, and focused experiments where React components add no useful structure. Use after building-canvases has routed a canvas request to a plain-HTML/browser-API implementation. Covers the thin component wrapper the current runtime requires, styling and theming without Quill, drawing surfaces, and animation/cleanup patterns.
Compose PostHog grid canvases — widget grids (including the user's home canvas) built from reusable component canvases. Use when a task asks to add, fill, move, resize, or remove a widget on a grid or home canvas, to compose a whole canvas of widgets from one ask, to build a reusable widget/component, or when a placement id or grid canvas id is the target. Covers the component store search → configure → fork → build ladder, the component placement contract (size, configSchema), the placement lifecycle (pending/generating/live/failed), the guarded layout patch loop, and reading the canvas's comment threads.
SVG Style Studio (/create-svg) - art director + vector illustrator that makes polished, editable SVGs (illustrations, logos, icons, posters, infographics, stickers) in 44 styles - pixel art, 8/16-bit, cyberpunk, Y2K, Frutiger Aero, glassmorphism, clay, isometric, low poly, paper cutout, doodle, comic, manga, sumi-e, ukiyo-e, art nouveau, art deco, bauhaus, brutalist, vintage poster, screen print, risograph, blueprint, technical/scientific, medieval, graffiti, sticker, children's, editorial, infographic, cinematic, fantasy, sci-fi, horror, retro futurism, gothic, luxury, monochrome, geometric, botanical. Use for any request for SVG/vector art, style blends ("cyberpunk + minimalist", "ukiyo-e but darker"), one subject in several styles ("in 5 styles"), or converting an SVG/image to a style. Routes the style, applies its design rules, then validates, optimizes, renders and inspects before delivering.
Generates multiple distinct design variants of a component or page, each with a completely different visual direction, then implements the chosen one. Use when the user asks to redesign, restyle, explore design options, create multiple visual directions, or compare design approaches for any UI element -- components, pages, sections, dashboards, landing pages, or full layouts.
Generate architecture diagrams as .excalidraw files from codebase analysis, with optional PNG/SVG export. Use when the user asks to create architecture diagrams, system diagrams, visualize codebase structure, generate excalidraw files, export excalidraw diagrams to PNG or SVG, or convert .excalidraw files to image formats.
Floating UI for Vue (@floating-ui/[email protected]). ALWAYS use when writing code importing \"@floating-ui/vue\" or using useFloating, arrow, floatingStyles, or autoUpdate. Consult for middleware setup, anchoring, virtual elements, and v1 to v2 migration. Vue 3.3+ only.
Guide users to build charts and data visualizations using the Graphic Flutter library. Use when users ask how to create charts, configure chart options, add interactivity, customize appearance, or need help with any aspect of the Graphic charting library.
Above-the-fold hero section patterns (centered, split, video, minimal typography), background techniques, and LCP performance, with production-ready code. Use when the user asks to "create a hero", "build a hero section", "design above the fold", "make a hero banner", "landing page header", "build a homepage hero", or redesigns only the top of a page. For a whole multi-section marketing page use landing-page-design (which uses this skill for its hero); for a static hero *image or banner graphic* use banner-design.
Modao prototype capture tool. Automatically captures all pages, screenshots, and annotations from a Modao prototype link and generates a Markdown document. Use cases include: (1) capturing prototype pages (2) generating page screenshots (3) extracting annotation content (4) exporting Markdown documents.
Creates showreel-grade motion graphics videos entirely from code — HTML scenes rendered frame by frame in headless Chrome with real motion blur, plus an original score composed for each video on the same beat grid. It directs the film itself from whatever the person gives — their words, a site, a GitHub repository, an app, screenshots, their own video clips and photos, or reference clips — and sets the pace and the energy of the music from them. Use for any promo, ad, launch video, explainer, reel, Shorts or TikTok, intro, kinetic type or logo animation for a business, product, app, site, bot, channel or person, even when all you have is a link or a name.
Generate images with Alibaba Qwen-Image-2.0-Pro via inference.sh CLI. Professional text rendering, fine-grained realism, enhanced semantic adherence. Ideal for posters, banners, and text-heavy designs. Triggers: qwen image pro, qwen-image-pro, qwen 2 pro, alibaba image pro, dashscope pro, professional text rendering
Generate and edit images with Alibaba Qwen-Image-2.0 models via inference.sh CLI. Models: Qwen-Image-2.0 (fast), Qwen-Image-2.0-Pro (professional text rendering). Capabilities: text-to-image, multi-image editing, complex text rendering. Triggers: qwen image, qwen-image, alibaba image, dashscope image, qwen image 2, qwen image pro
Generates consistent UI components, layouts, and design tokens following a design system. Enforces spacing, color, typography, and accessibility standards across React/TypeScript projects. Use when creating new UI components, building page layouts, choosing colors or typography, setting up design tokens, or reviewing UI code for design consistency. Covers 8pt spacing grid, Tailwind CSS token usage, shadcn/ui primitives, WCAG 2.1 AA compliance, responsive breakpoints, semantic HTML structure, and TypeScript component interfaces. Does NOT cover backend implementation (use python-backend-expert), testing (use react-testing-patterns), or deployment (use deployment-pipeline).
Design and build user interfaces for 3D apps and games — routing between spatial 3D/XR UI and 2D HUD UI, plus visual design principles. Use when adding menus, HUDs, panels, dashboards, or any in-app UI to a Three.js project, or deciding which UI technology to use.
Multi-perspective UX review combining usability heuristics, WCAG accessibility checks, and interaction design analysis. Use when reviewing UI components before release, evaluating user flows for usability issues, conducting design critiques, or auditing accessibility compliance.
Author the React + Quill implementation of a PostHog canvas: the single-component contract, the allowed imports, Quill (PostHog's design system) component and composition rules, theme-aware design tokens, loading skeletons, and the in-canvas date picker. Use after building-canvases has routed a canvas request to a React implementation — dashboards, data boards, forms, tools, or any canvas that should look native to PostHog.
Generate draw.io editable diagrams (.drawio, .drawio.svg) from text, images, or Excel. Orchestrates 3-agent workflow (Analysis → Manifest → SVG generation) with quality gates. Use when creating architecture diagrams, flowcharts, sequence diagrams, or converting existing images to editable format. Supports Azure/AWS cloud icons. Triggers on draw.io, drawio, ダイアグラム, アーキ図, フローチャート, シーケンス図.
Flutter/Dart implementation patterns for Refactoring UI principles. COMPANION skill for mobile-app-design-mastery. ALWAYS activate for: Flutter theming, ThemeData, ColorScheme, TextTheme, BoxDecoration, Material 3, Flutter shadows, Flutter spacing, Flutter typography, Flutter dark mode, Flutter components, Flutter styling, Dart UI, Widget decoration. Provides ThemeData setup, color schemes, typography styles, spacing utilities, decoration patterns. Turkish: Flutter tema, Flutter renk, Flutter tasarım, Dart UI, widget stil. English: Flutter theming, Material Design, Flutter styling, widget decoration.
Landing page audit and optimization for conversion. Covers above-the-fold design, value propositions, CTAs, social proof placement, form design, page speed, and mobile optimization. Use when the user asks about landing page optimization, conversion rate improvement, page audits, or CTA optimization.
Convert PNG images to high-quality SVG with optional white-background removal, vtracer spline vectorization, and svgo compression. Use when the user asks for "PNG to SVG", "png2svg", "转 SVG", "矢量化", "去白底", logo tracing, or converting raster icons into editable vector assets.
Use this skill whenever creating PPTX slides, presentations, or decks with any of these 30 modern design styles: Glassmorphism, Neo-Brutalism, Bento Grid, Dark Academia, Gradient Mesh, Claymorphism, Swiss International, Aurora Neon Glow, Retro Y2K, Nordic Minimalism, Typographic Bold, Duotone Color Split, Monochrome Minimal, Cyberpunk Outline, Editorial Magazine, Pastel Soft UI, Dark Neon Miami, Hand-crafted Organic, Isometric 3D Flat, Vaporwave, Art Deco Luxe, Brutalist Newspaper, Stained Glass Mosaic, Liquid Blob Morphing, Memphis Pop Pattern, Dark Forest Nature, Architectural Blueprint, Maximalist Collage, SciFi Holographic Data, Risograph Print. Also activate for requests using words like "sleek", "modern", "trendy", "designed", "stylish", or "visually striking" presentations.
Use when reviewing/judging a finished (or amended) wireframes document — an acceptance gate: can the downstream hi-fi + UI engineering build the screen structure from it. Judges a TEXTUAL markdown wireframe against a single-sourced buildability + coverage + composition bar: every flow-named screen/state covered with quality states; layout unambiguous on a grid + shared app-shell meeting an objective layout-quality bar; real + consistent components; affordances + data-display annotated; microcopy intent (no data-model leak in labels); screen-composition a11y (landmarks/focus-order/target-size) — pixel contrast/focus-appearance are the design-system's, not judged here; responsive; gaps surfaced; structural not hi-fi; an amend reviewed as a scoped versioned delta. Emits `VERDICT: approve|revise` + actionable findings; approves a doc meeting the bar (no false-revise on a thin screen), revises only on a named gap. Not for authoring, the navigation graph (user-flows), the visual tokens (design-system), or hi-fi.
Provisions a Replay Vision `experiment` scanner that watches one experiment’s exposed sessions, records each session’s variant, samples variants evenly, and stops when the experiment ends. Covers status guards, a prompt that remains comparable across variants, sizing credit spend against the experiment’s own population, creating it disabled so its prompt can be previewed on real sessions, and reading results by variant. TRIGGER when: the user wants Replay Vision to watch an experiment, asks to scan or analyze an experiment’s recordings with AI, asks “what are users actually doing in the test variant,” or wants a scanner scoped to an experiment’s exposed sessions. DO NOT TRIGGER when: creating a general-purpose scanner not tied to an experiment (use creating-replay-vision-scanners), reading observations a scanner already produced (use exploring-replay-vision-observations), or manually browsing an experiment’s recordings without AI analysis (use analyzing-experiment-session-replays).
shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.
Use when the user asks to see something rather than read about it - "show me", "let me see it", "what does it look like", "give me options", or any moment you are about to describe a layout, a plan, a comparison or a design in prose. Renders it as a self-contained HTML page and opens it in the browser, in front of them.
Create beautiful web presentations from a topic, rough notes, or an outline, and edit decks afterward — adding, removing, or revising slides. Generates a custom theme and a short two-slide preview, then builds the full deck only once the user confirms the direction; edits to an existing deck skip that flow and apply in place. Use when the user wants to make slides, a presentation, a talk deck, a pitch deck, or to add/remove/change a slide in one that already exists
Writes and maintains Storybook stories and interaction tests using CSF3 format. Covers component stories, play functions, visual regression testing with Chromatic, and accessibility testing. Use when creating component documentation, writing interaction tests, debugging test failures, configuring visual snapshots, or updating story structure. Use for CSF3, play functions, userEvent, Testing Library queries, Chromatic configuration, autodocs, MDX.
Write, validate, render, and convert UIKitML for pmndrs/uikit interfaces. Use when working with .uikitml files, authoring spatial 3D UI or UI targeting VR/AR, using Three.js, @react-three/fiber, or IWSDK, choosing default/Lucide/Horizon components, fixing UIKitML validation errors, or using the @drawcall/uikitml CLI.
Design and troubleshoot weapp-tailwindcss dynamic class composition and runtime wrappers, covering @weapp-tailwindcss/runtime, merge, cva, variants, typography, theme-transition, ui, clsx, twMerge, weappTwIgnore, escape/unescape, rpx transformer, caching, and component class overrides. Use for dynamic classes, cn helpers, variant APIs, runtime package selection, or class escaping at runtime; not for initial bundler setup, React Native, or Lynx compiler configuration.
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
Plan a complete Amazon product image set that converts. Builds the shot list for the main image and the gallery, designs each infographic, plans lifestyle scenes, and sets the order so the gallery answers objections in sequence. Use when a user asks about listing images, the main image, the photo gallery, infographics, lifestyle images, image order, or what photos a listing needs. Trigger phrases: "listing images", "main image", "product photos", "image gallery", "infographics", "lifestyle images", "shot list". Works with zero tools. the user describes the product and its buyers.
Production-grade Bootstrap 5.3 patterns for building modern, responsive web UIs in HTML and ASP.NET Core Razor Pages/Views. Use when creating or styling web pages, layouts, navigation, forms, cards, modals, tables, or any UI component with Bootstrap 5. Covers the grid system, responsive breakpoints, utility classes, color modes (dark/light), accessibility, and integration with ASP.NET Core tag helpers and Razor syntax. Trigger on any task involving Bootstrap CSS classes, responsive HTML layouts, Razor Page UI design, or front-end styling for .NET web applications.
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.