Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.
Load this skill whenever the project contains static or interactive maps, embedded map widgets (Google Maps, Leaflet, Mapbox, OpenStreetMap), or any geographic visualizations. Under no circumstances embed a map without a text-based alternative conveying the same information. Absolutely always ensure map controls are keyboard-accessible and that all meaningful map content is available without the visual map.
Product Hunt launch optimization with specific specs, timing, and gallery strategy. Covers taglines, gallery images, maker comments, and launch day tactics. Use for: product launches, startup launches, side project launches, Product Hunt optimization. Triggers: product hunt, ph launch, product hunt launch, launch strategy, product launch, startup launch, product hunt tips, product hunt gallery, ph optimization, launch day, product hunt maker
Load this skill when building any web feature, reviewing architecture decisions, or evaluating JavaScript dependencies. Under no circumstances build features that break completely when JavaScript is unavailable or fails. Absolutely always start with semantic HTML, layer CSS enhancements, and add JavaScript as the final, optional layer. Prioritize resilience and universal access over cutting-edge features.
Shark UI skill for the Ark UI–based shadcn-style registry. Use when implementing or debugging components (overlays, menus, popovers, sheets, dialogs), collection-driven controls (combobox, select, list patterns), Field/forms, sidebar or chart docs patterns, Tailwind v4 tokens, or migrating Radix/shadcn examples to Shark. Also applies when using the shadcn CLI with `@shark/*`, `components.json`, or registry-style add/search/diff workflows.
Use when adding camera controls to a Three.js scene: orbit, pan, zoom, fly, first-person, or object manipulation. Prevents the common mistake of forgetting controls.update() in the render loop, not calling dispose(), or mixing controls. Covers OrbitControls, MapControls, FlyControls, PointerLockControls, TransformControls. Keywords: OrbitControls, controls, camera controls, orbit, pan, zoom, MapControls, FlyControls, PointerLockControls, TransformControls, rotate view, move camera, mouse controls, drag to rotate.
Collaborative workflow for modifying UI styles (fine-tuning the visual layer of an existing interface). Strict trigger: the page is already running in code, and changes are limited to its visual presentation—layout, spacing, colors, font sizes, corner radii, and component combinations. Follow the process “read the code + sketch the current state in ASCII for user confirmation → offer 2–3 ASCII options → user chooses → make minimal changes → fine-tune” to reduce communication gaps and avoid wasting tokens. Output: a code diff that changes styles only. Strict boundaries: do not change business logic, data flow, or interaction behavior, and do not refactor along the way. Not suitable when: the interface does not yet exist and needs exploration from scratch (use design-exploration); changes involve functionality or interaction logic, not just visuals (use req-change-workflow); recreating a whole page from a design or screenshot (use design-replica); creating wireframes for requirements that are not yet implemented (use design-exploration or prd-test-writer).
Lay out an existing draft or script into a Xiaohongshu image post or long-image package without rewriting the source. Use when the user wants pagination, hierarchy, image placement, and renderable HTML/CSS while preserving the original wording, information density, and voice of the source text.
Use when styling components or elements with @accelint/design-foundation or @accelint/design-toolkit packages, or when users say "style this", "add styling", "theme this component", "add colors", "add spacing", "CSS modules", "setup design foundation", "@variant", or when working with .module.css files. Provides opinionated Tailwind conventions including semantic tokens, custom spacing scale, outline-based borders, variant system, and CSS module setup guidance.
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally
Create and modify content templates that map Drupal content entities to Canvas component layouts. Use when asked to (1) Create a new content template, (2) Modify an existing content template, (3) Add or change entity field mappings in a template, (4) Compose components in a content template via slots. Content templates live in the configured `contentTemplatesDir` (default `content-templates/`) and define how Drupal entity types, bundles, and view modes render as Canvas component trees.
Clone web pages with high fidelity. Use Playwright to progressively collect page data (DOM structure, styles, screenshots, and assets), then build a complete HTML/CSS recreation in stages. Supports quick and high-fidelity modes. Use this skill when users need to clone, recreate, restore, or imitate a web page. Always use it when a user provides a URL and asks to “make an identical page,” “clone this page,” “use this website’s design as a reference,” or “recreate this page.”
Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow), drawing tens of thousands of cells on Canvas2D + WebGL/deck.gl inside a 16ms frame budget, placing and decluttering labels, GPU or spatial-index picking, camera animation and level-of-detail crossfades, and keyboard plus screen-reader accessibility for the canvas. Sits on top of geohash-spatial-code-maps, which owns the geohash encoding, projection, tiling, and navigation math. Also covers nature-inspired rendering — Voronoi, circle packing, phyllotaxis, metaball hulls, edge bundling. Trigger even when the user does not say "visualisation" — if the work involves drawing, colouring, labelling, animating, or making navigable a code map, spatial heatmap, or large cell/point layer on the web, this is the skill.
Professional UI design guidelines for accessible, well-structured interfaces. Use when: writing CSS, HTML, or frontend component code; designing websites, apps, dashboards, or any web interface; reviewing or improving existing UI designs; making decisions about colour, typography, layout, spacing, buttons, or forms; ensuring WCAG 2.1 AA accessibility; creating design systems or component libraries. Covers OKLCH colour palettes, 8pt spacing grid, fluid typography with clamp(), container queries, subgrid, form validation patterns, button hierarchy, dark mode, reduced motion, SEO meta tags, and Core Web Vitals.
Places existing images onto an Excalidraw whiteboard, turns a slide deck into clean per-slide images, and inspects a .excalidraw file. Use whenever someone mentions Excalidraw, a whiteboard/canvas, .excalidraw, 白板 or 画板 — e.g. "put these screenshots on my board" — or a workshop delivered by hand-drawing over screenshots on a shared canvas. Not for generating a diagram from a text description.
Guides PostHog engineers through dashboard widget platform work — ship a new widget_type (WIDGET_REGISTRY, catalog, run_widgets, WidgetCard) or update a shipped type (config, query, layout, RBAC, tile filter bar, list footer, titleHref, throttles). Use for WidgetSpec, widget_specs/, widget-configs.zod.ts, hogli build:openapi, error_tracking_list, session_replay_list, widgetFilters, formatWidgetListCountFooter, widget_query_throttle, or WidgetCard composition. New types need widget-intake confirmation first. Not for MCP batch-add of existing types or adding tiles to a dashboard.
Load this skill whenever the project includes print stylesheets, print media queries (@media print), or any content intended for physical printing. Under no circumstances omit print CSS that ensures readable, accessible printed output. Absolutely always hide decorative elements, expand link URLs, and maintain sufficient contrast and font sizing in print styles.
Product mockups and showcases: photoreal product/packaging scenes via Gemini 3.1 Flash image editing, and pixel-exact device frames (phone, laptop, browser) around real screenshots via HTML/CSS. Covers 3D CSS transforms, lifestyle staging, feature callouts, before/after, and e-commerce product shots. Use when the goal is presenting a product or UI itself; for a marketing graphic that merely includes a product use graphic-design, social-media-graphic, or ad-creative-design. Trigger phrases: "create a product mockup", "device mockup", "phone mockup", "laptop mockup", "product showcase", "screenshot mockup", "app preview", "product presentation", "mockup design".
Design and validate product UI behavior as visual state prototypes before coding. Use when tasks ask how screens should change after user actions (click, tap, submit), when non-developers need to review web/iOS/Android UX flows, or when teams need interaction-state assets and acceptance checks for implementation.
Anti-slop skill for PRODUCT UI - dashboards, data tables, forms, multi-step flows, settings, list/detail, app shells. The agent reads the surface, budgets the frame first, and ships dense interfaces that are correct at every edge case (overflow, long labels, empty/error/loading states, i18n expansion, keyboard/a11y). House-system-first; maps to Carbon/Polaris/Atlaskit/Fluent/Primer/Material3/Radix-shadcn/Ant. The counterpart to taste-skill, which owns landing/portfolio/marketing.
Provides index-first documentation navigation and implementation constraints for Ray mini program development. Use when building pages or UI, encapsulating and refactoring components, integrating Ray APIs and device capabilities, working with lifecycles and routing, converting images to code, handling i18n and styles, or troubleshooting and upgrading. Before implementing, locate capabilities via references/ray/INDEX.md and the routing docs; never invent APIs or lifecycle hooks.
Use whenever creating, configuring, or extending Storybook for a TS/React component library — covers main.ts/preview.ts setup, CSF3 story authoring, args/argTypes/controls, decorators and providers, MSW and module mocking, play-function interaction tests via the Vitest addon, the @storybook/addon-a11y workflow (axe-core), autodocs vs MDX docs, design tokens, Figma linking, Chromatic deployment, and on-demand build performance. Triggers on tasks like "write a story", "set up Storybook", "configure addon-a11y", "fix this play function", "deploy Storybook", "test Storybook in CI" — even when the user doesn't say "storybook" but is editing `*.stories.tsx`, `.storybook/main.ts`, or `.storybook/preview.ts`. Targets Storybook 9+/10 (modern `storybook/test` import, Vitest addon, CSF3 + `satisfies Meta`). Does NOT cover generic React patterns (use the `react` skill), generic Testing Library queries (use `react-testing-library`), or WCAG primer (points at addon-a11y + axe rule config).
Design and generate production-quality SVG logos in modern minimalist style. Use this skill PROACTIVELY whenever the user asks to create a logo, design a brand mark, generate an SVG icon, make a logomark, create a wordmark, build a brand identity symbol, or needs any kind of vector logo. Also triggers for requests like "make me a logo", "design an icon for my app", "create a brand symbol", "I need a logo for...", "generate SVG logo", or any task involving logo/icon/brand mark creation — even if they don't specifically mention "SVG" or "minimalist".
Strips the cues that make a website read as AI-generated and forces a deliberate, project-specific design choice instead of the model's default. It does not impose a look or hand you taste. It removes tells (default shadcn/Tailwind, AI-purple gradients, gradient heading text, unprompted neon glow, emoji-as-icons, the centered hero plus three feature cards) AND the newer cream-plus-serif-plus-sage "tasteful default" that trading one default for another creates. Grounded in a 47-subreddit, 3.2M-post Reddit analysis of what people flag as AI slop. Use whenever building, styling, reviewing, refactoring, or auditing any website, landing page, web app UI, dashboard, or front-end component, especially when the user wants a site to look custom or human rather than AI-generated, or mentions AI slop, looks AI-made, generic, vibe-coded, Tailwind, or shadcn. Trigger even if they never say vibe-coded.
3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, and render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, or building product configurators
Paid advertising creative: IAB display banners (300x250, 728x90, etc.), Google Display and Performance Max assets, and paid social ads (Meta, LinkedIn, X), via Gemini 3.1 Flash image generation, HTML/CSS, or HTML5 animated ads. Covers exact-size cropping, CTA design, value proposition hierarchy, A/B variations, and platform ad specs. Use whenever the creative will be bought as ad inventory; for organic posts use social-media-graphic, for on-site hero or email banners use banner-design. Trigger phrases: "design an ad", "create a banner ad", "display ad", "ad creative", "Google Display ad", "Meta ad", "ad banner", "create ad variations", "HTML5 ad".
Create App Store and Google Play screenshots to exact platform specifications. Covers iOS/Android dimensions, gallery ordering, device mockups, and preview videos. Use for: app store optimization, ASO, app screenshots, app preview, Play Store listings. Triggers: app store screenshots, ASO, app store optimization, Play Store screenshots, app preview, app listing, iOS screenshots, Android screenshots, app store images, app mockup, device mockup, app gallery, store listing
Migrates React UI code to Base UI (`@base-ui/react`) — replacing bespoke modals, custom dropdowns, raw `<dialog>`/`<select>` elements, ad-hoc popovers/menus/tooltips, or other component libraries (Radix UI, Headless UI, Reach UI). Ships a 37-component catalog (snapshotted from base-ui.com/llms.txt) and scripts to refresh it, scan for migration candidates, and verify the migration compiles. Triggers on phrases like "migrate to base-ui", "use base-ui instead of X", "replace this dialog/popover/menu with base-ui", or when scanning a React codebase for components Base UI can replace. Trigger even if the user only mentions one component (e.g., "swap this modal for base-ui dialog") — the workflow scales from one file to a whole repo.
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
Generate high-converting landing pages with page structure, copy frameworks (PAS, AIDA, BAB), CTA strategy, SEO meta, and Core Web Vitals optimization. Use when creating landing pages, campaign pages, lead capture pages, or conversion pages.
Build and migrate iOS, macOS, iPadOS, watchOS, tvOS, and visionOS apps with Apple's Liquid Glass design system (iOS 26+, macOS 26 Tahoe+). Use when creating new SwiftUI apps targeting Apple's 2025+ platforms, migrating existing apps to Liquid Glass, applying .glassEffect(), .backgroundExtensionEffect(), .buttonStyle(.glass), GlassEffectContainer, glass toolbars, glass tab bars, glass sheets, or any Liquid Glass UI work. Also use when the user asks about modern Apple design, navigation patterns with glass, or SwiftUI best practices for the latest OS versions.
Implement Apple's Liquid Glass UI effect (iOS 26 / macOS 26) using CSS and SVG displacement filters. Use this skill when asked to create liquid glass effects, frosted glass components, iOS 26 glass UI, glassmorphism with refraction, glass buttons/cards/navbars, feDisplacementMap refraction effects, or any UI that needs realistic glass-like distortion of background content. Teaches the full technique from physics (Snell's law, SDF) to ready-to-use HTML/React/CSS templates.
Loft the shape before cutting steel — answer a design question that prose cannot settle by building a throwaway artifact: a pure logic module in a clickable shell, or structurally different UI variants behind one route. The captain reacts to the artifact; the answer folds into the decision; the artifact never docks. Use when a design question stalls in words, when a navigator map carries a loft ticket, or when a spec discussion reaches "we would have to see it".
Customizes and extends Magento's default Luma theme. Use when working with Luma theme, LESS preprocessing, RequireJS modules, KnockoutJS components, or traditional Magento frontend architecture. Masters LESS variables, RequireJS configuration, and responsive design.
Convert long-form Markdown (plan, spec, system design, RFC, runbook, postmortem, brainstorm, notes) into a single self-contained HTML page with Mermaid diagrams, step timelines, callouts, sidebar TOC. Claude-orange light+dark theme. Multi-language. Portable across Claude Code / Codex / Antigravity / any AI agent.
A complete guide to developing MusicFree desktop theme packs from scratch. Triggered when the user asks to write, create or design a MusicFree desktop theme pack, or to generate a theme from a reference image, colors or style keywords. Covers the full workflow: the CSS variable system, color design paradigms, static themes, dynamic iframe themes, asset optimization, packaging and testing, and submitting to the theme marketplace. This Skill is designed for AI execution, guiding AI and community contributors (who may have no frontend experience) to collaborate on theme pack development.
Apply the Opquast Digital Quality Framework (245 rules, 14 categories) when building, reviewing, or auditing websites and web applications. Use for web development quality assurance, accessibility compliance, security hardening, privacy implementation, e-commerce best practices, and holistic digital quality checks.
Audit a Penpot design for design-system / token GOVERNANCE issues (distinct from accessibility): hardcoded colors where a token exists, off-grid spacing, orphan/unresolved/unused tokens, duplicated values, and detached parts that should be component instances. Produces a severity report and suggests semantic-token swaps. Triggers: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.
Provider-independent production design direction for AI-generated media. Use when translating narrative, brand, advertising, product, social, film, or worldbuilding intent into sets, locations, props, color and material palettes, era research, graphic and environmental design, continuity bibles, image/video prompt planning, reference strategy, production constraints, iteration notes, handoff specs, and QA.
Tailwind CSS v4 performance optimization and best practices guidelines (formerly tailwindcss-v4-style). Use this skill when writing, reviewing, or refactoring Tailwind CSS v4 code to ensure optimal build performance, minimal CSS output, and correct usage of v4 features. Triggers on tasks involving Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.
Create static, browser-based UI prototypes with a zero-build stack built from z-proto, HTM UI, Tailwind CSS v4, Preact/htm, and preact-iso. Use when asked for an HTML prototype, clickable browser mockup, interaction demo, or stakeholder flow that runs without a backend or build pipeline. Component, theme, and API implementation lives in the complementary htm-ui skill. For prototypes in a design tool (Paper, Figma, Pen.dev, Penpot), use agile-design.
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.