Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Four-phase workflow: researches your live app's design language in Chrome, interviews you about what to animate, produces a brief and an HTML/CSS animation file, then iterates until approved. Requires Claude-in-Chrome MCP.
Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.
Production-grade SwiftUI with Apple Design Award-quality aesthetics. Use when building visually striking iOS interfaces — screens, components, redesigns. Screenshot-driven visual iteration, Liquid Glass (iOS 26+), bold design direction. For design advice without code, use ios-design-consultant instead.
Query @lynx-js/css-defines compat_data to check Lynx CSS property and nested feature/value support by rendering backend and Lynx version, or check whether a newer dataset version exists. Use when asked whether CSS is supported in Lynx or ReactLynx, which backends support it, when support was added, whether a style change is compatible, whether the bundled data is current, or when inspecting the raw definition JSON.
Expert guidance for building reusable UI components in Rails using partials, CSS classes, and helpers. Use when creating components, partials, reusable UI patterns, empty states, modals, cards, buttons, badges, alerts, data tables, or any component pattern. Covers decision framework for CSS-only vs partial vs helper vs ViewComponent, proper use of local_assigns, block yielding, capture for slots, variant patterns, and component galleries.
Generates professional infographics with various layout types and visual styles. Analyzes content, recommends layout and style, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".
Official Vercel agent skills for UI review and React work: Web Interface Guidelines compliance review, writing guidelines review, React/Next.js performance, component composition patterns, and React View Transitions. Lives in the vercel-labs/agent-skills collection.
Two-mode Figma design system skill — Inspect mode (read-only WCAG audit, component scoring, detached-instance detection, handoff docs) and Build mode (phased creation with variable bindings, slots, descriptions), with optional sync to tokens.css + AI rules. Needs the figma-use skill and the Figma MCP server.
Enforces accessibility as a correctness property authored into each widget: Semantics(button/label) or ExcludeSemantics on every node; a11y state read from MediaQuery, not app state; never MediaQuery.withClampedTextScaling / textScaleFactor / FittedBox / TextOverflow.ellipsis to fit a label; non-color redundant channels (icon+label+shape+text) for every state; contrast against composited backgrounds (4.5:1 body / 3:1 large); 44px single-tap targets; OrdinalSortKey traversal; and honoring boldText / reduce-motion. Use when adding a GestureDetector/InkWell or any tap target, adding an Icon or Image, reaching for withClampedTextScaling/FittedBox/ellipsis/textScaleFactor to make text fit, encoding state via color, sizing type, ordering focus traversal, or reviewing any View for screen-reader/switch/low-vision support.
Generates professional infographics with 21 layout types and 20 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when the user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图".
Foundational design context skill. Establishes brand identity, color system, typography, design style, and audience preferences, saved to .agents/design-context.md for every other design skill to reuse. Trigger phrases: "set up design context", "define brand style", "style guide setup", "initialize design", "set brand colors", "use our brand". To build a full token system and components use design-system; to generate a palette use color-palette; to create a logo and identity use brand-identity.
SÀN design mặc định của overstack (anti-AI-slop) — mọi UI đứng trên nó: build trang mới, audit, redesign, extract design từ URL/screenshot, và KHÓA HỆ THIẾT KẾ XUYÊN MÀN HÌNH qua design.md (chạy `hallmark redesign` cả app một lần → sinh design.md ở project root → mọi màn hình sau bám cùng hệ token/type/motion, không mỗi màn một kiểu). Gọi khi user nói: 'thiết kế', 'giao diện', 'làm UI/landing page/app mới', 'redesign', 'audit design', 'design system', 'đồng bộ giao diện giữa các màn hình', 'khóa hệ thiết kế', 'sao trang này trông AI-generated', hoặc gọi đích danh hallmark / dùng verb build·audit·redesign·study. Việc chạm UI mà không chắc dùng gì → dùng skill này (nó là sàn, các skill taste khác là flavour bên trên).
Deep knowledge of Apple's Liquid Glass design system (iOS 26+/macOS 26+): .glassEffect() modifier, .buttonStyle(.glass), GlassEffectContainer, platform-specific implementations, migration from existing apps, and common pitfalls with tested solutions.
Run a product multi-point inspection — assess a shipping product (app, website, or feature) as-built across 10 stations and produce a red/yellow/green inspection report with a prioritized work order. Use when the user asks to inspect, assess, audit, or health-check a product or experience, run the inspection or a specific station, or asks "why is my product's check engine light on?" Companion to ds-inspection — that one inspects the design system; this one inspects the products built with it.
Organic social media graphics (posts, stories, carousels, profile headers/covers) sized for Instagram, X/Twitter, LinkedIn, Facebook, Pinterest, and TikTok, with platform safe zones. Defaults to Gemini 3.1 Flash image generation; HTML/CSS for templated carousels. Use for unpaid feed content; for paid ads use ad-creative-design, for website/email banners use banner-design, for YouTube thumbnails and OG images use thumbnail-design. Trigger phrases: "create a social media post", "design an Instagram graphic", "make a Twitter image", "LinkedIn post graphic", "social media design", "Instagram story", "carousel design", "social graphic".
Transforms content (URLs, uploaded documents, pasted text, meeting transcripts) into professional visualizations across four output modes. Accepts a mode argument or a keyword trigger in the user message. Mode "diagram" produces an Excalidraw diagram via Excalidraw:create_view. Mode "infographic" generates a Swiss Pulse PNG via the Gemini image-generation API. Mode "visualize" renders an inline Visualizer widget (SVG or HTML) via visualize:show_widget. Mode "publish" ships an interactive Swiss Pulse HTML visual to HeyGenverse via HeyGenverse:create_app and returns a shareable link. Keywords that activate the skill: "diagram it", "excalidraw this", "draw a diagram of this", "nano this", "vis it", "ver it", "hey it", "heygenverse this". Do not use for plain-text summaries, code explanations, prose responses, or generic chat visualizations without a chosen output format.
D3.js data visualization skill based on Edward Tufte principles. Selects the right chart type from a large catalogue by analyzing the data question, then generates single-file HTML with D3 v7, dark theme, responsive layout, direct labels, and annotations.
Create custom data visualizations with D3.js: bar, line and scatter charts, chord diagrams, heatmaps, force-directed networks and geographic maps, with proper data binding, scales, axes, transitions and interactivity. Works in React, Vue, Svelte or vanilla JavaScript.
Build distinctive, production-grade frontend interfaces. Use when creating any web UI — sites, apps, dashboards, components. Focuses on design quality and avoiding generic AI aesthetics. Composable with other skills (docx, pdf, xlsx).
Craft-first interface design for dashboards, admin panels, SaaS apps, tools, and other information-dense product UI. Applies hierarchy, token, state, and consistency principles to produce interfaces that are both functional and visually coherent. Not for marketing or landing pages.
Open-source, local-first alternative to Claude Design. A daemon plus web UI or desktop app that runs design skills (web prototypes, SaaS landing pages, dashboards, mobile onboarding, decks, email, social carousels, posters, motion frames, sprite animation) and brand-grade design systems on top of your own coding-agent CLI or API key.
Use when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project. Covers shadcn-vue CLI commands (init, add, apply, view, search, docs, info, diff, migrate, build, mcp), components.json, styles, presets, fonts, icon libraries, registries, the MCP server, and the programmatic API. Gives exact flags and config keys for shadcn-vue 2.8.2.
Comprehensive guide for implementing the Syncfusion React Calendar component with quick navigation, when-to-use guidance, and reference links for common tasks. Use this skill for copy-paste-ready examples and decision guidance for date selection UI in React applications.
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.
Turn a curious developer into an activated one: the docs, quickstart, and first-run experience that get them to their first real win quickly and bring them back. Use when people sign up or star the repo but never get it working, visit once and never return, or you're about to drive traffic to a leaky first-run experience.
Build dashboards, analytics interfaces, and data-rich UIs using the Tremor design system (React + Tailwind CSS + Recharts). Use when the user asks to create dashboard components, KPI cards, charts, data tables, analytics pages, monitoring interfaces, or any data visualization UI that should use Tremor. Triggers include mentions of "Tremor", "tremor.so", "@tremor/react", requests for dashboard UIs with charts and tables, or when the user's project already uses Tremor components. Supports both Tremor Raw (copy-and-paste, tremor.so) and Tremor NPM (@tremor/react) versions. Do NOT use for general frontend work unrelated to dashboards or data visualization, or when the user explicitly requests a different component library.
Give the project one visual point of view, then generate images against it. Use before generating, editing or replacing any image asset — hero image, og:image, illustration, empty state, avatar, background, card art, favicon source. Also use when generated images look generic, "AI", off-brand, or when a set of images do not look like they belong to the same product. Skip for UI layout, CSS and component work, which belong to frontend-design and impeccable.
Analyzes article structure, identifies positions requiring visual aids, generates illustrations with a Type × Style two-dimension approach. Use when the user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 9 color palettes and 6 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", or "make cover".
freeCodeCamp's "Command-line Chic" UI design system and aesthetic guidelines. Apply these rules whenever building, styling, or reviewing any UI that should look and feel like a freeCodeCamp product — web apps, dashboards, landing pages, admin tools, component libraries, or themes. Use this skill when the user mentions freeCodeCamp styling, fCC design, "Command-line Chic", dark theme development for fCC, or asks for a UI that follows freeCodeCamp's visual identity. Also use when working on any freeCodeCamp repository, contributing to freeCodeCamp projects, or building tools and dashboards for freeCodeCamp staff, even if the user doesn't explicitly mention the design system
Turns a structured visual design brief (I-Lang format or plain language) into a concrete DESIGN.md spec plus an HTML preview. Forces the vague parts of a request ("make it professional") into explicit dimensions: palette, accent, typography, layout, mood, density, constraints. Built for OpenDesign; works standalone.
Build and manage pages, elements, components, and styles in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or updating components, viewing what's inside a component, restructuring pages, creating new pages, previewing page structure, styling elements, or managing component properties. Requires Webflow Designer connection.
Reverse-engineers design tokens (colors, typography, spacing, border radius, shadows) from any public website and generates tokens.json and tokens.css for local projects. Skill plus a bundled CLI the agent runs. Outputs token files, not a DESIGN.md document.
Use this to turn a Figma design into an AEM Edge Delivery Services (EDS / AEM / Franklin / Helix) content page in Document Authoring (DA, da.live). Triggers: "build this Figma frame in EDS", "turn this Figma design into a DA page", "publish this design to da.live", or providing a figma.com URL for a page. Reads the frame (and any annotations) via a Figma MCP, resolves each section to an existing block, a new isolated block, or default content (inferred against the project's existing blocks and confirmed with you, or read from annotations when the frame happens to have them), generates DA-compliant body-fragment HTML, and deploys via the DA Source API + preview.
Scores and rewrites text to remove AI writing patterns. Rates content across seven dimensions (AI vocabulary, content inflation, grammar patterns, UX copy quality, structural tells, punctuation, and meta-content), each on a 1–10 scale. Works with raw text, Figma URLs, and UI screenshots. Based on Wikipedia's Signs of AI Writing field guide.
Select semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking patterns. Use when: building feature sections, service grids, contact info, navigation, or any UI needing icons. Prevents emoji usage, ensures consistency.
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.
Logo design principles and AI image generation best practices for creating logos. Covers logo types, prompting techniques, scalability rules, and iteration workflows. Use for: brand identity, startup logos, app icons, favicons, logo concepts. Triggers: logo design, create logo, brand logo, logo generation, ai logo, logo maker, icon design, brand mark, logo concept, startup logo, app icon logo
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.