Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use when the user says 'convert this html to bricks' or 'paste html into bricks', or has a Webflow, Framer, CodePen, or old static export to bring into a Bricks site. Converts raw HTML and CSS into native Bricks elements, mapping colors, type, and spacing to design tokens, plus ACSS classes when installed.
Proactively design, improve, or review high-quality Dear ImGui tools, C++ editor panels, game-development interfaces, debugging dashboards, visualization screens, and desktop workflows. Use when Dear ImGui is named or supplied code contains direct evidence such as `ImGui::`, `imgui.h`, `ImGuiContext`, or ImGui backend symbols. For an unlabelled C++ editor/tooling request, use only when the user explicitly asks whether Dear ImGui is suitable; otherwise keep framework choice open. Do not trigger for a task that explicitly names another UI framework such as Qt, GTK, WPF, wxWidgets, JUCE, or Slate. Cover UI architecture, information hierarchy, dockspace layouts, design systems, custom components, UX states, keyboard/gamepad interaction, DPI/fonts, performance, and code quality.
Use when the user says 'save this as a template', 'create a playbook from this page', 'capture this layout', or has hand-built the same page type three times. Captures canonical page patterns as reusable playbooks that later page generation can spawn from in seconds.
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
One-stop pipeline to a production-grade frontend with a MACHINE SENTINEL GATE: interview the theme source in a single message (A default macOS glassmorphism preset · B design-doc folder/file · C paste the target page URL), lock the parameters into a single design.md file (read by both hallmark and impeccable), then generate tokens.css + frontmatter with design-sync.py, build a token-only page per hallmark, run fe-gate.sh (impeccable detect 61 deterministic rules rc 0/1/2 + Playwright 4 viewports) and a rubric audit/harden/polish, and do NOT deliver until the gate is green. Trigger when the user says "frontend production", "production-grade frontend", "dựng FE chuẩn production", "giao diện kỷ luật", "prd-grade-fe", "/prd-grade-fe". Different from hallmark (design foundation, no impeccable gate) and from /br (BR→frame pipeline, does not handle the frontend layer separately).
Comprehensive guide for implementing Syncfusion ASP.NET Core dropdown components including DropDownList, MultiSelect, AutoComplete, Mention, ComboBox, ListBox, and MultiColumn ComboBox. Single and multiple selection control with data binding, filtering, grouping, templates, and accessibility features. Essential for building professional dropdown interfaces with server-side data binding.
Implement tabbed navigation interfaces in ASP.NET Core using Syncfusion Tab component for organizing and switching between content sections. Use this skill when implementing tab-based navigation, multi-panel content organization, wizards, or any scenario requiring organized content sections with header-based selection.
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.
When the user wants to create YouTube thumbnail concepts, design briefs, improve thumbnail CTR, or develop a thumbnail style. Also use when the user says 'design a thumbnail,' 'thumbnail idea,' 'thumbnail concept,' 'improve my thumbnails,' 'thumbnail brief,' 'my thumbnails aren't getting clicks,' 'thumbnail for this video.' For title pairing, see title-craft. For video analysis including CTR, see video-analysis.
Dark pattern detection and avoidance, persuasive vs. manipulative design, privacy UX, the regulatory landscape, sustainable/green UX, and UX writing with a microcopy library of action verbs, error messages, and empty-state copy. Use when writing interface copy or auditing a flow for manipulation.
Design or critique notifications — pick the right type (badge, banner, snackbar, toast, alert, push) for the message's urgency, and respect user attention with timing, frequency, and opt-out controls. Trigger when the user asks to design or review notifications, toasts, snackbars, badges, banners, alerts, push notifications, or a notification strategy.
Design or critique search experiences — search input, auto-suggest, results page, filtering/sorting, and zero-results recovery. Matches search features to how users actually seek (known-item vs. exploratory) and gates levers like rich suggestions, filter layout, and chips. Trigger when the user asks to design or review search, a search bar, autocomplete/auto-suggest, search results, filters, sorting, or a "no results" page.
Provides structured guidance for Vant of Vue 3.0. Use when the user needs Vant with Vue 3, asks about mobile UI components such as Button, Cell, Form, Dialog, Toast, Popup, ConfigProvider, theme customization, project setup, or wants to implement mobile-first interfaces with `vant` or `van-` components. This skill is aligned to the official Vant website and usage guide and should be used as the Vant Vue 3 skill entry.
Design patterns for agentic AI: multi-agent orchestration UX, generative UI, RAG interfaces, LLM hallucination guardrails, confidence indicators, and trust calibration. Use when designing AI copilots or autonomous agents, adding verification affordances, or auditing an AI feature for safety, control, and consent.
Load this skill when writing, reviewing, or interpreting behavioral accessibility automation — tests that manipulate a rendered page (resizing the viewport, pressing real keys, capturing and comparing screenshots) rather than only inspecting static markup or a single computed accessibility tree. Covers Reflow risk (SC 1.4.10) and Focus Visible risk (SC 2.4.7) checks. Absolutely always report indicator results separately from confirmed failures. Under no circumstances treat a clean behavioral scan as WCAG conformance, or collapse `cantTell`/test-error/indicator outcomes into a single pass/fail signal.
Create a complete brand identity for a project — the logo mark (designed with the logo-design skill), colors, fonts, SVG refinement in Inkscape, and a full asset pack (PNGs, favicons, OG images), delivered as a brand guide HTML page. Triggers on branding, brand pack, brand color, project identity, social preview, visual identity.
Creates and registers Tambo components - generative (AI creates on-demand) and interactable (pre-placed, AI updates). Use when defining components, working with TamboComponent, withTamboInteractable, propsSchema, or registering components for AI to render or update.
Use when the user says 'audit my conversion rate', 'cro check', 'find conversion leaks', or asks what is hurting conversion before a paid campaign or after a redesign. Scores six friction dimensions: above-the-fold clarity, CTA hierarchy, form length, social proof, speed, trust signals.
Use when building, editing, or reviewing Vue 3 UI with Flux (by Bas Milius): @flux-ui/components (docs at flux-ui.dev) and its siblings @flux-ui/application (app shell / dashboards) and @flux-ui/statistics (KPIs/charts). Trigger on Flux-prefixed components (FluxPrimaryButton, FluxFormField, FluxPane), on FluxRoot / showConfirm / showSnackbar / showPrompt / showAlert, on its composables (useBreakpoints, useFluxStore, use*Injection), or any import from @flux-ui/*. This is the Vue 3 Flux (basmilius), NOT the Livewire/Blade Flux from fluxui.dev and NOT the Flux web-components library; never mix their syntaxes.
Build the customer-facing Freemius Checkout UI in a React app — the Checkout Provider (overlay context), Subscribe (subscription pricing table), Topup (one-off / credit pricing table), Paywall, and custom checkout buttons. Use when adding a pricing page, an "upgrade"/"buy credits" button, an overlay checkout, or a paywall to a React frontend. Covers the React Starter Kit Checkout components and the frontend Checkout SDK (`@freemius/checkout`), plus the thin checkout-specific backend endpoints the front end depends on (the purchase-sync `POST /api/purchase`, `GET /api/checkout/pricing`, and the hosted-redirect handler); the underlying checkout-creation and entitlement-sync engine still belongs to `freemius-core`.
Build the Freemius Customer Portal in a React app — a self-service surface where a signed-in user manages their subscription (upgrade / change plan), cancels (with a churn-reducing retention coupon), edits billing information, and views payments & downloads invoices. Use when adding an "Account", "Billing", "Manage subscription", or "Invoices" page. Covers the React Starter Kit Customer Portal component and the SDK's headless portal processor (`freemius.customerPortal`); server-side checkout/entitlement sync is `freemius-core`.
Guide for creating distinctive, production-grade frontend interfaces. Covers visual design systems, typography, color, motion, spatial composition, and web interface standards. Use when designing UI, establishing design systems, or reviewing visual quality of frontend code.
Generate high-converting landing pages as production-ready HTML with built-in design themes, copy frameworks (PAS, AIDA, BAB), CTA strategy, SEO meta, and automated conversion/speed audits. Use whenever the user wants a landing page, campaign page, lead capture page, promo page, launch page, or single-page site — or wants an existing landing page reviewed, audited, or improved — even if they don't say "landing page" (e.g. "a page for my product", "somewhere to send ad traffic", "a signup page for the webinar").
Technical guide to integrate mapcn in React + shadcn projects. Use when the user asks to integrate mapcn, add mapcn to a shadcn app, use mapcn MapControls/Markers/Routes/Clusters, implement controlled viewport state, use the useMap hook, or access MapLibre through mapcn.
Interactive MCP visual output via @json-render/mcp: upgrade plain JSON tool responses to dashboards rendered in sandboxed iframes inside MCP clients like Claude, Cursor, and ChatGPT. Use when a tool result would read better as a stat grid, data table, or status badge than as text. For the server itself (transport, auth, tool handlers, security) reach for ork:mcp-patterns.
Generate and edit images using Google Gemini image models. Use this skill when the user asks to create, generate, make, or edit images with AI. Supports text-to-image, image editing, style transfer, and multi-image composition. Trigger on requests like "create an image", "generate a picture", "make me a logo", "edit this photo", "add X to this image".
Plan or critique a product discovery process — figuring out what to build before building it. Establishes which risk you're de-risking and how much certainty the decision needs, applies the always-true core (continuous not phased, outcomes over output, problem before solution, ask about past behavior, match evidence to risk, generate solutions from validated problems, research ethically) and gates the context-dependent decisions (problem vs. solution research, qual vs. quant, lightweight vs. deep, how much certainty before committing). Trigger when asked to plan discovery, "figure out what to build," set up continuous discovery, design a research plan, do customer/user research, find problems worth solving, or de-risk a product direction before committing.
Audit and revamp existing web interfaces into polished, professional, product-specific experiences while preserving behavior and working within the current frontend stack. Use for requests to improve a vibe-coded, generic, template-like, inconsistent, dated, amateur, or visibly AI-generated UI; redesign an existing page, app, dashboard, landing page, or component; establish stronger art direction, hierarchy, typography, spacing, color, responsiveness, accessibility, interaction states, or visual coherence; or perform a premium UI polish pass on HTML, CSS, JavaScript, React, Vue, Svelte, Next.js, and similar frontend codebases.
Prompt patterns for consistent UI generation: stating design intent precisely, component specification formats, few-shot examples, and structured refinement loops. Use when UI output from an LLM is inconsistent or generic, or when building reusable prompt templates for a design system.
Create or redesign appointment-based service websites for salons, barbers, spas, wellness studios, clinics, and hospitality brands. Use for warm editorial layouts, serif-led identity, documentary portrait crops, calm treatment selectors, location-aware booking, and operational states that remain elegant and trustworthy.
Initialize the design system or create new UI components with accessibility, Tailwind/shadcn integration, and documentation. Use when setting up the initial design system, adding component categories, or creating complex UI components that need design review.
Create and edit presentation slide decks (`.pptx`) with PptxGenJS and render/validation utilities. Use when tasks involve building a new PowerPoint deck, recreating slides from screenshots/PDFs/reference decks, modifying slide content while preserving editable output, adding charts/diagrams/visuals, or diagnosing layout issues such as overflow, overlaps, and font substitution.
Display hierarchical navigation paths with the ASP.NET Core Breadcrumb control. Use this skill when implementing breadcrumb navigation, handling item binding, configuring overflow behavior, or customizing templates and icons.
Use when implementing motion design, timeline animations, visual animation editors, animating Three.js/R3F scenes, creating keyframe animations, or using Theatre.js, @theatre/core, @theatre/studio, @theatre/r3f, theatric, or building animation tooling for the web.
Build a complete typographic system -- modular or fluid type scale, line-height and tracking per size, weight roles, and vertical rhythm -- exported as tokens, Tailwind config, and CSS. Pairs with font-pairing-suggester (which picks the fonts; this builds the system they live in).
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.