Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Document accessibility decisions and the reasoning behind them so they survive team changes, redesigns, and time. Use when making accessibility tradeoffs, choosing between approaches, or when a decision needs to be recorded for future reference. Triggers on: accessibility decision, why did we, tradeoff, decision record, ADR, architecture decision, accessibility rationale, why is it like this, document the decision, decision log.
Create, repair, and calibrate ToDiagram custom-format diagrams (.todiagram) for end users, including system architecture maps, process/flow diagrams, schema normalization, and readability-driven grouping/splitting. Use when users ask for ToDiagram JSON generation, invalid payload fixes, architecture/flow modeling, simplification/detail tuning of existing diagrams, or stable file-based diagram output.
Create visual concepts, image-generation prompts, and optional AI-generated images for product hero images, marketing creatives, social posts, ads, ecommerce PDP visuals, and general visual design tasks. Use when the user asks for visual strategy, image prompt writing, product/marketing image direction, or direct text-to-image generation. In Codex environments use the built-in imagegen tool; elsewhere use the bundled script backed by the apiz CLI.
This skill MUST be used to create, review, analyze, teach, or facilitate 生態系地圖 (ecosystem maps), 利害關係人地圖 (stakeholder maps), or 服務藍圖 (service blueprints), including uploaded blueprints and CJM-to-blueprint requests. It SHOULD also be used for 服務設計、服務流程優化、服務旅程、接觸點 or 前台後台分析 when the task needs participant relationships, value exchanges, or service delivery analysis, even without naming a tool. It MUST NOT require users to remember a skill name.
Generate Outlook-compatible email templates (EML + HTML) through conversation. Three modes: Design (create from scratch), Import (replicate an existing .eml), Production (fill Excel data into a crystallized template). Use when user wants to: create or design an email template, generate an .eml file, make a newsletter, format an email for Outlook, import/replicate an email (导入/复刻邮件), design a 邮件模板, do 邮件排版 or 邮件设计, build pixel-perfect HTML email with Outlook compatibility. Triggers: weekly report email (周报邮件), product update email, event invitation (活动邀请邮件), announcement (公告邮件), company newsletter, .eml import, replicate email template, or make an email look professional/beautiful for Outlook. Handles visual design, EML generation, and EML import — not SMTP, sending, or account management. Without this skill, Outlook emails break because Outlook uses Word rendering which ignores modern CSS.
Patch an existing Data Capture Flow that's already deployed in a connected Salesforce org. Retrieves the live Flow Metadata JSON via the Tooling API, applies the user's requested change, and PATCHes it back. Use when the user names an existing flow and asks to add/remove/rename a field, change visibility, fix a bug, add visual polish, or swap a placeholder for a real component ('add a Notes field to Inventory_Transfer', 'fix the visibility rule on Work_Order_Number', 'make the parts repeater optional', 'replace the Signature placeholder with the real dcSignature component'). Do NOT use this skill to build a brand-new flow — that's fs-data-capture-form-designer followed by fs-data-capture-form-deployer.
Derive a Field Service mobile app color scheme from a brand source (URL, hex codes, brand-guide paste, or color description), validate WCAG AA contrast in both light and dark mode, and apply the 14-field scheme to the org-default FieldServiceMobileSettings record. Trigger phrases include 'brand the mobile app', 'apply branding to Field Service mobile', 'update the mobile app colors', 'use this brand guide for the app', 'set the color scheme for the mobile app'. Do NOT use this skill for Dispatcher console / Gantt branding, Experience Cloud BrandingSet records, or scheduling policy colors — out of scope.
Implement or review advanced Flutter visual rendering such as frosted or liquid glass, backdrop blur, refraction, shaders, custom painting, glow, masks, and effect fallbacks. Use when the request explicitly needs a nontrivial visual effect; route art direction, ordinary styling, animation timing, and evidence-based performance diagnosis to their dedicated skills.
Design alternatives to gesture-based and motion-based interactions. Use when designing swipe actions, pinch-to-zoom, shake-to-undo, tilt controls, multi-finger gestures, or any interaction that requires specific physical movements. Triggers on: gesture, swipe, pinch, shake, tilt, multi-touch, two-finger, rotation gesture, device motion, accelerometer, gyroscope.
Pin a section when it scrolls into view, then turn vertical scrolling into horizontal scrolling via GSAP ScrollTrigger (pin + scrub + tween of the track's xPercent). Call when the user says "gsap scrolltrigger", "pin section", "cuộn ngang", "horizontal scroll section", "scroll-driven horizontal", "pinned horizontal scroll", or /gsap-scrolltrigger-pin. DIFFERENT from `scroll-effects` (7 light vanilla effects, no dependency, no pin) and `lenis-smooth-scroll` (smooths FULL-PAGE scrolling, no pin/no direction change) — this skill NEEDS GSAP and applies only to ONE specific pinned section.
Generate an accessibility decision handoff for engineering. Chains: decision-documentation, compliance-mapping, accessibility-testing-strategy. Use when a design is ready for implementation and the engineering team needs clear accessibility specifications.
Create showreel-quality motion graphics videos (Behance / OFFF / Awwwards level) with HyperFrames (HTML + GSAP + SVG + Canvas, Apache-2.0). This is the HyperFrames version of remotion-motion-reel, configured without requiring a Remotion Company License. Based on the theme and assets (character images, audio, etc.), develop the world, copy, design system, timeline, and sound, then implement and render beat-synced video at 120BPM/60fps. Use for requests such as “make a cool video with HyperFrames”, “motion graphics without a license”, or “make a showreel in HTML”.
Push design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes, and values. Use when the user wants to sync tokens code→Figma: triggers 'import tokens into Figma', 'create Figma variables from my tokens.json / DTCG / Tailwind config', 'sync design tokens to Figma', 'push tokens to Figma'. Non-destructively matches existing variables (by saved id/key/name) so re-imports update instead of duplicating. Works on ANY Figma plan. For the reverse (Figma → code) use export-tokens-figma.
WebGL (Three.js) image grid that scrolls/drags INFINITELY via coordinate wrapping — dragging or scrolling shifts a virtual offset, and mesh positions are recomputed with modulo, so the grid looks infinite even though only N×N real tiles exist. Call when the user says "lưới ảnh vô hạn", "infinite scroll grid webgl", "draggable image wall", "poster wall cuộn vô hạn", or /infinite-webgl-grid. DIFFERENT from `skills/threejs-particle-morph` (discrete particles CONVERGE into one image by scroll progress, with a fixed "destination" — this is a continuously browsed tile grid, no destination) and DIFFERENT from `skills/blur` (transitions one image to another on a single plane, not browsing a grid of many images).
Write link text that makes sense out of context for screen reader users and improves usability for everyone. Use when writing or reviewing links, calls to action, navigation labels, or any clickable text. Triggers on: link text, click here, read more, learn more, screen reader links, link purpose, anchor text, call to action, CTA, ambiguous link.
Complete React forms system. PROACTIVELY activate for: (1) Controlled form patterns, (2) React Hook Form setup and validation, (3) Zod schema validation, (4) Dynamic fields with useFieldArray, (5) Server Actions with forms, (6) useOptimistic for optimistic updates, (7) File upload handling, (8) Multi-step form wizards. Provides: Form validation, error handling, field arrays, file drag-drop, form state management. Ensures robust form handling with proper validation and UX.
Load this skill for any project with a user interface that must work across screen sizes and input methods, such as websites, web apps, dashboards, marketing pages, emails, or design systems. Use when building or reviewing layouts, choosing breakpoints, setting up fluid type, sizing touch targets, or making components adapt to their container. One design must serve phones, tablets, laptops, desktops, touch, mouse, and keyboard. Prefers content-first, mobile-first, framework-agnostic CSS and Baseline-stable features.
The Figma↔Storybook bridge, both directions, via the native Figma MCP. design→code: map foundation tokens (color/spacing/type) from Figma variables with design↔code parity + drift, and deliver approved Figma components (extract → build → embed), authoring stories via sb-stories' rules. code→design: build Code Connect mappings from components + stories + token parity + usage so Figma Dev Mode shows the real code. Use for 'sync my Figma tokens', 'map Figma variables to my design system', 'deliver this approved Figma design', 'check design↔code token parity', 'connect my components to Figma / code connect'. NOT for prototyping/iterating an undecided design (that's sb-explore).
Hub for page scroll effects — 64 verbatim ORIGINALS (freefrontend/CodePen, MIT) in the repo Rheinmir/uiux-asset for copying files as-is, plus 7 light vanilla effects: reveal-on-scroll, staggered text, scroll highlight, sticky shrink nav, scroll-to-top, scrollspy TOC, light data-speed parallax. Vanilla HTML/CSS/JS, respects prefers-reduced-motion. Call when the user says "hiệu ứng scroll", "scroll reveal", "scroll to top", "scrollspy", "parallax nhẹ", "highlight khi cuộn", or /scroll-effects. DIFFERENT from `blur` (heavy GPU WebGL image transition) and `timeline` (time milestone axis) — these are everyday page scroll effects, light, no dependency.
This skill MUST be used to turn a service design problem into a practical brief, service architecture, touchpoint analysis, or prototype validation plan, including 服務設計、服務流程、接觸點、前台後台、服務實證、顧客體驗、利害關係人、服務概念、服務架構. It SHOULD also be used to improve part of an existing service design or prepare workshop outputs, even when the user does not name a method or workshop.
Expert guidance for shadcn-svelte, a Svelte 5 port of shadcn/ui. Use this skill when working with shadcn-svelte components, installing UI components via CLI, implementing forms with Superforms/Formsnap, adding dark mode with mode-watcher, creating data tables with TanStack Table, theming with Tailwind CSS v4 and OKLCH colors, or building custom component registries. Triggers on mentions of shadcn-svelte, Bits UI components, or SvelteKit UI component libraries.
Design simplified and reduced-complexity views of interfaces for users who need less visual noise and fewer options. Use when designing settings, dashboards, complex tools, or any interface that could benefit from a simpler mode. Triggers on: simplified view, simple mode, easy mode, basic view, reduce complexity, less clutter, overwhelmed, too many options, beginner mode, essential view, focus mode.
Map situational impairments that affect all users in specific contexts — not just people with permanent disabilities. Use when designing for mobile, outdoor, noisy, stressful, or multitasking contexts. Triggers on: situational, context of use, environment, one-handed, bright sunlight, noisy, driving, multitasking, gloves, temporary disability, context, edge case.
Progressively draw an SVG line (stroke-draw) with page scroll or on entering the viewport — measure `path.getTotalLength()`, set `stroke-dasharray`/`stroke-dashoffset`, animate dashoffset from length to 0. Call when the user says "vẽ svg khi cuộn", "svg stroke draw", "logo vẽ dần", "path animation reveal", "stroke-dashoffset", or /svg-stroke-reveal. DIFFERENT from `skills/scroll-effects` (7 general scroll effects — reveal/stagger/highlight/nav/top/toc/parallax, NO stroke-draw) — this skill is specialized for SVG `<path>` with a DRAWN STROKE (logo, signature, line chart, journey).
Common utilities and features for Syncfusion JavaScript controls. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion JavaScript controls.
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
UI design and implementation for real product surfaces with taste-first critique, reference routing, project-specific design briefs, variation comparison, and implementation verification. Use when Codex should redesign, build, polish, or critique frontend UI by reading project context, exploring taste, routing through `references/catalog.md`, synthesizing `PROJECT_DESIGN.md` or `design.md`, using investment gates to avoid wrong taste/reference/scope, implementing in the existing stack, and evaluating whether the result is actually better. Best for app screens, dashboards, landing pages, query tools, product surfaces, and design explorations; not for backend-only work or tiny cosmetic edits.
Particle cloud Three.js (THREE.Points + BufferGeometry) converging from random positions into an image/logo as the page scrolls — sample pixels from a hidden canvas as target coordinates, lerp position on scroll. Invoke when the user says "particle image", "hạt hội tụ thành ảnh", "three.js particle scroll", "point cloud morph", "particle cloud biến hình theo scroll", or /threejs-particle-morph. DIFFERENT from `skills/blur` (that is a GLSL radial-blur shader transforming one image into another on a plane — this is a discrete particle cloud morphing into an image, a completely different rendering technique — PointsMaterial/BufferGeometry, not ShaderMaterial on PlaneGeometry).
Use when planning, building, designing, code review, refactor, fixing, improving, optimizing, enhancing, or checking UI/UX work. Covers product patterns, landing pages, chart choices, visual styles, palettes, typography, UX rules, and 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). 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. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags
Use when animating an Apple-style interface — spring physics, the signature smooth/snappy/bouncy springs, fluid interruptible transitions, hero/continuity transitions, gestures (swipe, drag, context menu, Dynamic Island, swipe actions), haptic feedback, control/loading micro-interactions, and the web aliveness primitives (continuous scroll-progress motion + pointer-reactive sugar). Part of the apple-design family. Keywords: apple animation, spring, springs, damping fraction, response, fluid interface, interruptible, matchedGeometryEffect, zoom transition, hero, gesture, swipe to dismiss, drag, velocity handoff, context menu, haptics, taptic engine, sensory feedback, micro-interaction, button press, prefers-reduced-motion, css linear() spring, easing, scroll-progress, scroll progress mapping, damped scroll, scroll smoothing, mapRange, magnetic button, tilt, pointer-reactive, spotlight.
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.