Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Strict design and UX rules for React 19 + Next.js 16 (App Router) + Tailwind CSS 4. Covers navigation, interaction design, accessibility, user feedback, UX patterns, and visual design. Use when designing, building, or reviewing any user-facing web feature on this stack. Trigger when the user asks to “build a settings page”, “add a dialog”, “design this form”, “review for accessibility”, “fix dark mode”, or requests any Next.js App Router / React 19 / Tailwind UI task. Also trigger when the user says the output “looks off”, “isn't accessible”, or “doesn't follow best practices”.
Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
Load this skill whenever the project contains dynamic content updates, status messages, alerts, notifications, loading indicators, or any use of aria-live, role="status", role="alert", or role="log". Under no circumstances add or modify live-region markup without applying these rules. Prioritize correct politeness levels and avoid redundant announcements. Never use a fixed-delay clear-and-reinsert workaround — no standard guarantees it works.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill 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.
Figma design bridge for Claude Code: browse Figma files through the figma-developer-mcp server, download assets, extract design tokens, and generate code for Tailwind, React, Vue, Svelte, React Native, Flutter and plain CSS. Also finds Figma Community resources that match the project. Needs a Figma access token and the figma-developer-mcp server.
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Includes framework-specific guidance for Tailwind, React, Vue, and Rails/Hotwire ecosystems.
Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation. Use for multiple UI versions, interaction alternatives, progressive-disclosure options, or when styling is fine but hierarchy/workflow/interaction feels off. Not for static visual-style calibration (use design-style-picker) or a settled CSS tweak.
Load this skill whenever the project supports light/dark mode, color theme switching, high-contrast mode, or responds to prefers-color-scheme. Under no circumstances hard-code colors that break in alternative themes. Always test color contrast in both light and dark themes, and respect user OS-level color preferences via CSS media queries.
Screenshot localhost/local dev-server pages across viewports and compare them for visual regression. Use when asked to "screenshot my local site", "capture localhost pages", "visual diff", "compare screenshots", "responsive screenshots", "check breakpoints", "visual regression", or capture a Portless app at a named .localhost URL. Not for public URLs or writing e2e tests.
UX/UI audit skills, each a structured methodology: ux-audit-rethink (IxDF UX factors), nielsen-heuristics-audit, wcag-accessibility-audit (POUR framework), don-norman-principles-audit, cognitive-walkthrough, ui-design-review, and information-architecture-audit. The package also holds AI-governance and security-audit skills that this catalogue does not install.
Official OpenAI skills relevant to design work: image generation and editing, desktop screenshot capture, and Figma skills for design implementation, Code Connect component mapping, and design system rules. Part of a larger curated OpenAI skills repo.
Builds accessible, customizable component libraries using shadcn/ui with Radix UI or Base UI, Tailwind CSS 4, and React 19. Covers component ownership, oklch CSS theming, type-safe forms with Field and Zod, CLI workflows, and registry patterns. Use when adding shadcn/ui components, configuring themes, building forms with Zod, creating custom registries, or composing accessible component variants. Use for shadcn CLI, dark mode, component variants, form validation.
Implements the Syncfusion WPF DockingManager control for Visual Studio-like docking interfaces with MDI/TDI support, floating windows, and auto-hide panels. Use when creating docking layouts, window management systems, tabbed document interfaces, or IDE-style layouts in WPF applications. Covers dock panels, floating windows, auto-hide functionality, state persistence, and window management.
Comprehensive guide for implementing Syncfusion WPF IntegerTextBox control for integer value input with validation, formatting, and customization. Use this skill when implementing integer input controls, numeric validation for integers, or integer value entry in WPF. Covers integer data entry forms, min/max value restrictions, number formatting with culture support, integer value scrolling, range adorner progress visualization, and integer-specific input control implementation.
Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode).
Design and product-design skills derived from seminal books, selected from the larger Wondel.ai collection: Refactoring UI, The Design of Everyday Things, Microinteractions, Lean UX, Inspired (Marty Cagan), Jobs To Be Done, the Hook Model, and the Design Sprint. Installed as individual skills.
Compose a premium, animated landing page section by section in Next.js + Tailwind + Motion (Framer Motion) — built on a real design system, with editorial copy and motion that feels human-crafted, not template-generated. Use when building or rebuilding a landing page, marketing site, or hero/feature/pricing/CTA sections that need to look production-ready and bespoke from day one
Enforces Form + GlobalKey<FormState> with TextFormField whose sync validator returns a localized String? (never a hardcoded literal), AutovalidateMode.onUserInteraction, async availability checks moved OUT of the sync validator into a debounced Riverpod Notifier that surfaces errors through state, FocusNode/TextInputAction/onFieldSubmitted traversal, keyboardType/textCapitalization/autofillHints/TextInputFormatter, mandatory TextEditingController/FocusNode disposal, submit-enabled derived from validity (not stored), and scoped rebuilds so a keystroke never rebuilds the whole form. Use when building a Form, TextFormField, or FormField; wiring sync or async validation; managing FocusNode, focus traversal, autofocus, TextInputAction, onFieldSubmitted, or onEditingComplete; setting keyboardType, autofillHints, textCapitalization, or InputFormatter; disposing TextEditingController/FocusNode; enabling/disabling a submit button; or handling keyboard-avoidance on submit.
Complex GSAP timelines, including labels, callbacks, nested timelines, and position parameters. Use when orchestrating multi-step animations, building animation sequences, or creating coordinated motion. Essential for cinematic animations and complex UI choreography.
Create reference-free 5:2 editorial technology covers with exact #FAF9F5 backgrounds, large left-aligned typography, adaptable grid geometry, and a newly generated right-side diagram. Use when the user asks for “RN封面,” “编辑图解风格封面,” “左文右图暖白封面,” “无参考图生成同类封面,” or a premium AI research/editorial cover with charcoal paths and a restrained coral accent. Generate fresh transparent right-side artwork for each new cover, then compose exact text and a flexible editorial layout into editable SVG and PNG.
Implement Blazor Inline AI Assist component for seamless AI-powered text editing and content generation. Covers setup in WebAssembly and Web App projects, event handling, AI provider integration (Azure OpenAI, OpenAI, Ollama, Gemini), customization, accessibility, and enterprise deployment patterns.
Implements the Syncfusion WPF CheckedListBox (CheckListBox) control for multi-select lists with checkboxes. Use this when adding checklist controls, checkbox-enabled item lists, or SelectAll functionality in WPF applications. Covers data binding, appearance customization, grouping/sorting, item selection handling, and virtualization.
Create and manage WPF TabControl (TabControlExt) components for organizing content into tabs. Use this skill when users need to implement tabbed interfaces, manage tab selection, configure close buttons, handle tab interactions (clicking, keyboard navigation), customize tab appearance (orientation, placement), or bind tab data. Covers tab creation via XAML/C#, tab item management, event handling, context menus, drag-and-drop reordering, and theming.
Load this skill whenever the project contains interactive UI elements that users touch, tap, click, drag, swipe, or gesture with — buttons, links, drag-and-drop interfaces, sliders, carousels, or custom touch interactions. Under no circumstances create touch targets smaller than 44×44 CSS pixels. Absolutely always provide pointer cancellation, single-pointer alternatives to gestures, and load alongside keyboard/SKILL.md since pointer and keyboard requirements are complementary.
Image generation and presentations. Use when the user asks for images such as logos, icons, app assets, diagrams, flowcharts, architecture diagrams, patterns, textures, photo edits, or restorations, or needs a presentation or slide deck. Covers nanobanana CLI for image generation and Slidev for presentations.
Translate a creative brief, brand system, or reference set into an original, portable visual-direction system for image and video production. Use for art direction, reference analysis without imitation, design tokens, palette and contrast, typography, composition, texture and material, lighting, lens and camera language, motion language, cross-shot continuity, accessibility, production handoff, visual review, and repair; do not use for provider-specific API syntax or model-specific prompt recipes.
Mandatory for all Gemeente Amsterdam UI work. Use for pages, layouts, forms, dashboards, landing pages, React/JSX/TSX components, styling, theming, scaffolding frontend projects, or any visual interface. Covers @amsterdam/design-system-react, CSS tokens (--ams-*), BEM CSS with ams- prefixes, 4/8/12-column Grid, Spacious and Compact modes, and Tailwind CSS bridge patterns. Prefer this over generic UI libraries such as Material UI, shadcn, Chakra, Ant Design, or plain custom HTML/CSS.
Plans structure for a component library with props/slots and right-sized component granularity. Run before building or adding Canvas components (new component folders, component.yml, implementation), or for plan-only / breakdown-only work, whenever UI must map to a coherent tree. Mandatory for every new Figma frame or greenfield screen—repository drafts do not replace phases A–G
Critique an existing design (web page, HTML/React UI, screenshot, generated image, or Figma frame) with a repeatable procedure: capture it (Playwright screenshots or Read for images), run automated checks (axe, style inventory), score against a weighted rubric, and output severity-ranked fixes with code, then re-verify. Use after any design is produced or when asked to review one. Trigger phrases: "design critique", "review design", "improve design", "design audit", "design feedback", "evaluate UI", "design score", "accessibility audit", "visual review", "design assessment"
Create and manipulate images using GIMP, Inkscape, ImageMagick, FFmpeg, ExifTool, OptiPNG, jpegoptim, and pdftoppm via CLI. Use for: resizing, cropping, compositing, text overlays, watermarks, color correction, format conversion, WebP export, SVG creation, SVG-to-PNG export, OG images, social banners, logo manipulation, batch processing, lossless compression, metadata read/strip, GIF creation, animation, PDF-to-image. Triggers: gimp, inkscape, imagemagick, resize image, crop image, convert image, svg to png, add text to image, watermark, composite, image editing, banner, social card, compress image, strip metadata, gif, pdf to image, webp.
16:9 HTML deck in an editorial minimalist style. Warm cream slides, serif display type with grotesque body text, hairline rules, monospace metadata, generous macro whitespace, and one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Best-practice rulebook for a marketing site's pages, organized by page class — campaign landers, product pages, programmatic SEO trees, editorial. Use when writing or updating a landing/marketing page, wiring a campaign lander to an attribution identifier, changing site-wide nav/footer links, touching sitemap/robots/agent-readable surfaces, or auditing a public site's indexing, reachability, and conversion setup.
Make clean, high-taste motion graphics videos (explainers, product promos, tutorials, social reels) with Remotion. Use when the user asks for a motion graphics video, an animated explainer, a promo or launch video, a reel/short with kinetic text, or wants to copy the style of a reference video. Covers research, script, voiceover timing, original music and sound effects, a ready Remotion template with a locked style, automatic overlap QA, and final render.
Implement Syncfusion WPF SfAccordion for collapsible and expandable panel layouts. Use this when working with accordion controls, expandable panels, or collapsible section navigation in WPF. Covers populating items declaratively or via data binding, selection modes (One/OneOrMore/ZeroOrOne/ZeroOrMore), programmatic selection, appearance customization (AccentBrush, HeaderTemplate, ContentTemplate), and theming with SfSkinManager.
Implement Syncfusion WPF SfAIAssistView for AI chat and conversational assistant interfaces. Use this when building AI assistant UIs, message threads with AI responses, or integrating OpenAI/SemanticKernel in WPF. Covers typing indicators, suggestions, input/response toolbars, stop-responding features, conversation history, input placeholder text, empty view templates, and PromptRequest events using Syncfusion.SfChat.Wpf.
Implements the Syncfusion WPF ColorPickerPalette control for color selection from themed and standard color palettes. Use this when adding color pickers with predefined palettes, customizing color options, or handling color selection events in WPF applications. Covers setup, color management, appearance customization, and interaction patterns.
Implement Syncfusion WPF ColorPicker for color and gradient selection. Use this skill whenever users need to add color picking functionality, select solid colors, create linear/radial gradients, customize palettes, apply themes, or handle color-changed events in WPF applications. Covers XAML and C# implementations.
Implement Syncfusion WPF Ribbon component for modern desktop applications. Use this skill when creating ribbon interfaces in WPF with tabs, groups, buttons, menus, and galleries. Covers advanced features like application menus, backstage views, state persistence, multi-document ribbon merge, keyboard accessibility, touch support, and ribbon customization.
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.