Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Rebuild an existing site's pages with byte-faithful content on a separately-defined donor design system — another live site, or local static HTML prototypes (Figma donors are contract-defined, not yet implemented). Content fidelity is gated byte-level (text, ordered images, SEO metadata); design application is flexible (content re-laid-out onto donor modules). Use when the user says “reskin my site with this design”, “apply this design system to my content”, “restyle my site to look like <other site>”, “new design, same content”, “rebrand my site using these prototypes”, or names a content site plus a design donor. NOT for redesigning from intent (that's the stardust core extract/direct/prototype chain) and NOT for keeping the current design while migrating (that's the replica flow)
Expert guidance for Satori, the library that converts JSX/HTML and CSS into SVG (the engine behind dynamic Open Graph images and social cards). Use whenever writing or debugging Satori markup e.g. authoring JSX for OG images, choosing CSS that Satori actually supports, fixing layout that renders wrong, embedding fonts, rendering emoji or images, or resolving Satori errors like "Expected length unit" or unsupported property issues. Reach for this any time someone renders HTML/CSS to SVG or PNG with Satori, even if they do not name it.
Implement Syncfusion Blazor Bullet Chart (SfBulletChart) for KPI and performance visualization. Use this when displaying target vs actual metrics, goal tracking, or performance dashboards. This skill covers actual/target bars, qualitative ranges, and comparative analysis for KPI visualization in Blazor applications.
Compose pages and sites that read as their vertical: ecommerce-catalog storefronts that look like storefronts, hospitality-food sites that look like restaurants, b2b-manufacturer sites that look industrial. Use this skill whenever the user wants to build a site that looks like the vertical it serves, fix a build that reads as generic or off-vertical, build to an experience bar produced by competitor-experience-audit, or compose pages with the merchandising, density, and layout conventions a credible site in the category is expected to carry. Triggers on vertical conventions, storefront layout, ecommerce layout, retail conventions, merchandising layout, category page composition, site composition, build to the experience bar, make it look like the vertical, off-vertical, looks generic, build conventions for a vertical, site grammar. Also triggers when a build that is technically clean reads wrong for its category, and the cause is composition, not visual taste.
A guide to Vue.js 3 best practices covering the Composition API, component design, reactivity patterns, utility-first styling with Tailwind CSS, native integration of the PrimeVue component library, and code organization. Use when writing, reviewing, or refactoring Vue.js code to ensure idiomatic patterns and maintainable code.
Build compact, distinctive landing pages and product skeletons without repeating one visual template. Use for package demos, developer tools, documentation intros, focused product pages, and micro-SaaS sites that should feel small, polished, tactile, product-specific, and visually different on each run. Vary composition, palette, typography, radius, surfaces, motifs, and safe motion while preserving clear actions, accessibility, responsive behavior, and zero layout shift
Check that the UI you actually rendered uses the design system by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.
Expert blueprint for VR platforms (Meta Quest, PSVR, SteamVR, Pico), covering the XR toolkit (OpenXR), comfort settings (vignetting, snap turning, teleportation), motion controls, hand tracking, and 90+ FPS requirements. Use when targeting VR headsets or implementing immersive 3D experiences. Keywords: VR, XR, OpenXR, Meta Quest, motion sickness, comfort, locomotion, XRController3D, foveated rendering.
Standardizes UX states for data fetching flows (loading, error, empty, success) and complex multi-view UI patterns. Provides state machine approach recommendations, loading skeletons, error boundaries, and empty state components. Use when implementing "loading states", "error handling", "empty states", or "state machines".
Implements the Syncfusion Blazor Chart Wizard for guided chart creation. Use this when building interactive chart builders that require step-by-step configuration, data binding, and export features. Covers chart customization, theming, and accessibility.
Builds .NET UI apps across Blazor (Server, WASM, Hybrid, Auto), MAUI (XAML, MVVM, Shell, Native AOT), Uno Platform (MVUX, Extensions, Toolkit), WPF (.NET 8+, Fluent theme), WinUI 3 (Windows App SDK, MSIX, Mica/Acrylic, adaptive layout), and WinForms (high-DPI, dark mode) with JS interop, accessibility (SemanticProperties, ARIA), localization (.resx, RTL), platform bindings (Java.Interop, ObjCRuntime), and framework selection. Spans 20 topic areas. Do not use for backend API design or CI/CD pipelines.
Complete reference for all SGDS web components, including installation and framework integration. Use when users ask about any <sgds-*> component: accordion, alert, badge, breadcrumb, button, card, checkbox, close-button, combo-box, data-table, datepicker, description-list, divider, drawer, dropdown, file-upload, footer, icon, icon-button, icon-card, icon-list, image-card, input, link, mainnav, masthead, modal, overflow-menu, pagination, progress-bar, quantity-toggle, radio, select, sidebar, sidenav, skeleton, spinner, stepper, subnav, switch, system-banner, tab, table, table-of-contents, textarea, thumbnail-card, toast, or tooltip. Also covers React 19+, React ≤18, Vue, Angular, and Next.js integration.
A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".
Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. Triggers on: "create a presentation", "slide deck", "pitch deck", "HTML presentation", "web-based slides", "reveal.js deck", "convert document into slides".
The Jobs-to-be-Done framework as an applied product methodology. Job statements, struggling moments, hire and fire criteria, and the difference between feature-thinking and job-thinking. Honest about where JTBD adds clarity (discovery, prioritization, positioning) and where it becomes performative ritual (job-statement workshops that do not drive decisions, persona-theater disguised as JTBD). Trigger on jobs-to-be-done, JTBD, job statements, struggling moments, hire criteria, fire criteria, switch triggers, functional, emotional, and social jobs, and outcome-driven innovation. Also trigger when a team is over-relying on feature-request lists or persona archetypes that do not drive product decisions, when a positioning conversation needs the framing JTBD provides, or when discovery is producing outputs that do not connect to product strategy.
Advanced Tailwind CSS component patterns with CVA (class-variance-authority) and variant management. Proactively activate for: (1) building reusable component variants with CVA, (2) compound variants for complex states, (3) safe class composition with tailwind-merge, (4) conditional classes with the clsx/cn utility, (5) styling Headless UI / Radix UI primitives with Tailwind, (6) shadcn/ui patterns, (7) component slot patterns (asChild), (8) polymorphic components, and (9) prop-driven design tokens. Provides CVA setup recipes, cn utility implementation, compound-variant patterns, shadcn/ui-style component templates, and asChild slot examples
Create functional, emotionally resonant audio for digital products using Audio UX methodology—from notification sounds to complete sonic systems. Use for designing app notification sounds; creating a complete audio system for a digital product; adding audio feedback to UI interactions; building accessible audio cues; or defining audio guidelines for product teams.
Chakra UI v3 (React component library) reference. Also known as: Chakra, chakra, chakra-ui. Components (Button, Input, Modal, Drawer, Toast, Menu, Tabs, Tooltip, etc.), layout, forms, overlays, charts, themes, recipes, style props, responsive design, dark mode, and Chakra UI Pro blocks
Make an Apple-style monochrome dimensional drawing of a UI component or physical product — title-block summary plus one dense drawing sheet with variable-based dimensions. Use when asked for an anatomy, spec sheet, redline or dimensional drawing of a component.
Generate Excalidraw diagrams from natural language descriptions. Outputs .excalidraw JSON files that can be opened in Excalidraw. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", "generate an Excalidraw file", "draw an ER diagram", "create a sequence diagram", or "make a class diagram". Supports flowcharts, relationship diagrams, mind maps, architecture, DFD, swimlane, class, sequence, and ER diagrams. Can use icon libraries (AWS, GCP, etc.) when set up. Do NOT use for code architecture analysis (use the architecture skills), Mermaid diagram rendering (use mermaid-studio), or non-visual documentation (use docs-writer).
Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
Compose new Rails backend pages and refactor existing Rails UI to use premium blocks from templates/application-ui. Use when requests mention ERB views, Rails partials, admin/dashboard screens, Tailwind UI assembly, or replacing custom markup with existing premium blocks while preserving behavior, accessibility, and Turbo/Stimulus hooks.
Build, explain, and modify @react-three/start apps that use file-based React Three Fiber scene and DOM composition. Use when working in a react-three-start project, when the user mentions @react-three/start, react-three-start, R3F app structure, .scene.tsx/.dom.tsx files, Scene/Dom slots, wrappers, start.config.ts, or the react-three-start/r3s CLI.
Integrates the uView UI component library into UniApp projects, including easycom configuration, pages.json and manifest.json setup, SCSS theming, and platform-specific handling (H5, mini-program, App, nvue). Use when the user needs to add uView UI components to a UniApp project, configure easycom auto-import, or handle cross-platform styling
How to make UI5 Web Components applications accessible. Covers accessibility APIs (accessibleName, accessibleNameRef, accessibleDescription, accessibleRole, accessibilityAttributes), label-input relationships, invisible messaging, keyboard handling, high contrast themes, and screen reader support. Use when the user asks about ARIA attributes, screen readers, keyboard navigation, accessibility properties, or making their app accessible
Create, package, install, watch, and verify a complete original CodeDrobe theme for the OpenAI Codex desktop app on macOS or Windows from a single natural-language request. Use when a user asks for a Codex skin/theme, describes a visual concept such as “make me a kung-fu football theme,” wants an image-backed home and conversation design, or asks to create and directly install/apply a `.codedrobe-theme` without a multi-turn setup process.
Create distinctive, memorable UI for landing pages, portfolios, marketing sites, and one-off creative work. Use when the user explicitly wants something "distinctive", "creative", "memorable", or "unique" - NOT for standard app components where consistency matters
Build modern web applications with React, Vue, Angular, or Svelte, focusing on performance and accessibility. Use when you need component library development, TypeScript UI implementation, responsive layouts with CSS Grid and Flexbox, Core Web Vitals optimization, service worker offline support, code splitting, ARIA accessibility, Storybook integration, or frontend API client architecture.
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.
Emil Kowalski's design engineering skills. Creator of Sonner, Vaul, and animations.dev. Covers the animation decision framework, custom easing curves, component interaction principles, and typography rules, plus skills to review, audit, and improve motion, performance, and native-feeling mobile web UI.
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.