Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Design or critique UI buttons — pick the right button type for the action's importance, apply sizing/label/state best practices, and gate stylistic levers like shape, shadows, FABs, and icon-only buttons. Trigger when the user asks to design, choose, style, or review buttons, CTAs, button labels, button hierarchy, or button states.
Design or critique tooltips and contextual hints — decide when a tooltip clarifies vs. when it's a crutch for unclear design, and apply placement, styling, and brevity rules. Trigger when the user asks to design or review tooltips, hover hints, info icons, contextual help bubbles, or asks whether something needs a tooltip.
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.
Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.
Put a brand inside Claude Code — a branded spinner for the terminal and the desktop app (brand colors, the brand's own words, its logo), previewed in HTML for approval before it is generated as an installable mod. Use when the user says "brand our Claude Code", "branded spinner", "Claude Code mod with our brand", "custom spinner", "make the terminal on-brand", "brand the agent", "spinner with our logo", "show our brand while Claude works", or wants their team's or a client's Claude Code to look like their brand (for screen recordings, demos, or daily use). Claude Code only — mods don't exist in other agents.
Apply the formal standard for React component engineering focusing on accessibility, composition, and styling. Use for building professional, composable React artifacts. Use proactively when creating or reviewing React components. Examples: - user: "/component-create Button trigger" → build accessible button with asChild and keyboard map - user: "/component-review src/components/Input.tsx" → audit for accessibility and composition compliance - user: "Build a responsive slider" → select taxonomy type and implement with data attributes - user: "Review my layout component" → check for monolithic patterns vs composition
Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.
Compose screen and interaction traps: navigation, adaptive layout, window insets, pagers, toolbars, sheets, list drag and selection, sliders, text fields, settings UI, one-shot effects. Use when layout, gestures or navigation misbehave.
Compose look-and-feel traps: theme and colour tokens, artwork palettes, gradients and scrims, shimmer, glass and particle effects, animation, image loading, charts and stats displays (percent changes, shares, buckets). Use when a visual bands, pops, freezes or misleads.
Build or transform ecommerce websites from loose company, product, or brand briefs into unconventional, brand-specific shopping experiences with original ImageGen product imagery. Use when a user asks for a crazy, wild, experimental, unconventional, anti-template, art-directed, or highly memorable online store; wants Codex to invent an ecommerce visual direction from business details; or wants a working storefront that combines creative concepting, generated product photography, responsive implementation, cart interactions, validation, and optional publishing.
Felo SuperAgent API: AI conversation with real-time SSE streaming on a persistent LiveDoc canvas. Use when users want SuperAgent chat, continuous conversation, logo/branding design, or e-commerce product images. Do NOT use for tweet/X post writing — use felo-twitter-writer instead. Explicit commands: /felo-superAgent.
Use when adding, modifying, or removing toolbar buttons and click flows on a Datex Studio hub configuration. Covers fetching hub config via `dxs configuration get hub`, editing the toolbar[] and flows[] arrays, wiring click flows that launch reports, and pushing the modified config back with `dxs configuration upsert hub`. Trigger for: "add a toolbar button to the X hub", "wire a button that opens the Y report", "modify hub N", "change what the X button does", "launch report Y from a hub button".
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.
REQUIRED for all image generation requests. Generate and edit images using Nano Banana (Gemini CLI). Handles blog featured images, YouTube thumbnails, icons, diagrams, patterns, illustrations, photos, visual assets, graphics, artwork, pictures. Use this skill whenever the user asks to create, generate, make, draw, design, or edit any image or visual content.
Create or redesign SaaS and AI product landing pages where a real workflow, interface, or deterministic demo is the central proof. Use for pale atmospheric shells, product UI in the hero, prompt-to-output stories, audience tabs, compact feature modules, honest pricing comparisons, and FAQ handoffs.
Create professional SVG logos from concept briefs or descriptions. Use when generating SVG logo files, creating logo variations (horizontal, vertical, icon-only), or implementing logo designs. Triggers on "create SVG logo," "generate logo," "make a logo," "logo SVG," "design a logo," or when given a logo concept brief from logo-ideation.
Complete guide to implementing Syncfusion ASP.NET Core Card component with layout structures, headers, images, actions, and advanced customization. Use this skill when building card-based layouts, displaying content with headers and images, creating action buttons, or organizing responsive card designs.
Implement the Syncfusion ASP.NET Core DropDownTree component to bind hierarchical and self-referential data, enable checkbox selection, customize templates, implement keyboard accessibility, and handle tree interactions when building multi-level dropdown selections.
Implement the Syncfusion ASP.NET Core Smart Paste Button for AI-powered form auto-filling using clipboard data. Use this skill when configuring OpenAI/Azure OpenAI, creating form field annotations, customizing button appearance, implementing custom inference backends, or managing intelligent data mapping from clipboard to form fields.
Implement the Syncfusion ASP.NET Core Smart TextArea for AI-powered inline or popup text autocompletion. Covers OpenAI, Azure OpenAI, Ollama, and custom IChatInferenceService backends, plus UserRole, UserPhrases, and suggestion display mode customization.
Implement Syncfusion ASP.NET Core Splitter component for building responsive multi-pane layouts. Use this when implementing splitter layouts, configuring panes, enabling resize functionality, or creating complex nested layouts with multiple split sections.
A simple toolbar component that organizes command buttons and responsive controls into a horizontal interface. Ideal for document editors, content management systems, and application headers to trigger actions and manage user workflows efficiently.
Design or critique UI cards — one-topic, scannable cards with clear hierarchy, the right container style (elevated, outlined, flat), and restrained shadows. Trigger when the user asks to design or review cards, card layouts, card grids, content tiles, user/profile cards, or a browse view built from cards.
Design or critique empty states — first-use screens, cleared states, no-results pages, and 404s that explain why the screen is empty and guide the next action instead of dead-ending. Trigger when the user asks to design or review an empty state, blank screen, zero-data view, first-run dashboard, no-results page, or 404 page.
Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems
This skill should be used when the user asks about Bootstrap grid system, Bootstrap containers, Bootstrap breakpoints, Bootstrap columns, Bootstrap rows, Bootstrap gutters, Bootstrap responsive layout, Bootstrap CSS Grid, Bootstrap z-index, Bootstrap row-cols, Bootstrap offset classes, Bootstrap column ordering, how to create responsive layouts with Bootstrap, how to use Bootstrap grid, Bootstrap column sizing, Bootstrap auto-layout columns, or needs help with Bootstrap page layout and responsiveness.
Handles Tambo component streaming, loading states, and persistent state. Use when implementing streaming UI feedback, tracking prop streaming status, managing partial props, or persisting component state across sessions with useTamboStreamStatus or useTamboComponentState.
Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.
Design movements from Arts and Crafts through Bauhaus, Swiss Style, Memphis, and grunge to flat design and current styles, with context, visual markers, and UI tokens for each. Use when choosing an aesthetic direction, explaining why a style reads the way it does, or applying a period style without misusing it.
MUST use BEFORE writing or answering yourself for ANY request involving users, customers, a market, or product decisions — drafting a PRD, requirements or spec, prioritising features, roadmaps, user research, interviews, surveys, market and competitor analysis, customer journeys, design feedback, comparing options, or hearing people discuss or debate a topic. Never answer from general knowledge and never simulate, role-play, or invent people's opinions yourself — route the request to the correct Evidenso research tool instead.
Creates Excalidraw diagrams programmatically. Use when the user wants flowcharts, architecture diagrams, system designs, or any visual diagram instead of ASCII art. Outputs .excalidraw files that can be opened directly in Excalidraw or VS Code with the Excalidraw extension.
Use when the user says 'figma to elementor', 'build this figma design in elementor', or hands over a Figma frame to rebuild in WordPress. Maps the Figma node tree to Elementor widgets and containers and writes clean Elementor JSON into a draft duplicate, so nothing live is touched.
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial, technical, or guide-border web layouts.
Use when creating or substantially redesigning web interfaces, landing pages, dashboards, components, or other frontend UI where visual direction and implementation quality matter. Produces subject-specific art direction, accessible code, and rendered visual verification
Generate and edit images with OpenAI GPT Image 2 (ChatGPT Images 2.0) on RunComfy. Documents GPT Image 2's strengths (embedded text, logos, multilingual typography, instruction precision), its 3 fixed sizes, edit-with-preservation language, and when to route to a sibling (Flux 2 / Nano Banana Pro / Seedream) instead. Calls `runcomfy run openai/gpt-image-2/text-to-image` or `/edit` through the local RunComfy CLI. Triggers on "gpt image 2", "gpt-image-2", "ChatGPT Images 2", "image 2", or any explicit ask to generate or edit with this model.
Use for Lanhu (蓝湖) UI design handoffs and lanhuapp.com design project links: list design screens, inspect screenshots and HTML/CSS specs, extract design tokens, download slices/assets, or implement UI. Trigger when the request explicitly mentions 蓝湖, Lanhu, lanhuapp.com, or the bundled Lanhu scripts. Do not use for standalone Figma/Sketch files, generic UI implementation, PRD/Axure docId links, or image editing unrelated to Lanhu.
Transform a user-supplied personal photograph into a source-faithful, typography-driven Morandi cinematic poster without stars or decorative collage symbols. Use film-poster title design, optional poetic byline and tagline, atmospheric metadata, optional fictional credits, intentional negative-space placement, perspective alignment, and selective subject occlusion. Use for architecture, travel, street, skyline, landmark, portrait, or lifestyle photographs when the user wants movie-poster mood and hierarchy without needing a real film, cast, director, studio, award, or release campaign.
Reproduce a UI as exactly as possible from a reference (Figma, live source, screenshot, or image). TRIGGER when: user wants to copy a design exactly, reproduce a screen from a screenshot, clone a Figma design, match spacing/colors/typography in detail, or port a design to another framework without changing the look. DO NOT TRIGGER for redesigns, loose "something like this" requests, or UX improvement tasks.
Generate, edit, and read PowerPoint presentations. Create from scratch with PptxGenJS (cover, TOC, content, section divider, summary slides), edit existing PPTX via XML workflows, or extract text with markitdown. Triggers: PPT, PPTX, PowerPoint, presentation, slide, deck, slides.
Prompt patterns for consistent UI generation: stating design intent precisely, component specification formats, few-shot examples, and structured refinement loops. Use when UI output from an LLM is inconsistent or generic, or when building reusable prompt templates for a design system.
R3F performance optimization—LOD (Level of Detail), frustum culling, instancing strategies, draw call reduction, frame budgets, lazy loading, and profiling tools. Use when optimizing render performance, handling large scenes, or debugging frame rate issues.
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.