Skills
97,501 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Generate a series of Xiaohongshu infographics with 10 visual styles and 8 layouts. Split the content into 1–10 cartoon-style images, optimized for Xiaohongshu engagement. Use when users mention “Xiaohongshu images,” “XHS images,” “Xiaohongshu seeding,” or need Chinese social media infographics.
Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
Generates wireframes from natural language descriptions, outputting machine-readable JSON (.wireframe.json) and a self-contained interactive HTML preview with drag-and-drop reordering and undo/redo. Needs Python 3 and a browser, no design tool accounts.
Use when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and platform conventions. Includes an M3 compliance audit that scores screens across 10 categories. Complements the compose skill with design-level decisions.
Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or reverse-engineer a visual design: its design system, palette, typography or style.
Use when working with Blossom Carousel Vue or Nuxt integration, including installation, component registration, styling, usage examples, Tailwind examples, accessibility or a11y guidance, root element customization, navigation controls (BlossomPrev, BlossomNext, BlossomDots, BlossomDot), command events, overscroll events, and Vue-specific carousel implementation.
Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conversation ui, chat building blocks
Audit a website or UI and de-AI it — find the patterns that make it look template-generated (in both design and copy) and return specific, prioritized fixes that push it toward editorial, premium, human-crafted. Reviews layout, color, type, spacing, motion, accessibility, AND the words. Use after building or generating any frontend, or when a site looks "fine but generic" and you can't say why.
Data visualization engineer agent using D3.js, Chart.js, Matplotlib, and Plotly. Chooses visual encodings by perceptual accuracy, enforces WCAG AA contrast, colorblind-safe palettes, and keyboard and screen-reader support, and selects the right chart type for the data relationship. Upstream is a Claude Code subagent definition installed here as a skill.
Deterministic design-system audit plus a full set of design specialists as slash commands. `npx dwic-audit` scans a project across categories such as color, typography, spacing, accessibility, forms, navigation, motion, and copy using WCAG contrast math and token parsing (no LLM involved), then routes each finding to the specialist that fixes it. Specialists cover visual hierarchy, interaction design, design system architecture, typography, color, spacing, motion, forms, navigation, dashboards, mobile, landing pages, auth UX, healthcare UX, B2B SaaS, e-commerce, dark mode, error handling, onboarding, and data viz. Installs as a Claude Code plugin; the commands are pure markdown with no runtime dependencies.
Official Google Stitch skills for the design-to-code pipeline: generate and edit Stitch screens, DESIGN.md and SITE.md management, prompt enhancement, React / React Native / shadcn/ui component generation, code-to-design upload, and iterative Stitch build loops.
Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop. Use when adding a new detail or list view for an MCP tool, creating view components in products/*/mcp/apps/, or linking tools to UI apps via YAML
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
Expert micro-interaction architect for mobile apps, web applications, and responsive websites. Use this skill when the user asks to add, build, fix, audit, or consult on micro-interactions, animations, transitions, motion design, gesture feedback, haptics, loading states, skeleton screens, pull-to-refresh, swipe actions, scroll animations, button states, form validation feedback, toast notifications, modals, dropdowns, toggles, progress indicators, shared element transitions, spring physics, easing curves, motion tokens, or any interaction that provides visual/haptic/auditory feedback to user actions. Triggers on: "micro-interaction", "animation", "transition", "motion", "easing", "spring", "gesture", "haptic", "feedback", "loading state", "skeleton", "shimmer", "pull to refresh", "swipe", "drag", "hover effect", "press state", "focus ring", "scroll animation", "parallax", "stagger", "orchestration", "reduced motion", "View Transitions", "layout animation", "shared element", "hero animation", "morphing", "Framer Motion", "GSAP", "Lottie", "Rive", "React Spring", "anime.js", or any request to make an interface "feel better", "feel alive", "feel snappy", "feel responsive", or "feel polished".
Enforces designed interaction feedback instead of the framework default — every committing interaction acknowledged in the same frame, motion that decorates state but never IS the state (the end state is identical with animations off), a named catalog of moments each declaring its trigger, duration role, haptic slot and reduced-motion fallback at design time, haptics as a HapticTheme event-to-intensity map fired exactly once on the commit frame (never per animation frame, never per coalesced input, never heavyImpact for an error) behind one central toggle, every animation interruptible so a tap resolves it to its end state, a bounded celebration that plays once and never loops or blocks input, an explicit stop condition on every repeating animation (off-route, backgrounded, reduced motion), and feedback on more than one channel so haptics and sound survive reduced motion. Use when adding or tuning an animation, a success or error state, a haptic, a celebration, or a screen transition.
Implement the Syncfusion React DateRangePicker component for date range selection, booking systems, and reporting interfaces. Use this when working with date range pickers for appointment booking, event scheduling, date filtering, or vacation requests. Covers date range validation, preset ranges, format customization, event handling, and form integration.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). 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. Integrations: shadcn/ui MCP for component search and examples
UX/UI design guidance for building, reviewing and critiquing interfaces, grounded in Nielsen heuristics, the Laws of UX and WCAG 2.2, with modern 2026 best practices. Covers interaction patterns, forms, navigation, accessibility, UX writing, onboarding, AI and chat interfaces, i18n/RTL, and more, with reference files loaded on demand.
Use when the user asks to explain a problem, issue, PR, or feature as an infographic. Create a step-by-step visual explanation starting from user code or actions, with a clear problem/solution boundary, syntax-highlighted snippets, and focused diagrams. Support standalone educational PDFs and Markdown-first PR explanations, with optional images only for complex diagrams. Also apply when explicitly invoked by the repository PR writer.
Load this skill immediately whenever a project contains an ACCESSIBILITY.md file, or whenever you are contributing to the mgifford/ACCESSIBILITY.md repository. Absolutely always read ACCESSIBILITY.md before proposing or writing any changes. Under no circumstances skip this skill when an ACCESSIBILITY.md file is present. This skill governs when and how all other accessibility topic skills must be loaded.
A domain navigator for presentation, diagram, wireframe, data visualization, design review, product strategy, copywriting, UX writing, content design, and design research skills. Routes to the right skill for slides, charts, UX strategy, PM frameworks, email, microcopy, product copy, user research, and design sprints.
CRO (conversion rate optimization) skills by Corey Haines: optimize post-signup onboarding and activation, improve conversion rates on marketing pages and forms, and optimize signup and trial activation flows. Part of a larger marketing skills library of which only these three are installed.
Enforces CustomPainter/Canvas discipline — the View/Painter/Scene split with a dumb painter fed one immutable Scene value type, shouldRepaint as a single value compare kept strictly separate from the AnimationController-as-repaint animation path, one shared affine transform read by BOTH painter and hit-tester (toCanvas/toLogical exact inverses, never re-derive scale), geometry hit-testing (integer lattice or rasterized region-ID buffer, never Path.contains), zero-allocation paint(), gesture-as-pure-translator emitting a typed command to a Notifier (never mutating in the handler), ExcludeSemantics + sibling Semantics speaking display values with redundant non-colour encoding, measured TextPainter fitting, first-party RoundedSuperellipseBorder, physical-pixel hairlines, and Directional-only geometry. Use when writing or reviewing a CustomPainter/CustomPaint, gestures on a canvas, tap/drag hit-testing, canvas animation, measured text fitting, or Semantics over custom-drawn pixels.
Create professional, consultant-grade PowerPoint presentations from scratch using python-pptx with McKinsey-style design. Use when the user asks to create slides, pitch decks, business presentations, strategy decks, quarterly reviews, board meeting slides, or any professional PPTX. Generates clean, flat-design presentations with 36 layout patterns, consistent typography, and zero file-corruption issues.
Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dynamic generation. Use for: social sharing images, blog thumbnails, link previews, social cards. Triggers: og image, open graph, social sharing image, twitter card, social card, link preview image, og meta, sharing preview, social thumbnail, meta image, og:image, twitter:image, linkedin preview
Design detailed screens and connected prototypes from a specification or selected backlog scope, using the repository's design system and existing components. Use for polished UI flows, responsive screen design and implementation handoff. Neutral discovery experiments belong to om-mockup-prototype.
De-risk product decisions with UX research: method choice, study design, findings synthesis and research operations (interviews, usability tests, surveys, research repository and consent practice), backed by a library of reference guides and templates.
Comprehensive guide for implementing the Syncfusion React DateTimePicker component. Use this when working with combined date and time inputs, datetime formatting, localization, or keyboard-accessible UIs in React applications. Covers component setup, event handling, and accessibility patterns.
Implement the Syncfusion React TimePicker component for time selection, scheduling interfaces, and appointment booking. Use this skill whenever users need time picker inputs for appointment systems, scheduling apps, time-based filtering, shift management, or time range selection. Covers installation, time format customization, min/max constraints, event handling, form integration, validation patterns, and mobile responsive behavior.
Implements the Syncfusion WPF Carousel for displaying items in rotating or custom path interfaces with navigation support. Use when building image carousels, rotating galleries, or custom-path item displays with templates and data binding.
Use this skill any time the user wants to create, design, or produce slide presentations — as standalone files or embedded content. This includes: pitch decks, slide decks, keynote presentations, training materials, project proposals, quarterly reviews, weekly report slides, investor pitches, product launches, team kickoffs, business plans, onboarding decks, strategy presentations, sales pitches, conference talks, and any request involving 'slides' or 'PPT'. Also trigger when: user says 做PPT, 做个汇报, 写个演示文稿, 季度汇报, 竞品分析报告（要PPT）, 产品发布会, 培训材料, 周报. If slides, decks, or presentations need to be produced, use this skill.
Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.
Scaffold, build, package, and install a custom visualization into Splunk using the dashboard-studio-extension framework. Use when the user wants to create a new custom viz, add a visualization to an existing project, or migrate a legacy custom viz.
Render UI wireframes as labeled ASCII art where every region maps to a real component in YOUR design system. Use when someone asks for an ASCII prototype, a text wireframe, a monospace mockup, or wants to sketch a page layout inside a chat, PR, issue, or Slack thread without opening a design tool. Triggers include "make me an ASCII prototype of…", "wireframe this as text", "sketch a homepage for…", "mock this up in ASCII", "show me this page as ASCII". Builds a one-time profile of the design system's component vocabulary, then renders against it. Typography hierarchy is drawn, not described.
Build good-looking web interfaces. Use when: - User asks you to build a web app, website, landing page, or HTML page - User asks for a one-off tool, utility, or demo app - User is starting a new frontend project - User wants to improve how something looks - User mentions UI, design, styling, or making something look better This applies to ANY frontend work, not just "design" tasks. Even simple apps benefit from basic design principles.
One routing skill for text-driven visuals in Markdown, from the docu.md pipeline: charts and analytics (Vega-Lite, ECharts), UML, BPMN, ArchiMate and cloud, network and security architecture (PlantUML), infographics, system-architecture layouts and cards in HTML/CSS. Figures are text in the Markdown, rendered live by the viewer.
Two official Microsoft frontend skills: frontend design review for distinctive, design-system-compliant interfaces, and dark-themed React with Tailwind and Framer Motion animations. Both target production-quality UI with strong visual identity.
Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium.
Format the approved final Markdown for an official WeChat account and save it to the WeChat Official Account drafts. Use when users ask to publish to an official account, save to drafts, format an official account post, change the formatting theme, or send a Xiaolvshu image post. Automatically uploads cover and inline images; supports multiple themes, custom CSS, multiple accounts, and server mode. Creates drafts only; does not send mass messages. Provide credentials only through environment variables. If the adapter tools are not installed, deliver a manual publishing package.
Technical reference for writing or editing open-slide pages — file contract, 1920×1080 canvas, type scale, layout, palette/visual direction, assets, speaker notes, stepped reveals, page transitions, and morph transitions. Consult this whenever you are about to write or modify any file under `slides/<id>/`, including from inside the `create-slide` or `apply-comments` workflows, or for any ad-hoc slide edit. Triggers on phrases like "edit slide", "tweak this page", "fix the layout", "change the palette", "reveal one by one", "add a transition", "morph transition", "write the speaker notes", "generate the script / talk track", "preview / screenshot a page", "check how it looks", "investigate the slide framework", "how do slides work here".
Use only after `sn-ppt-entry` and `sn-ppt-story` have prepared the absolute `DECK_DIR` and `outline.md`. Generate a separate HTML file for each slide (1600×900), rendered PNGs, speaker notes for each slide, and `present.html`; generate PPTX converted by Standard’s own exporter as selected by `static_postprocess`. **`present.html` is always a required deliverable; missing it is a technical failure, and it must not be delivered. When `static_postprocess` includes `pptx`, PPTX is also required (omitting either is a technical failure) and must be generated only by Standard’s own exporter. PPTX may be omitted only when the user explicitly requests HTML only (`static_postprocess` is `[]`).**
Design-adjacent skills picked from the softaworks agent toolkit: mermaid-diagrams, excalidraw, draw-io, c4-architecture, marp-slide, database-schema-designer and design-system-starter. The repo holds many more skills (jira, codex, gemini, commit tooling, ...) that this pointer does not install.
Design method engine that teaches agents design judgment, not just data. One entry-point skill routes to internal workflows for setup, build, review, scoring, rendered verification, tokens, motion, accessibility, copy and updates. Compiles project-specific rules from a design lock (STYLESEED.md), with brand skins and structural recipes, and a score-then-fix quality gate. Works with Claude Code, Codex and Cursor.
Best practices and example-driven guidance for SwiftUI views and components: tab architecture, navigation hierarchies, screen composition, custom view modifiers, and responsive layouts. Keeps SwiftUI code idiomatic and maintainable for Apple platform apps.
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.