Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Comprehensive WCAG accessibility auditing with multi-tool testing (axe-core + pa11y + Lighthouse), TRUE PARALLEL execution with Promise.allSettled, graceful degradation, retry with backoff, context-aware remediation, learning integration, and video accessibility. Uses 3-tier browser cascade: Vibium → agent-browser → Playwright+Stealth.
Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) — each a complete visual system (palette + type + accent) captured from replit.com/slides. Pick one theme, do not mix. For pitch decks, board reports, brand memos, campaign reveals — when the user explicitly wants "Replit Slides style".
Use when reviewing/judging a finished (or amended) high-fidelity UI design produced AS CODE — an acceptance gate: is the rendered hi-fi a sound build seed? The reviewer RE-RENDERS the code itself (headless browser) and vision-reviews the fresh screenshots — never trusting handed-in images. Judges a single-sourced bar: full coverage vs the wireframes; hi-fidelity + seed-not-over-built; visual execution + objective polish + named aesthetic heuristics (subjective taste never a gap); token-backed/no-DS-drift; real content (no lorem); rendered states; responsive reflow; NUMERIC WCAG 2.2 AA on the render (axe-core + vision, no rule disabled); gaps surfaced; an amend as a scoped versioned delta. Emits `VERDICT: approve|revise` + actionable findings; approves a seed meeting the bar (no false-revise on a thin screen), revises only on a named, rendered gap. Requires a vision-capable runtime. Not for authoring hi-fi, the structure (wireframes), the token system (design-system), or final code.
Guides creation of a new Tambo project from scratch with technology recommendations. Use when user wants to start a NEW project, build a new app with Tambo, create something from nothing, or needs help choosing technologies for a new generative UI application. For adding Tambo to EXISTING projects, use add-to-existing-project skill instead.
Guide to implement Syncfusion WinForms DockingManager control for Visual Studio-style dockable windows and layouts. Use this when creating docked, floating, or tabbed windows with advanced layout management. Covers dock states, auto-hide functionality, caption customization, and serialization in WinForms applications.
Guide for implementing Syncfusion SfListView control in Windows Forms for creating list-based UIs with data binding, grouping, sorting, filtering, and selection capabilities. Use when building applications with item collections, Explorer views, contact lists, or product catalogs with sortable/filterable lists. Covers data binding, checkbox lists, grouped lists, filtered lists, and rich data display for list interfaces.
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.
Create, polish, and quality-check editable undergraduate or graduate thesis defense PowerPoint decks from a local thesis PDF/LaTeX project and an existing PPTX template. Use when the user asks for a formal defense PPT, thesis presentation, academic答辩PPT, template-matched PPTX, or local PowerPoint deck generation with visual inspection.
Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).
Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers. Use when building or reviewing UI components, modals, menus, forms, custom widgets, or when the user says "make this accessible" or reports keyboard or screen-reader issues. Triggers on accessibility, a11y, WCAG, aria, focus ring, focus-visible, focus trap, keyboard navigation, tab order, tabindex, screen reader, sr-only, aria-live, alt text, hit area, touch target, pointer-events, hover on touch, prefers-reduced-motion, autoplay, toast duration, skip link, semantic HTML, aria-label, form errors, disabled buttons, "not keyboard accessible".
Color systems for digital products, from building and naming a palette to applying it with meaning and verifying contrast. Use when creating or extending a color palette, naming color tokens, theming light and dark appearances, auditing the colors in a codebase, or reviewing frontend code for color. Triggers on color palette, palette generation, color scale, color ramp, brand color, accent color, neutral palette, gray palette, status colors, design tokens, semantic color tokens, token naming, theming, dark mode colors, contrast ratio, APCA, gamut, display p3, oklch, color conversion, gradients, color meaning, increased contrast.
Guide to building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation
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.
Always invoke before answering any request to create, compare, design, or review a user-facing map, even if the request is terse or underspecified. Covers publication maps, choropleths, map series and small multiples, comparable multi-date panels, proportional/bivariate/flow maps, raster rendering, and interactive web maps. Includes classification, color, legends, projections, accessibility, and large-data aggregation. Do not trigger for a temporary diagnostic plot inside another analysis.
One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visual specs), and styles (color/text/effect with resolved values). Use when you need the whole design-system picture before generating code or auditing coverage — triggers: “inventory my design system”, “extract all tokens and components”, “what's in this design system”, “dump the design system kit”, “give me every variable, component, and style”, “build a design-system manifest”, “audit my Figma library”. Has a verbosity/scope guard so big files don't blow the response budget. Goes well beyond the native MCP's get_design_context (single-selection) / get_metadata.
Use for design thinking, or when a product or service problem needs user understanding before solutions: "what do users really need?", "how might we...", "plan a discovery sprint", "validate this concept". Skip when the spec is frozen or the task is code maintenance.
Apply when deciding, designing, or implementing FastStore theme customizations in src/themes/ or working with design tokens and SCSS variables. Covers global tokens, local component tokens, Sass variables, CSS custom properties, and Brandless architecture. Use for any visual customization of FastStore storefronts that does not require component overrides.
Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files. Works with frames, components, and entire design files to generate HTML, CSS, React, or other frontend code.
Build and refactor Flutter widgets, forms with stale-safe asynchronous validation and duplicate-submit handling, widget previews, component APIs, and UI state boundaries. Use alone for form behavior over existing services; add networking or concurrency only when their infrastructure changes, and route visual polish, responsive layout, navigation, animation, and performance to their specialists.
Verified 2026 implementation cookbook for Awwwards-grade front ends (474 recipes, type-checked and browser-audited). Covers motion and easing tokens, GSAP ScrollTrigger + Lenis choreography (pin, scrub, horizontal, stacked cards, SplitText), CSS scroll-driven animations, modern CSS (@starting-style, anchor positioning, @property, container queries), text effects and font pairing, hover/cursor/micro-interactions, view and route transitions, preloaders and menus, CSS/SVG/canvas backgrounds, WebGL shaders and Three.js/R3F, 21st.dev / Aceternity / Magic UI / React Bits components, OKLCH color, layout and hero composition, 30 aesthetic directions, performance and accessibility. Use when building, styling, animating or redesigning any website, landing page, portfolio or UI component, or when the user asks for an effect ("make it feel premium", "scroll animations", "smooth scroll", "parallax", "text reveal", "shader background", "page transition", "custom cursor", "bento", "marquee"), even if no library is named.
Create distinctive, production-grade web frontend interfaces with high design quality. Use when the user explicitly asks to build or substantially redesign a web component, page, or application. Only applies when repository inspection confirms that the visual surface is a browser-rendered web UI. Do not use for native or GPU-rendered graphics, shaders, games, terminal UIs, or other non-web visual systems. Ignore incidental mentions and traces.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
Odoo frontend JavaScript patterns for website themes. Covers publicWidget framework (complete pattern with editableMode handling), Owl v1/v2 component patterns, _t() translation best practices, Bootstrap 4-to-5 migration, version detection, and critical development rules. Supports Odoo 14-19. <example> Context: User wants to create a publicWidget user: "Create a publicWidget for my Odoo website" assistant: "I will create a publicWidget with editableMode handling and proper cleanup." <commentary>publicWidget creation.</commentary> </example> <example> Context: User asks about Owl components user: "How do I create an Owl component in Odoo 18?" assistant: "I will show the Owl v2 pattern with static template and props." <commentary>Owl component pattern.</commentary> </example> <example> Context: User needs help with translations user: "How do I translate JavaScript strings in Odoo?" assistant: "Use _t() at DEFINITION TIME for static labels, not runtime wrappers." <commentary>Translation best practices.</commentary> </example> <example> Context: User migrating Bootstrap classes user: "Convert Bootstrap 4 classes to Bootstrap 5 for Odoo 17" assistant: "Replace ml-* with ms-*, mr-* with me-*, text-left with text-start." <commentary>Bootstrap migration.</commentary> </example>
Thiết lập Lenis (physics-based smooth scroll) cho TOÀN TRANG + đồng bộ đúng cách với GSAP ScrollTrigger (raf loop dùng chung driver, không lệch pha, không giật khi quay lại tab). Gọi khi user nói "lenis", "smooth scroll", "cuộn mượt kiểu apple", "physics-based scroll", hoặc /lenis-smooth-scroll. KHÁC `skills/gsap-scrolltrigger-pin` (đó là pin + cuộn ngang cho MỘT section cụ thể — dùng CHUNG được với skill này, pin không thay được nền smooth-scroll) và KHÁC `skills/scroll-effects` (vanilla, không dependency; skill này CÓ dependency Lenis + GSAP, là nền smooth-scroll cho cả trang chứ không phải hiệu ứng lẻ).
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
Write and structure content for diverse reading abilities and cognitive styles. Use when writing long-form content, help documentation, product descriptions, policies, terms, or any content that needs to be understood by a wide audience. Triggers on: readability, reading level, too long, too dense, wall of text, hard to read, simplify content, content accessibility, scannable, skimmable.
Guide for choosing and creating scientific visualizations for publications and talks. Covers chart-type selection by data structure, color theory for accessibility/print, figure composition, journal formatting (Nature, Cell, ACS), and common pitfalls. Consult when visualizing data or preparing submission figures.
Objectively evaluate a UI/web design against the pols.dev anti-slop design law: detect catalogued slop tells with cited evidence, score 8 weighted axes (color, type, components, layout, motion, execution, signature, cohesion), and emit a Slop Report with a 0–100 Slop Index and grade. Use when the user asks to "evaluate design slop", "slop report", "is this design AI slop", "audit this landing page design", "de-slop review", or wants an objective score of how generic/machine-made a design looks. To fix text (not design), use human-ai or humanizar skills instead.
Guide for implementing Syncfusion Windows Forms AI AssistView (SfAIAssistView) for building conversational AI interfaces in desktop applications. Use this when creating chat interfaces, AI assistants, or chatbots with Windows Forms. Supports OpenAI and Azure OpenAI integration, typing indicators, chat suggestions, message bubbles, and custom views for interactive messaging experiences.
Guide for implementing Syncfusion WinForms BannerTextProvider (watermark text provider) control. Use this when working with watermark text, placeholder text, or hint text in editor controls. Covers setup, text modes (FocusMode/EditMode), color/font customization, and supported control types in Windows Forms applications.
Guide to implement and customize the Syncfusion WinForms CheckBoxAdv control. Use this when working with advanced checkbox controls featuring three states, gradient backgrounds, custom borders, shadow text, or flexible alignment in Windows Forms applications.
Guide to implement and customize the Syncfusion WinForms ColorPickerUIAdv control. Use this when implementing color-selection interfaces with organized palettes (Recent, Standard, Theme), custom color groups, Office-style layouts, a 'More Colors' dialog, or runtime color additions in Windows Forms applications.
Implement and customize the Syncfusion Windows Forms ColorPickerButton control for color selection. Trigger when user needs a color picker dropdown, color selection UI, color input control, or needs to let users select from color groups (standard, system, custom, user colors). Covers getting started, color selection, customization, and UI appearance properties.
Guide for implementing Syncfusion TabControlAdv in Windows Forms applications. Use when creating tabbed interfaces, organizing content in tabs, or building professional tab navigation systems. Covers tab pages, tab styling, close buttons, drag-drop tabs, tab customization, and appearance options for TabControlAdv-based applications.
Implement and configure Syncfusion TextBoxExt control in Windows Forms - an enhanced textbox with custom borders, themes, and advanced text features. Use when you need styled textboxes with Office themes, custom border colors, multiline text with overflow indicators, character casing, text alignment, or RTL support. Covers theme integration, border customization, multiline configuration, and replacing standard TextBox controls with styled alternatives.
Expert guidance for writing production-grade Tailwind CSS v4 code with design system thinking. Use this skill when users mention Tailwind CSS, CSS styling, design systems, theme configuration, design tokens, OKLCH colors, component styling, or migrating from Tailwind v3 to v4. Also trigger when writing or reviewing any CSS in a Tailwind project, even if "Tailwind" isn't explicitly mentioned. Covers @theme configuration, semantic utilities, and modern CSS patterns.
Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.
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.