Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Generate a style-consistent icon set, delivered as transparent PNGs via grid-based image generation, splitting, and background removal. Use when the user needs a full set of custom icons, section icons, or icons matching a brand style; not for a single simple vector icon or small dense functional symbols.
Extract a DESIGN.md design-documentation file from a Penpot file: a portable markdown spec (YAML frontmatter with colors/typography/rounded/spacing/components token maps + prose sections: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) in the design-md format, grounded in the file's real tokens, library assets, and sampled component styles — never invented. Read-only on the canvas; writes one local markdown file. Triggers: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.
Generate, visually edit, and export beautiful HTML/CSS presentation decks with agents using slides-grab (NomaDamas, MIT) — the open-source Claude Design alternative and best harness + editor + linter for slides in Claude Code / Codex. One routing-first skill across Plan (agent drafts an outline), Design (each slide is a self-contained slide-XX.html), Edit (a pure-JS browser editor where you drag a bbox over any region and ask the agent to rewrite just that area, or hand-tweak text/size/bold), and Export (capture-or-print PDF, per-slide PNG incl. Instagram 1:1 card-news, plus experimental/unstable PPTX and Figma-importable PPTX). Picks an install path (npm package + npx skills add, or clone), a deck workspace (--slides-dir, multi-deck decks/<name>/), one of 35 bundled design styles, and the supported asset flow (local ./assets/<file> only — image via god-tibo-imagen/codex/nano-banana, fetch-video via yt-dlp, tldraw .tldr→SVG), validating with slides-grab validate before any export.
Design and improve ANY web or app interface with a taste-first, anti-AI-slop workflow, then document the result in a project DESIGN_SYSTEM.md so every future page stays visually consistent. Universal: routes the brief to the right rules for a landing/marketing page, dashboard/admin, product/app UI, e-commerce/store, content/editorial/docs, mobile/native app, a redesign, or a design-system-only task. The engine is web-first (CSS/tokens/Tailwind); for iOS/Android it layers platform-idiom guidance over that engine and defers deep platform-component work to HIG/Material. Use when the user asks to design, build, redesign, audit, or polish any interface — especially when they mention a brand name, color palette, mood/style, fonts, animations, card style, image source, framework, or platform (web / iOS / Android). Triggers: "design a landing page", "build a dashboard", "design a mobile app", "build a store / product page / checkout", "design a docs or blog site", "redesign this", "make the UI look premium", "create a design system", "audit the UX", "clean up the design", "find design references / inspiration", "make it faster", "improve performance / Core Web Vitals".
Clone live web pages into a local Next.js + Tailwind CSS project for rapid prototyping. Use this skill whenever a user shares a URL or screenshot and wants to replicate, redesign, or iterate on that page locally — whether they say "clone this site", "make a prototype based on this page", "recreate this UI", "build something that looks like this", or simply paste a link and ask you to turn it into code. Also trigger when the user wants to add new pages, modify existing pages, or extend a prototype project that was previously created by this skill. Even if the user just says "I want to build a page like X" with a reference link or image, this skill applies.
Analyze ML, AI4Science, Systems, and research repositories into an evidence-backed semantic architecture graph for paper figure planning. Code serves as supporting evidence; paper narrative and user intent remain the primary source of truth.
Use when creating or changing a Bagisto storefront theme — a theme package, shop layouts, Blade component overrides, or the Vite asset pipeline for the customer-facing side. Trigger phrases include "shop theme", "storefront theme", "shop layout", "theme package", "vite", "tailwind", "publish views", "custom layout".
A creation and conversion skill that organizes one or more images into a layered PSD file. Use this skill when the user needs image2psd, converting images to PSD, combining multiple images into a PSD, splitting a poster or design into multiple layers, turning a white background transparent, splitting layers by color clustering, splitting Codex/AI-generated images into element images and recombining them into a PSD, or wants to output a layered PSD or a layered raster file editable in Photoshop/Photopea. When used in Codex, it combines the imagegen skill by default: first use Codex's vision/image-generation capabilities to understand, complete, or rebuild elements, then use this skill's scripts to produce the PSD.
Automatically fetch design specifications from getdesign.md based on a brand name and generate matching UI code. Supports 62 top brand styles (Apple, Notion, Claude, Stripe, etc.), and Chinese or English brand names and mixed styles. Triggers when the user mentions "XX style", "make it feel like XX", or "reference XX's design".
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.
Use when maintaining legacy Canvas theme-global regions, region JSON, or a project-level Region-based layout. Also consult for existing region-based site chrome. Region APIs are deprecated; new integrations should use page variants and composed page trees instead.
Sync code tokens and page structure to Figma via a CI + Gist pipeline. Use when asked to "set up a Figma sync pipeline", "sync code to Figma", "export design tokens to Figma", "update the page walker", or "wire up the tokens-sync-to-figma plugin"; when paths include `figma-sync.config.json`, `figma-export.json`, `scripts/tokens-to-figma/`, or `.github/workflows/figma-sync.yml`; or when checking figma-sync Gist or CI status. Not for agent-driven, one-off Figma writes such as creating variables or editing nodes (use `figma-use`) or generating screens (use `figma-generate-design`).
Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this component set', 'turn these variants into CSS states', 'generate a button/input/checkbox from Figma variants', 'what changes between the hover and default state', 'map Figma variants to component props', 'extract the state machine for this component'. Resolves bound variables to token names. NOT covered by the native MCP's get_design_context/get_metadata, which don't give you a variant-axis→CSS-state machine.
Evaluate and improve the usability of existing front-end interfaces — either local source code or live websites by URL. Use this skill whenever the user has existing front-end code OR a live website URL and wants to understand why users struggle with it, find usability problems, or make it easier to use. Triggers on direct requests like "review my UI", "audit my interface", "check accessibility", "evaluate my design", "improve the UX", "audit this website", "review https://example.com" — but ALSO on indirect symptom descriptions like "users keep abandoning this form", "something feels off about this page", "we're getting complaints about the checkout flow", "conversion dropped after the redesign", "people say it's confusing", or "make this less painful to use". If someone has a front-end component, page, or URL and the problem sounds like usability, user confusion, or poor interaction design rather than a bug or performance issue — use this skill. NOT for building new interfaces from scratch, performance optimization, or backend logic.
Create distinctive, production-grade frontend interfaces with high design quality and accessible markup. Use this skill when the user asks to build or beautify web components, pages, applications, landing pages, dashboards, artifacts, or React/HTML/CSS UI. Generates creative, polished code that avoids generic AI aesthetics, then self-checks it against an objective accessibility and quality rubric.
Use this skill when developing, structuring, reviewing, or modifying FUI web modules. It provides strict guidelines for the metadata-driven architecture (the <fui-app> config block of index.vue), mandatory grid layout system, action protocols, and environment-aware workflow rules. Apply the canonical module structure in both editor and chat contexts. In editor or extension contexts with workspace access, work with the real module files. In chat or agent-chat contexts without workspace access, work from pasted artifacts while virtualizing the same module structure in the response.
Orchestrator for the Hostinger Headless build flow — build and deploy a real website on the user's Hostinger account from a single prompt that names a domain. Holds the stage flow and the state contract, and drives each stage in sequence: connect, check state, refine, provision, content model, design, frontend, validate, deploy, done. Triggers: build a headless site for <domain>, build me a site, create a website, make me a website, deploy this to Hostinger, host this on Hostinger, connect this project to Hostinger.
Use when a project has a components.json from marko-ui, or when installing, using, editing, or debugging marko-ui components (shadcn-style components for Marko 6 backed by Zag.js) — finding a component, reading its API, adding it with the marko-ui CLI, fixing a component that renders but misbehaves, or setting marko-ui up in a new project. Not for general Marko 6 syntax (see marko6) or routing (see marko-run).
(NS) Distinctive production UI — layout, typography, motion, polish; avoids AI-slop aesthetics. Use when building/refining pages, components, dashboards, KPI/analytics views, charts, forms, design-brief work, or better UI/UX — even if they do not say "design". Load docs/context/design-brief.md when present. Do NOT use for backend-only, requirements writing, or full SDD (ns-spec-driven).
Review a Penpot design against its implemented code (a source component or Storybook story) and emit a structured DRIFT report. Use when an engineer needs to confirm the build matches the design: extract HTML/CSS from a selection, map its tokens/structure/states to the code component, diff them, and list what each side is missing with severity and a reconciliation. Degrades gracefully to a design-system-token check when no code source is supplied. Triggers: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.
Find CawPlan tickets that need UX attention, or summarize a product's UX members' design completion: pending UX for a version, high-priority tickets missing UX design, a Team's UX-pending queue, or tickets that product's Designers marked UX Ready in a date range. Use when: the user asks which tickets need UX follow-up/review/spec for a version, which high-priority tickets need UX but don't have a design yet, which Team hasn't had UX provided for its tickets, or asks for a product's UX members' UX/design completion summary. NOT for: creating or updating tickets, setting a ticket's UX status, general ticket search, or release tracking (use `cawplan-plan-track` for version release health).
Generate professional, ATS-optimized CVs and resumes as polished HTML files. Use this skill whenever the user asks to create, write, build, update, or improve a CV, resume, curriculum vitae, or job application document — even if they just say "make me a resume" or "help with my CV". Also trigger when the user provides career info, work history, or asks to format their experience for job applications. This skill produces visually stunning, eye-catching HTML that is simultaneously ATS-friendly — the best of both worlds.
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. For incremental edits to an existing system use figma-manage-variables; for syncing from a code tokens file use figma-import-tokens.
Apply Focus.AI brand guidelines to documents, presentations, websites, and other materials. Supports two sub-brands - Focus.AI Client (services, proposals, client work) and Focus.AI Labs (research, experiments, public content). Use when creating branded materials, applying visual identity, or generating content that needs to follow Focus.AI style. Trigger on "focus.ai style", "focus brand", "labs style", or requests for branded Focus.AI materials.
Treat existing images in code: CSS filters, blend modes, duotone, masks and clip-paths, overlays for text legibility, collages, SVG filters, and responsive delivery (picture/srcset/sizes, AVIF/WebP). Use when styling or serving photos on a page; to CREATE new images use image-generation. Trigger phrases: "image effect", "photo filter", "image overlay", "duotone", "image mask", "parallax background", "clip-path", "blend mode", "image grid", "responsive image", "css filter"
Standalone infographics that explain data, processes, comparisons, and timelines as a shareable graphic, via HTML/CSS/SVG (default when numbers must be exact) or Gemini 3.1 Flash image generation (illustrative, low-text pieces). Covers color coding, stat highlights, SVG charts, and layout templates. Use for a one-piece visual explainer; for interactive app dashboards use dashboard-design, for a feed stat post use social-media-graphic. Trigger phrases: "create an infographic", "design a chart", "data visualization", "process flow", "comparison infographic", "timeline design", "stats graphic", "infographic design", "visualize data".
Upgrade LLM outputs from plain text to structured, rendered formats like HTML, Marp slides, or interactive dashboards. Use this skill when the user wants better-formatted output, needs to convert notes into a presentation, wants HTML output from an LLM, needs slides from a document, or says "make this prettier", "render this", "output as HTML", "make slides from this", "structured output", "Marp", "better format". Based on Karpathy 19k-like HTML output post.
Build interactive web applications using HTML/JavaScript interfaces with MATLAB computational backends via the uihtml component. Use when creating HTML-based MATLAB apps, JavaScript MATLAB interfaces, web UIs with MATLAB, interactive MATLAB GUIs, or when user mentions uihtml, HTML, JavaScript, web apps, or web interfaces.
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions “onboarding flow,” “activation rate,” “user activation,” “first-run experience,” “empty states,” “onboarding checklist,” “aha moment,” “new user experience,” “users aren't activating,” “nobody completes setup,” “low activation rate,” “users sign up but don't use the product,” “time to value,” or “first session experience.” Use this whenever users are signing up but not sticking around. For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence.
When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.
Audit a Penpot design against WCAG 2.1/2.2 AA (optionally AAA) and produce a structured severity report: color contrast, touch/target sizes, text alternatives, heading hierarchy, and keyboard/focus order. Proposes fixes — does not auto-apply. Also serves as the Evaluator in the brief-to-screen and brief-to-deck loops (scope:deck = slide contrast rules). Triggers: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.
Create polished HTML slide decks and PDF-ready documents for consulting deliverables. Uses the RRBC design system with warm light mode, dark mode cover pages, Lora/Inter/Roboto Mono typography, and data visualization palette. Trigger on 'deck', 'slides', 'presentation', 'pitch deck', 'keynote', 'report', or 'PDF'.
Orchestrated, holistic UX review of a screen, flow, or component. Establishes context once, auto-runs the always-relevant lenses (usability, microcopy, dark patterns), offers the context-dependent ones (accessibility, aesthetics, IA, mobile, visual foundations), and returns one prioritized report. Trigger when the user asks for a full design review, "review my UI/screen/flow", "is this good UX", "audit this design", or general design feedback — but NOT when they name a single specific lens.
Banner graphics for owned channels: website hero/section banner images, email header images, event and conference banners, sidebar house promos, and announcement bars, via Gemini 3.1 Flash image generation (default) or HTML/CSS. Covers standard sizes, Gemini ratios and cropping, CTA placement, responsive art direction, and email constraints. For paid display/IAB ads use ad-creative-design; for a coded above-the-fold section use hero-section; for a full email template use email-design. Trigger phrases: "design a banner", "create a website banner", "hero banner image", "email header", "event banner", "promotional banner", "web banner", "sidebar banner", "announcement bar", "Eventbrite banner".
Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search <query>` to find icons, `better-icons get <id>` to get SVG. Also available as MCP server for AI agents.
Use when recreating a reference website or brand hub in this Hydrogen plus Weaverse repo, especially when deciding whether to reuse sections, add global styles, update theme schema, or resolve conflicts between the live site and project brand guidelines.
Grounds visual design decisions in cognitive psychology principles — perception, attention, memory, Gestalt grouping, and visual encoding hierarchy — explaining WHY certain designs work. Covers interfaces, data visualizations, educational content, and presentations. Invoke when user mentions cognitive load, visual hierarchy, working memory, preattentive processing, Gestalt principles, encoding hierarchy, or cognitive design pyramid. For design evaluation, use `design-evaluation-audit`. For fallacy prevention, use `cognitive-fallacies-guard`. For data storytelling, use `visual-storytelling-design`.
Read, post, reply to, and delete comments on a Figma file via the REST API — including pinning a comment to a specific node and threading replies. Use when the user wants to work with Figma comments programmatically — triggers: 'get Figma comments', 'read comments on this file', 'post a comment in Figma', 'leave a comment on this node', 'reply to a Figma comment', 'pin a comment to this element', 'delete a Figma comment', 'notify designers of drift', 'add a review note in Figma'. Uses the Figma REST API + a personal access token because comments are NOT reachable via the Plugin API / use_figma / the native Figma MCP.
Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, content guidelines, and optional code-parity + YAML frontmatter. Use when the user wants a docs page or handoff spec for a component or component set. Triggers: 'document this component', 'generate component docs/spec', 'create a docs page for the Button', 'write up the anatomy and variants', 'component handoff doc from Figma', 'turn this component into Markdown docs'. Reads the node tree, bound variables/tokens, and designer annotations, then the agent assembles Markdown. Requires the Figma Desktop app (Plugin API).
Scan generated/authored HTML for accessibility violations with axe-core (Deque) running over JSDOM — structural and semantic rules: ARIA attributes and roles, accessible names, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more. Use on the CODE side of a Figma-to-code workflow: triggers 'scan this HTML for accessibility', 'run axe on my component', 'check the generated code for a11y', 'axe-core scan', 'accessibility lint my markup', 'WCAG check on code', 'is this HTML accessible'. This is a standalone Node script — NO Figma connection required. Visual rules (color-contrast, focus-visible, link-in-text-block, target-size) are DISABLED because JSDOM has no layout — use figma-lint-design for visual a11y on the design side. The two together give full design+code coverage.
Collect design tokens from a web page and generate a complete DESIGN.md design specification document + Tailwind CSS theme file. Use when the user provides a URL and asks to "extract the theme", "generate a design spec", "export the design system", "extract this site's design tokens", "make me a theme", or "analyze this page's design style". Outputs include DESIGN.md (the getdesign.md / DESIGN.md 9-section standard) and globals.css (Tailwind CSS v4), with recommended/allowed/prohibited three-tier specifications for each token category, ready to drop into the project root for use by AI coding tools.
Best practices for Flutter theming with Material 3, treating ThemeData as the single source of truth for colors, typography, component styles, and spacing. Use when creating, modifying, or reviewing ThemeData, ColorScheme, TextTheme, component themes, spacing systems, or light/dark mode support, and whenever widget code carries its own styling: a hardcoded Color, an inline TextStyle, raw padding or gap numbers, the same decoration repeated across widget instances, or a brightness/dark-mode conditional inside build, even when the request only says "review this widget", "cut the duplication", "stop repeating this", or "tidy this up".
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," or "new user experience." For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence.
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
Use when you need to execute R3 (prototype generation) in the sdlc-dev product requirements Spec workflow, producing requirements/prototype.md from requirements/prd.md (task flow + page structure + ASCII wireframes + AC mapping + walkthrough script), and avoid continuing to generate when context or the PRD is missing, replacing the validation checklist with Open Questions, or using non-ASCII formats that make the prototype untraceable and unreviewable.
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.