Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
GSAP implementation craft for agent-built sites: timeline architecture, gsap.context and matchMedia, ScrollTrigger pin and scrub hygiene, SplitText discipline, transform-only animation, refresh-after-fonts, and full prefers-reduced-motion gating. The 90% of award-tier motion is structure, not effects — this is that 90%. Use whenever generating GSAP animation code. Stack on the design-taste core skill and taste-motion
Install theme switcher components from the Elements registry. Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns. Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle".
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Design and style ryOS UI using the current OS theme token system, Tailwind variants, shared primitives, Aqua Glass, dark mode, and accent conventions. Use when creating UI components, styling elements, working with themes, adding visual effects, or implementing retro OS aesthetics.
Complete design system with principles + living style guide. Enforces precise, crafted UI inspired by Linear, Notion, and Stripe. Includes boilerplate style-guide page template for Next.js/React projects. Use when building any UI that needs Jony Ive-level precision.
Clone or recreate a live website URL, page, or section as React + Tailwind with extracted DOM, CSS, assets, responsive layout, motion, and interactions. Use for live-URL implementation or fidelity repair; not capture-only or diff-only requests.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Building user interfaces with UI Toolkit (UXML, USS, C# bindings). Generates complete screens with UXML structure, USS styling and a C# presenter. Triggers: /uitk, /ui, 'UI Toolkit', 'UXML', 'USS', 'UIDocument', 'data binding UI', 'runtime UI', 'menu principal', 'HUD', 'interface utilisateur Unity'.
Build component-based UIs with ViewComponent and view_component-contrib. Use when creating reusable UI components, implementing slots and style variants, or building component previews. Triggers on ViewComponent creation, component patterns, Lookbook previews, or UI component architecture.
AI agent visual feedback loop for any web app. Use when iterating on visual code (UI, canvas, 3D, SVG, charts, animations) and you need to SEE the rendered result to evaluate quality. Covers: dev-screenshot API pattern (GET trigger → SSE → client capture → POST back → file saved), parameterized rendering, metadata sidecars, visual regression with pixel diff, WebMCP tool registration, and console fallbacks. Activate on: 'take a screenshot', 'show me the render', 'visual QA', 'compare before/after', 'pixel diff', or any iterative visual work where the agent needs to inspect rendered output.
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.
Extract, create, or refine an implementation-ready design system for a website or web app. Use when an agent needs semantic tokens, component anatomy, variants, interaction states, responsive rules, accessibility defaults, or consistency improvements grounded in an existing frontend codebase.
Full website rebuild agent. Takes an existing website URL and rebuilds it from scratch into a world-class, SEO-optimized, WCAG AA accessible, visually stunning website using Astro + Tailwind CSS, deployed to Vercel via GitHub. Executes a rigorous 14-phase process: brand extraction, content scraping, SEO audit, design audit, rebuild planning, full build with design system, copy optimization, 3 QA rounds, competitive tools research, tools build, tools QA, pre-deploy checklist, and Vercel deployment. Produces 11+ documentation deliverables. Triggers on: "rebuild website", "redesign website", "rebuild site from URL", "website rebuild", "redo this website", "make this website better", "rebuild from scratch", "full site redesign", or any request to take an existing URL and create a new, professional website from it. Also triggers when the user provides a URL and asks to build/create/design a new version of that site.
Strategic web design consultant for building, reviewing, or auditing websites and landing pages. Trigger when the user asks to build a landing page, review a site's messaging, write hero copy or CTAs, audit for "AI slop," or plan page information architecture. Also trigger on keywords: "landing page," "above the fold," "hero section," "conversion funnel," "social proof," "product page design."
Use when starting or adapting an A4 single-column OpenPress academic / research paper starter for conference drafts, journal preprints, course papers, technical reports, or thesis-style chapters with abstract, numbered sections, figures, tables, and a references list.
Review product accessibility and inclusive UX for web, mobile, desktop, SaaS, games, developer tools, checkout, onboarding, settings, forms, dashboards, notifications, motion, keyboard, screen reader, touch, color contrast, focus, error recovery, cognitive load, reduced motion, captions, localization, and assistive technology compatibility. Use when designing, building, or auditing product flows for accessible, usable, modern experiences.
Use when a project needs admin/CMS/back-office UI architecture: roles, permissions, content workflows, AI assistant boundaries, audit logs, destructive-action confirmations, and builder handoff. Planning only; do not perform production admin actions or expose secrets.
Research a UI design aesthetic and produce exhaustive, implementation-ready design guidelines for coding agents. Use when the user names an aesthetic (brutalist, glassmorphism, retro-futuristic, Swiss modernist, Apple HIG, neumorphism, minimalism, cyberpunk, Material Design, art deco, vaporwave, etc.) and wants a complete style guide with exact CSS values, color palettes, component states, animations, and typography — detailed enough for a coding agent to faithfully implement the aesthetic with zero ambiguity.
Remote-control Affinity (the unified Affinity by Canva app: vector, pixel, and layout studios) with JavaScript through its local automation endpoint — no MCP client configuration needed. Automate document edits, batch operations, text/layer manipulation, and reusable library scripts, with rendered-JPEG visual verification. Use whenever the user wants to script or automate Affinity, programmatically edit .af / .afdesign / .afphoto / .afpub documents, batch-process designs, or says "Affinity", "Affinity script", "automate Affinity", "batch edit in Affinity", "control Affinity" — even if they don''t mention scripting.
Reviews, rewrites, creates, harmonizes, and implements user-centered interface copy across design files, screenshots, product specifications, source code, localization catalogs, prototypes, and rendered applications. Use for buttons, navigation, forms, errors, empty states, onboarding, confirmations, settings, consent, notifications, help, and system feedback while preserving product behavior, terminology, voice, accessibility, localization, legal meaning, component structure, and implementation constraints.
Genre pack: raw mechanical interface — Swiss typographic print fused with military/industrial terminal aesthetics. Rigid visible grids, extreme type-scale contrast, utilitarian color (paper, ink, one signal color), hard edges, zero decoration. Use for data-heavy platforms, developer tools, portfolios, studios, or any brief wanting to feel like a declassified blueprint. Stack on the design-taste core skill.
Genre pack: the site-of-the-day aesthetic — the page as a film projected on studio print. Warm paper canvas, near-black ink type, one vivid electric-blue accent, grotesk display, alternating scene canvases, a scrubbed index counter, text-dissolve pins, and a drag-driven card carousel. For portfolios, product launches, agencies, and any brief that wants premium scroll-driven storytelling. Requires taste-gsap for the implementation. Stack on the design-taste core skill.
Creates beautiful, branded HTML content assets — industry reports, landing pages, comparison sheets, one-pagers — from structured data. Uses Gamma API (preferred), v0.dev Platform API, or a self-hosted HTML template system with Tailwind CSS. Outputs self-contained HTML files that can be hosted as web pages or converted to PDF.
Create interactive data visualizations using d3.js. Use this skill when creating custom charts, graphs, network diagrams, geographic visualizations, or any complex SVG-based data visualization that requires fine-grained control over visual elements, transitions, or interactions. Use it for bespoke visualizations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Collect, structure, deduplicate, and resolve user and agent feedback on UI/UX skills, subprocesses, design directions, progress-screen gates, Stitch/Pencil/Figma outputs, and implementation steps. Use when comments need statuses such as open, accepted, partially accepted, applied, rejected, or when review-board/progress-page fields must become actionable decisions.
Use when a non-designer needs to audit a UI, generate a design spec (spacing, type scale, color tokens, grids), or build brand foundations (logo systems, palette and type pairing, brand guidelines). Covers the visual layer, UX/perceptual critique, and brand identity. For implementing the design in code (React/HTML/CSS), use frontend-design.
Review frontend UI for design quality, consistency, and taste. Use when the user asks to review, QA, audit, or check the design/UI/UX of a page, component, or app. Captures screenshots, extracts the project's design system, applies opinionated taste rules, and produces a severity-ranked report with file references and fix suggestions.
Design and audit developer tools, APIs, SDKs, CLIs, libraries, platforms, dashboards, docs, examples, onboarding, quickstarts, pricing, usage limits, telemetry, changelogs, support, and community growth. Use when building developer-facing products, improving developer experience, launching APIs/SDKs, or reviewing docs-to-activation funnels.
This skill should be used when the user asks to "set up unfold admin", "django admin", "customize admin", "admin dashboard", "htmx admin", "unfold theme", or mentions Django admin customization, admin dashboards, or Unfold configuration. Provides Unfold admin patterns with 1-admin-per-file organization and HTMX customization.
Extract TikZ diagrams from Beamer `.tex` source, compile each to a standalone PDF, and convert to SVG with 0-based indexing. Use when user says "extract the tikz", "regenerate the diagrams", "rebuild the SVGs", "sync tikz to quarto", or after editing TikZ blocks in a Beamer deck that also has a Quarto mirror.
Create, apply, remove, audit, and bind Figma Effects through MCP or Plugin API-compatible workflows. Use this skill when the user asks for shadows, inner shadows, layer blur, background blur, glow, glassmorphism, noise, texture, glass effects, progressive blur, effect styles, or effect variables/tokens on selected Figma nodes, while handling current Figma effect compatibility, runtime support, variable binding limits, and readback evidence.
Export, download, inventory, and prepare assets from Figma for UI implementation or audits. Use this skill when the user asks for icons, SVGs, PNG/JPEG/WebP exports, image assets, font references, slices, thumbnails, brand assets, asset manifests, or asset handoff from a Figma file while preserving licensing, privacy, naming, and implementation constraints.
Create and edit native Figma canvas objects with MCP when explicitly scoped. Use this skill when the user asks to add or change frames, sections, components, instances, auto layout, variables, styles, FigJam objects, connectors, Slides objects, or selected nodes in Figma, and when the task requires mutation evidence, rollback-aware scope, and design-system consistency.
Bring live or local web UI back into Figma as editable design layers when Figma MCP code-to-canvas or generate-design capability is available. Use this skill when the user says production, staging, localhost, or a browser-rendered page is ahead of Figma and wants to sync, capture, recreate, or convert the live UI into a Figma file while preserving privacy and evidence.
Plan user flows and screen states for a Figma design before any designing starts. Use when asked to plan a user flow, map out screens for a feature, define screen states, plan a Figma file structure, or work out what needs to be designed before opening Figma. Produces a complete flow map with all screens, states, entry/exit points, and a suggested Figma page structure.
Comprehensive Flutter API reference guide covering widgets, Material Design, Cupertino, animations, gestures, navigation, state management, and platform integration. Use when developing Flutter applications and needing detailed API knowledge for widgets, layout, styling, animations, platform channels, or any Flutter SDK functionality. Essential for building cross-platform mobile, web, and desktop applications with Flutter.
Shared workflow for browser-based review of user-visible frontend changes in Langfuse. Use when a change affects UI behavior, layout, styling, navigation, or browser-visible regressions and should be checked with available browser automation before signoff.
Compose polished charts (timeseries, bar, line, area, pie, scatter, or anything else the data calls for) from tabular data using the chartkit primitives, producing PNG, SVG, or self-contained interactive HTML. Use when the user asks to chart, graph, plot, or visualize data and wants something better than raw matplotlib defaults.
Build or review animation on plain HTML/CSS/JavaScript sites: GSAP page intros/outros, component show/hide, scroll effects, cross-document View Transitions, bfcache, and fetch/swap navigation with Swup, Barba, or Taxi. Use for first-paint flashes or interrupted navigation, even when GSAP is unnamed. Also covers hidden-content recovery and first-load performance. Not for component frameworks or isolated GSAP API questions.
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project. Use when the user asks to "kill AI slop", "de-slop", "remove the AI look", "make this not look AI-generated", or clean up a landing page / UI / docs that feels templated. Fixes the catalogue of tells — gradient/glow defaults, glassmorphism, badge & pill spam, pastel tiles, AI-drawn icons, AI copywriting voice ("not just X — it's Y"), emoji everywhere, and more — see `references/taxonomy.md` for the full list. Works on HTML/CSS, React/Vue/Svelte/Astro, Tailwind, PHP, and Markdown copy. For plain-text editing of Chinese or English writing outside a codebase, use `de-slop` instead.
CRITICAL: Use for Makepad 2.0 animation system. Triggers on: makepad animation, makepad animator, Animator, AnimatorState, hover effect, makepad transition, animation state, Forward, Snap, Loop, ease function, makepad animate, timeline, snap(), default @off, animation group, 动画, 过渡, 悬停效果, 动画状态, 缓动函数
CRITICAL: Entry-level skill for Makepad 2.0 GUI development. This is the FIRST skill to load for any Makepad task — it provides design judgment anchors ABOVE the other 13 Makepad 2.0 skills. Triggers on: makepad, makepad app, makepad project, makepad design, live_design!, app_main!, script_mod!, Cx, WidgetRef, Widget, makepad-widgets, makepad architecture, makepad how to, "how should I", "should I use", "what's the best way", makepad 架构, makepad 设计, makepad 怎么做, makepad 最佳实践, 组件拆分, 状态管理, 数据流, 渲染思维
CRITICAL: Use for Makepad 2.0 Vector graphics widget. Triggers on: makepad vector, Vector widget, SVG path, makepad path, makepad circle, makepad gradient, makepad tween, vector animation, Gradient, RadGradient, Filter, DropShadow, Group transform, vector drawing, inline SVG, 矢量图形, SVG, 路径, 渐变, 矢量动画
Guidance for implementing tap, swipe, pan, pinch, drag-and-drop, and pointer gesture recognizers in .NET MAUI applications. Covers XAML and C# usage, combining gestures, and platform differences. USE FOR: "tap gesture", "swipe gesture", "pan gesture", "pinch gesture", "drag and drop", "pointer gesture", "gesture recognizer", "TapGestureRecognizer", "SwipeGestureRecognizer", "PanGestureRecognizer", "combine gestures". DO NOT USE FOR: animations triggered by gestures (use maui-animations), CollectionView swipe actions (use maui-collectionview), or custom drawing interaction (use maui-graphics-drawing).
Generates mobile browser workflow documentation by exploring the app's codebase, then walking through the live app with the user step-by-step via Playwright in a mobile viewport (393x852) to co-author verifications. Use when the user says "generate mobile workflows", "create mobile workflows", "update mobile workflows", or "generate mobile browser workflows". Produces numbered workflow markdown files that feed into the mobile converter and Playwright runner. Includes iOS HIG awareness and mobile UX anti-pattern detection.
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.