Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Create, inspect, recolor, and repair Lottie animations, including converting SVG art into animated Lottie JSON. Use when asked to animate a logo, icon, or SVG; build motion graphics, micro-interactions, loaders, spinners, success/error states, toggles, or entrance animations; produce or edit a .json/.lottie animation file; re-skin one in a brand palette or dark mode; add wiggle, bounce, pulse, fade, scale, rotate, morph, or trim-path draw-on effects; build walk cycles or character rigs; or debug a Lottie that renders blank, jumps at the loop, or looks wrong in a player.
Event posters, promotional flyers, and announcement pieces for print or digital display, via Gemini 3.1 Flash image generation (default) or HTML/CSS. Covers print specs (bleed, 300 DPI, CMYK), composition frameworks, typography hierarchy, and backgrounds. Use when the piece is a standalone portrait/landscape poster or flyer; for feed posts use social-media-graphic, for web/email banners use banner-design. Trigger phrases: "design a poster", "create a flyer", "event poster", "promotional poster", "announcement design", "concert poster", "sale flyer", "product launch poster".
Sumi (formerly ux-ui-mastery), a UX/UI design-intelligence skill suite from Phazur Labs: a router skill plus deep skills for cognitive psychology UX, Nielsen Norman Group heuristics, UX research methods, interaction and motion design, accessibility and inclusive design, mobile and desktop UX, cross-cultural i18n UX, agentic AI and generative UX, ambient/zero UI, spatial and voice UX, design systems and tokens, component code, and reference-grounded visual design.
Enforces a disciplined widget/layout/golden/a11y test surface — one pumpApp harness that pins tester.view.physicalSize x devicePixelRatio and layers MediaQuery (textScaler/boldText/accessibleNavigation) above MaterialApp, an overflow net that never suppresses (one testWidgets per device x scale x bold tuple because overflow reports once per RenderObject), a computed getSize/getRect fit-and-geometry gate instead of goldens, two golden lanes (Ahem geometry + one pinned-OS real-font) with loadAppFonts and blocked --update-goldens, RTL goldens under Directionality, pure-Dart WCAG/APCA contrast on colour VALUES, and honest limits on meetsGuideline. Use when writing test/support/harness.dart, calling pumpWidget/pumpApp, chasing an "overflowed by N pixels" failure, reaching for takeException/ignoreOverflowErrors/FittedBox/withClampedTextScaling, adding matchesGoldenFile, or writing a11y_test.dart with isSemantics/simulatedAccessibilityTraversal/meetsGuideline.
Review, critique, rewrite, or design product error messages and error-handling UX. Use when Codex is asked to improve validation errors, server failure messages, empty/failure states, toast/dialog copy, support escalation paths, or error-message inventories so users understand what happened, what was not affected, and what to do next.
Adds Animate.css (v4.1.1) animations to HTML, React/JSX, and WordPress PHP templates. Includes scroll-trigger via Intersection Observer, RTL directional flipping, and prefers-reduced-motion compliance. Bundles the Animate.css library, so no CDN is needed.
Focused product-management skills spanning the full lifecycle: discovery (user interviews, problem validation, JTBD, research synthesis), strategy (competitor analysis, positioning, strategy docs), prioritization (RICE, Shape Up scope-cutting and bet-sizing), evidence-first PRDs, plus launch plans, North Star metrics frameworks, A/B experiment design, and Now/Next/Later roadmaps.
Add visuals to the edited voiceover: overlay HTML layers on the screen recording (highlight annotations / full-screen small black animations / zoom-ins), bind layers to the subtitle screen, drive them frame by frame from the player, and view them directly in the preview. Use when users ask for a storyboard, visuals, animations, highlighted callouts, B-roll, or a storyboard. Do not use for word-deletion editing, subtitles, physical cuts, or final video rendering.
Skill set that enforces design system compliance when Claude writes to Figma through the Figma MCP server: components are instances of master components, and colors/fonts/spacing/radii bind to Figma variables and styles instead of raw values. Every canvas write is followed by a binding check. Needs a Figma file with a design system and the Figma MCP server.
HTML-native design skill for high-fidelity prototypes, slide decks, animations, data visualizations and expert design review, with a library of named design styles and PPTX, PDF, MP4 and GIF export. Agent-agnostic; its own prompts are written in Chinese.
Guides safe, evidence-led changes to the TaxonomicFilter, PostHog's picker for events, actions, properties, cohorts, and more. Use when adding features, fixing bugs, removing groups or tabs, changing search, ordering, recents, pinning, empty states, loading or performance, or refactoring the classic picker, rebuild menu, or headless filter panel. Indexes how users actually pick, known failure modes, the feature inventory, design principles, contested decisions, where to find evidence, and how to measure a change.
Generate clickable low-fidelity, hand-drawn wireframes (Balsamiq style) for web UI from a text description: a self-contained single-page prototype with sketchy wired-elements components, doodle icons and a graph-paper background. Focuses on layout, content and flow before visual design.
Use when the user has one or more video clips and wants to add post-production on top — AI-generated cover as first frame, HTML/CSS captions synced to SRT, kinetic illustration overlays at hook moments, chapter chips, end-card CTA, or any other timed motion graphics. Most often used as the downstream of `/wjs-segmenting-video` — pick up where that skill stopped (raw cropped clip + per-clip SRT) and produce the upload-ready MP4. Backed by HyperFrames so everything compiles to ONE final encode — no cascade of re-encodes. Triggers — "加封面", "加字幕", "加动画", "加 CTA", "做后期", "post-production", "title card", "kinetic captions", "end card".
Expert skill for designing, building, and deploying modern premium websites with advanced animations and 3D interactive experiences using Three.js, React Three Fiber, GSAP, and Framer Motion. Use this skill whenever the user wants to build a website with 3D elements, create an immersive web experience, add interactive 3D graphics to a page, build a premium landing page with cinematic visuals, design a modern startup website with animations, create WebGL or Three.js scenes, build a product showcase with 3D models, or produce any kind of visually impressive, award-winning web interface. Also trigger when the user says things like "make it look like Awwwards", "add 3D to my site", "build an interactive landing page", "create an immersive experience", "premium website with animations", "modern startup page", "hero with particles or globe", "floating 3D elements", or mentions anything related to Three.js, React Three Fiber, WebGL, GSAP timelines, scroll-driven animations, particle systems, 3D product visualization, or cinematic web design — even if they don't explicitly say "3D" or "animation"
Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop
Use when building a PlayCanvas game's on-screen interface such as ready, pause, and victory overlays, menus, and live indicators like gauges, timers, or reload meters, so the interface is driven by game state, readable over the scene, and separate from the 3D hierarchy.
Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says “css animation”, “animate this feature”, “create a css walkthrough”, “animation walkthrough”, or wants to create a CSS-based visual demo of an app feature
Create dark-themed, animated technical diagrams as self-contained HTML+SVG files—flowcharts with visibly flowing connectors and architecture diagrams where requests travel through the system as light dots (Diagrid/Temporal landing-page style). Use whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram—especially when they mention “animated,” “flowing,” “dynamic,” “alive,” “GIF-like,” or want a diagram for a landing page, README, docs, or product demo. Also use it to convert Mermaid source (a mermaid code block or .mmd file) into an animated diagram: “animate this mermaid,” “make this flowchart move.” Prefer this over static diagrams whenever the diagram represents anything that moves: requests, events, data, jobs, messages, or control flow.
Searches Google Fonts enriched with personality and mood tags, suggests proven pairings, generates CSS custom properties, Tailwind config, and embed links, and offers modular type scales. Works as a skill with bundled Python scripts, or as an MCP server.
Create or modify Halo CMS themes, including Thymeleaf templates, theme.yaml and settings.yaml, Finder APIs, static assets, Vite integration, theme UI providers, page-layout integration, annotations, i18n, and error pages. Use for Halo site theme implementation, migration, debugging, or packaging; do not use for unrelated Thymeleaf applications or plugin-only changes
Use when the user wants copy-ready AI scientific illustration prompts based on papers, research documents or text, figure captions, proposal or defense materials, or reference images that can be interpreted visually. Triggers include paper figures, scientific illustration, graphical abstracts, mechanism diagrams, technical roadmaps, experimental setup diagrams, model architecture diagrams, multi-panel comparisons, presentation overview figures, reference-image style transfer, creating templates for unfamiliar fields, or uploading or citing PDFs, Word, LaTeX, Markdown, abstracts, methods sections, figure captions, project descriptions, research plans, or reference images. Also use for scientific figure or research illustration prompts, graphical abstract prompts, mechanism diagrams, technical roadmaps, experimental setup diagrams, model architecture diagrams, multi-panel scientific figures, paper or conference figures, or AI image prompts based on papers, research documents, abstracts, methods sections, figure captions, proposals, reference images, PDFs, Word docs, LaTeX files, Markdown files, or research plans.
Apple-level product design — visual systems, UX flows, accessibility, proprietary visual language, design tokens, prototyping, and handoff. Covers Figma, design systems, typography, color, spacing, motion design, and cognitive design principles.
Expert product discovery guidance for user research and problem validation. Use when conducting user interviews, validating problems, applying the jobs-to-be-done framework, sizing opportunities, customer segmentation, competitive analysis, prototype testing, usability testing, designing surveys, or synthesizing research insights. Covers discovery sprints, continuous discovery, and research operations
Find shadcn registry items by keyword to install, compare registries, or verify before add. Use when the user wants a component but didn't give @registry/name or asks which registry has X — even without mentioning MCP. Keyword on names/descriptions only; not layouts, blocks, or semantic search (shoogle.dev/search). Skip known add targets.
Create or revise Chinese social media covers using the registered Skill-封面 asset system, reusable styles, presenter identities, ratio-specific layouts, and precise replacement prompts. Use only when the user explicitly says “skill-cover”, “Skill-封面”, or “实战风格”; requests registered style or gesture assets; asks for simultaneous 3:4 and 4:3 registered-layout output; replaces a reference cover’s person with the current digital-human frame; or extends this registered cover system. Do not use for generic “制作封面/生成封面” requests; use dog-skill for generic cover requests.
Production-ready Tailwind CSS patterns for common website components: responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, and dark mode support. Use when building UI components, creating landing pages, styling forms, implementing navigation, or fixing responsive layouts.
Generates agent-friendly DESIGN.md files for Google Stitch that enforce premium, anti-generic UI standards: strict typography, calibrated color, asymmetric layouts, and perpetual micro-motion. The DESIGN.md then steers Stitch's screen generation away from generic AI defaults.
Guide for creating logos, brand identities, and visual assets with AI tools: which tool fits which scenario (Recraft, Midjourney, Firefly, DALL-E, Stable Diffusion), prompt engineering per tool, vectorization pipelines, mockups, Python automation, and IP safety. The skill text is in Portuguese.
Static visual content across 20+ formats — diagrams, mermaid, infographics, D3 dashboards, comics, icons, wallpaper — via Nano Banana Pro (default), Nano Banana, and Flux. Use when art, illustration, diagram, flowchart, infographic, header image, blog social thumbnail, visualize, generate image, mermaid, architecture diagram, comic, icon, blog art, framework diagram, D3 chart, remove background, wallpaper. Not for locked house-style YouTube/channel/video thumbnails, video or animation (use Remotion), or web UI design and integrated frontend layout (use Webdesign).
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
Generate professional presentations with AI-generated images. Use when asked to create a deck, presentation, pitch deck, or slides. Supports style presets (whiteboard, corporate, minimalist, etc). Uses Imagen 4.0 API for image generation and Google Slides API for assembly. Produces full decks from markdown content specs in minutes.
Create deterministic editorial-style cover images with a warm paper-gray background, oversized black slab-serif/Chinese display typography, generous whitespace, and a dotted vector analysis icon. Use when the user asks for a “点阵编辑风封面”, “暖灰杂志风封面”, “Codex + Hyperframes 同款封面”, or wants to reproduce/adapt the specific minimal left-text/right-icon banner style. Produce editable SVG and a rendered PNG; do not use this skill for generic covers without this visual direction.
Reverse-engineer a Stitch-compatible DESIGN.md design system from existing frontend source code. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens in React, Vue, Svelte, Angular, or plain HTML/CSS, and writes a structured document that can be version-controlled, shared with the team, and used to keep future UI consistent.
Enforces the gen-l10n/ARB localization contract: every string through AppLocalizations from a template app_en.arb, key + placeholder parity, nullable-getter:false so a missing key is a compile error, ICU plural/select over concatenation, Directional-only geometry (EdgeInsetsDirectional, AlignmentDirectional, TextAlign.start, Icons.adaptive), FSI/PDI isolation for mixed-script runs, per-locale NumberFormat with a pinned numbering system, canonical UTC-epoch + ASCII storage projected only at render, normalize-to-ASCII before any parse, and three vendored LocalizationsDelegates ahead of the Global* ones for a locale flutter_localizations lacks. Use when adding or translating an ARB key, building an RTL screen, formatting or parsing dates/numbers/numerals, wiring l10n.yaml, AppLocalizations, or MaterialApp localizationsDelegates, supporting a locale Flutter lacks (ckb), fixing a locale that crashes on Tooltip or renders LTR, checking bundled-font glyph coverage, isolating technical IDs, or touching app_*.arb.
Use when designing motion concepts, animation systems, choreography, timing, easing, reduced-motion behavior, or deciding which motion stack to use for web UI, video, GIF, Rive, Lottie, GSAP, Motion, Remotion, or Three.js work
SwiftUI skills for iOS 26: Liquid Glass, a UI/UX review engine, component patterns, on-device AI (Foundation Models), and vendored Pro skills for SwiftUI review, Swift Testing, Swift concurrency, and SwiftData. The author states they were verified against WWDC 2025 docs and Xcode 26.3. Different from swiftui-patterns, which focuses on general SwiftUI best practices.
Implement Syncfusion React DatePicker component with comprehensive guidance on date selection, formatting, validation, and accessibility. Use this when working with date input fields, date range pickers, custom date formats, locale-specific date handling, or keyboard navigation. This skill covers installation, setup, date formatting, validation, styling, globalization, and accessibility features.
Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
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.