Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Turn supplied plans, evidence, comparisons and explanations into clear, expressive, accessible HTML people can inspect and use. Support useful interaction and requested live updates. Exclude originating domain conclusions, decision prototypes, production UI and deployment.
Plan, write, time, style, and validate motion-graphic beats for long-form talking-head HyperFrames videos. Use when Codex is asked to add or improve visual beats, glassmorphism lower thirds, crumpled-paper full-screen takeovers, transcript-synced callouts, pacing coverage, YouTube retention graphics, or render-ready overlays in an existing HyperFrames video project.
Audits a Unity project for Meta VR Glasses readiness across input and field of view — finds controller-dependent interactions such as OVRInput usage, recommends hand-tracking and ISDK controller-to-hands migrations, produces a prioritized migration plan, and detects head-locked UI that a narrower FoV would clip.
Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table — wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.
Assistant for creating Mermaid diagrams. Use when the user explicitly requests a Mermaid diagram, or mentions a flowchart, architecture diagram, sequence diagram, state diagram, Gantt chart, ER diagram, user journey map, or class diagram and wants a Mermaid code block directly. First determine the most suitable diagram type, then generate clear, well-structured Mermaid code that can be rendered, with a brief explanation or iteration suggestions if needed. Not for scenarios that call for high-fidelity visual design mockups.
Audit-first redesign of ONE React Native screen (or one flow of 2-3 screens) - extract its current tokens and patterns, produce rated findings, then modernize it lever by lever with atomic commits and before/after screenshots. Preserves navigation, route names, and form semantics. Use when asked to redesign, refresh, modernize, or "make nicer" a specific existing screen. For whole-app redesigns use mobile-redesign-app; for a report without changes use mobile-design-review; for brand-new screens use mobile-taste.
Use when building or lighting a Roblox map: graybox or blockout, level layout, landmarks, doors and walls, parts versus unions (CSG), collision fidelity, terrain (generate, sculpt, paint, water, Part to Terrain), MaterialVariants, custom terrain materials, PBR textures from Scenario, skyboxes, Lighting, Atmosphere, Clouds, bloom, color correction, day or night moods, interior light, scattering rocks, bushes and trees, level of detail (SLIM, RenderFidelity), per-model streaming or a streaming test, collision overlays, invisible walls, or texture sizes. Also use when a map looks flat, foggy, too dark or plastic, grass pokes through floors, a doorway blocks players, content pops in or never unloads, a custom material disappears, or the sun lights the wrong side.
Search Experience Optimization: reads Google SERPs backwards to detect page-type mismatches, derives user stories from search intent signals, and scores pages from multiple persona perspectives. Identifies why well-optimized pages fail to rank by analyzing what Google rewards for each keyword. Use when user says "SXO", "search experience", "page type mismatch", "SERP analysis", "user story", "persona scoring", "why isn't my page ranking", "intent mismatch", or "wireframe".
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. For incremental edits to an existing system use manage-variables-figma; for syncing from a code tokens file use import-tokens-figma.
When the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "registration friction," "signup form optimization," "free trial signup," "reduce signup dropoff," or "account creation flow." For post-signup onboarding, see onboarding-cro. For lead capture forms (not account creation), see form-cro.
Build interactive presentation websites — slide decks projected to a room, controlled by one presenter. Use this skill WHENEVER the user wants to create, build, or design a presentation, slide deck, talk, or "bài thuyết trình / slide / trình chiếu", and also when they ask to add/edit slides, restyle a deck, scaffold a new presentation project, reuse their presentation setup in another repo, control slides from a phone (remote, QR code, "điều khiển slide bằng điện thoại"), or export slides to PDF — even if they don't say the word "slide" but clearly need projected talk visuals (e.g. "I'm giving a talk next week and need visuals", "dựng deck cho buổi chia sẻ", "làm mấy trang chiếu cho hội thảo"). Supports two tracks: a zero-build single HTML file, or a Vite + React project. Do NOT use it for printable documents, normal web apps, or dashboards meant for individual users to interact with.
Structure content for screen reader and assistive technology use. Chains: heading-structure, alt-text-design, table-accessibility, form-labelling. Use when building a new page, document, or content template and you want to get the structural accessibility right from the start.
Implements Syncfusion Vue Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Implement event scheduling, calendar views, and appointment management using Syncfusion Vue Scheduler component. Use this skill when working with calendars, event scheduling, appointment booking systems, resource management, timeline views, recurring events, drag-and-drop event handling, or any scenario involving time-based event visualization and management in Vue applications. Trigger for scheduler implementations, calendar integrations, booking systems, meeting planners, task schedulers, or resource allocation tools.
Applies professional color and font themes to slides, documents, reports, and HTML pages. Includes 10 pre-set themes (Ocean Depths, Sunset Boulevard, Modern Minimalist, etc.) with hex palettes and font pairings, plus on-the-fly custom theme generation. Use when the user wants to style or re-theme any visual artifact.
UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 99 UX guidelines, 105 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.
Use when the user wants a Vox-style / editorial motion-graphics look — the "printed, not lit" register: cream-paper canvas, halftone dots, heavy ink type, a single yellow highlighter marker, kinetic captions, hand-drawn annotations, and paper slap-ins. Trigger on "Vox style", "Vox-style explainer", "editorial motion graphics", "editorial collage animation", "kinetic typography explainer", "halftone / paper / newsprint animation", "highlighter / marker text animation", "animated map or data reveal in the Vox look", or "make it look like a Vox video". Also use when someone wants to CAPTURE a style they saw somewhere into their own reusable pack — see references/capture-your-own-style.md. Builds on HyperFrames (renders video from HTML); install heygen-com/hyperframes first.
Design and integrate web interfaces via three paths: DirectDesign (write design inline with Anthropic frontend-design philosophy — the default workhorse), native /design + /design-sync Claude Code commands (preferred for code integration and design-system sync), or ClaudeDesign (drive claude.ai/design through Interceptor — experimental visual-review fallback). USE WHEN web design, UI design, create prototype, design system, design sync, redesign site, mockup, landing page, dashboard design, design-to-code, frontend design, polish UI, design audit, brutalist/editorial/retro UI. NOT FOR illustrations/logos (use Art) or video (use Remotion).
Capture screenshots of live websites and web pages via API. Use when users need to screenshot a URL, capture website previews, archive web pages, generate thumbnails of sites, or document web content. Ideal for monitoring, archiving, sharing website previews, or creating visual references of web pages.
Creates research posters in HTML/CSS with responsive layouts and easy visual integration, exportable to PDF or PPTX. Use ONLY when the user explicitly requests a PowerPoint/PPTX/PPT poster, an HTML/web-based poster, or a poster they will edit in PowerPoint, or when LaTeX is unavailable. For a standard/conference research poster with no format named, use alterlab-latex-posters instead; for a slide deck/oral-talk presentation, use alterlab-scientific-slides. Part of the AlterLab Academic Skills suite.
Creates publication-quality scientific diagrams with Nano Banana 2 AI and smart iterative refinement, using Gemini 3.1 Pro Preview for quality review and regenerating only when quality falls below the document-type threshold. Use when the request is for a rendered technical or scientific diagram — CONSORT/PRISMA flowcharts, neural-network architectures, system/block diagrams, biological pathways, circuits, or other complex scientific visuals. For general photos, illustrations, or artwork use alterlab-generate-image; for infographics use alterlab-infographics; for editable text-based Mermaid diagrams use alterlab-mermaid. Part of the AlterLab Academic Skills suite.
Orchestrates matplotlib, seaborn, and plotly with opinionated publication styles to produce journal-ready figures. Use when preparing journal-submission figures that need multi-panel layouts with bold panel labels, statistical significance annotations, error bars, colorblind-safe palettes (Okabe-Ito), or specific journal formatting (Nature, Science, Cell). Does NOT cover raw low-level plotting or fine-grained control of individual plot elements; for building custom plots from scratch or tuning every artist and rcParam prefer alterlab-matplotlib instead. Part of the AlterLab Academic Skills suite.
Build any physical object (a product, a tool, furniture, an instrument, a shoe, a vehicle, a piece of jewellery, kitchenware, a toy, even a fruit or a flower) as a crafted isometric "anatomy" figure made of many small convex parts, then turn it into (1) an interactive dissection page you can drag, turn and take apart, and (2) a product-reveal film (MP4, 9:16, 4:5, 1:1 or 16:9, 30 fps, motion blur, white paper look, 10 s by default, any length from 3 to 60 s). The film tumbles in, whips to macro shots of the object's details, shows one feature working, explodes into its parts and snaps back together for a hero shot. Works from a photo of the object or from just its name. Use it when someone asks for an exploded view, a teardown or dissection drawing, an anatomy figure, or a product reveal or product motion video of an object.
This skill should be used when the user asks about Bootstrap components, "how to create a modal", "navbar not collapsing", "carousel autoplay", "responsive card grid", "toast notifications", "dropdown menu", "accordion FAQ", "offcanvas sidebar", "tab navigation", "tooltip not showing", "popover not working", Bootstrap accordion, alerts, badges, breadcrumb, buttons, button groups, cards, carousel, close button, collapse, dropdowns, list group, modal, navbar, navs and tabs, offcanvas, pagination, placeholders, popovers, progress, scrollspy, spinners, toasts, tooltips, or needs help implementing any Bootstrap UI component.
Create beautiful visual art in .png and .pdf documents using design philosophy. Use when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Add Duolingo-style play to any product — XP systems, juicy feedback, leagues, celebration moments, hearts/energy, and the anti-grind discipline that keeps gamification from turning toxic. Use when the user asks how to make a product fun, addictive, or "feel like a game," when designing rewards, levels, or progress, or when an existing system feels like a slot machine and they want it to feel like a craft. Source the Duolingo Handbook (Make It Fun) and the Duolingo design system.
Foundation for elite web design. Covers design philosophy, visual systems, and the design-to-code process. Use when asked about: premium website design, award-winning aesthetics, design systems, visual hierarchy, spacing, typography, color theory, data visualization, or "how to make this look professional". This skill provides the foundational thinking that informs all other elite-web-design skills. When loaded alongside animation skills (elite-gsap, elite-css-animations), provides the token foundation they reference.
Complete GSAP (GreenSock Animation Platform) reference for elite web animations. Covers ScrollTrigger, SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer, Draggable, timelines, Lenis smooth scroll, and framework integration. 2026 UPDATE: All GSAP plugins are now 100% FREE (Webflow acquisition). Use when asked about: GSAP, gsap, GreenSock, ScrollTrigger, scroll animations, SplitText, text animations, Flip plugin, layout animations, MorphSVG, DrawSVG, SVG animations, complex animations, animation library, pinned sections, horizontal scroll, parallax effects, smooth scroll, Lenis, or any sophisticated web animation needs. IMPORTANT: Always load elite-accessibility alongside this skill for reduced-motion patterns. References elite-design-core for design tokens.
This skill should be used when the user asks to "configure esp32-s3-box-3", "set up box-3", "create box-3 voice assistant", "display lambda on box-3", "configure ili9xxx display", "set up gt911 touch", "configure i2s audio", "es7210 microphone", "es8311 speaker", "box-3 audio pipeline", or mentions error messages like "I2S DMA buffer error", "Touch not responding", "Display flicker", "Audio popping", "PSRAM not detected". Provides complete ESP32-S3-BOX-3 hardware templates, display lambda cookbook, touch patterns, and voice assistant configurations.
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and optional code-parity + YAML frontmatter. Use when the user wants a docs page or handoff spec for a component or component set. Triggers: 'document this component', 'generate component docs/spec', 'create a docs page for the Button', 'write up the anatomy and variants', 'component handoff doc from Figma', 'turn this component into Markdown docs'. Reads the node tree, bound variables/tokens, and designer annotations, then the agent assembles Markdown. Requires the Figma Desktop app (Plugin API).
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.