"A guide to interface components in UI design" matching MCP tools:

• get_design_guidelinesA

  Marmo UI MCPA

  MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.

  ConnectorNo auth

• get_design_guidelinesA

  marmo-uiA

  MANDATORY FIRST CALL before writing any @marmoui/ui code in this session. Returns a step-by-step generation checklist (which tools to call, in what order), critical rules (no namespace sub-components, PageSection is self-closing, no Sidebar export), component patterns, and ICON LIBRARY RULES. Pass iconLibrary (default "phosphor"; also "material" | "lucide" | "tabler" | "heroicons" | "feather") to get that library's import source, icon name map, and weight/style mapping — and pass the SAME value to review_generated_code so it enforces it. Ask the user which icon library they want before writing UI code. Call topic="patterns" to get the generation checklist specifically.

  ConnectorNo auth

• scaffold_providerA

  UploadkitA

  Return a ready-to-paste snippet that wraps the Next.js root layout with `<UploadKitProvider>` so React components can talk to the upload route handler. When to use: right after scaffold_route_handler, to complete the wiring. The snippet goes in `app/layout.tsx`. Without the provider, UploadKit React components throw at runtime. Returns: a plain-text string containing a short explanatory note followed by a fenced tsx code block. Takes no parameters — the endpoint path is always `/api/uploadkit` since that is what scaffold_route_handler produces. Read-only, deterministic, idempotent.

  ConnectorNo auth

• search_docsA

  RoxyAPI Docs MCP Server (keyless, for coding agents)A

  Search the RoxyAPI knowledge base and get back ranked documentation snippets, each with a source URL. It covers API endpoints with their request and response fields, SDK usage for TypeScript, Python, PHP, C#, and the WordPress plugin, authentication and API keys, UI components, and step by step integration guides. Call this first whenever you need to integrate RoxyAPI into an app: to find which endpoint or SDK method to use, what parameters a call takes, how to authenticate, or how to wire a feature end to end. Pass the user question verbatim as `query`. If the first results miss, rephrase once and retry.

  ConnectorNo auth

• read_docsA

  clipkitA

  Return a canonical Clipkit doc as text. topic "card" = the ~8KB compact authoring card — the recommended context for authoring; "pattern-data-viz" / "pattern-cinematic-ui" / "pattern-ui-screencast" = ~4-5KB archetype pattern cards (proven idioms: count-ups and bar rows; product hero shots with camera rigs; faked app UI with typing/cursor/clicks) — load ONE alongside the card when the brief matches its archetype; "agents" = the full authoring guide (fetch only when the card doesn't cover a need); "protocol" = the formal field spec; "brand" = brand reference. (Same docs offered as MCP resources, exposed as a tool so you can read them directly — resources are not always model-readable.)

  ConnectorNo auth

• build_get_examplesA

  SuperoB

  Fetch a COMPLETE, production-quality reference app (schemas.py + config.py + setup.py + ui/app.js) to copy patterns from — the single biggest lever for app quality. archetype='index' (default) lists the available archetypes with per-file byte sizes; pick the one closest to your app ('commerce-marketplace' | 'service-booking' | 'ops-dashboard' | 'multitenant-portal' | 'saas-billing') and fetch it BEFORE authoring your UI. These are real 'stunning' apps; mirror how they compose the SDK components, art-direct the landing page, and structure schemas. Optional file= to fetch just one file ('schemas.py' | 'config.py' | 'setup.py' | 'ui/app.js'). Responses are PAGED (~32KB/section): when the header says more:true, fetch the next section with offset=<next_offset> — never re-fetch from 0.

  ConnectorNo auth

• create_appA

  CharmingA

  Create a new interactive web app and render it inline. Use this to build a new app from a request. Existing-contract apps return after publication. Eligible authors can select the ESM manifest schema with an idempotency_key to accept a background build; that result contains a buildId to poll with get_app_build, and has no app URL before publication. If `module` reuses a `manifest.id` the caller already owns, the new app replaces the existing app module, UI, and styles in place; use update_app to edit a known app ID by UUID. Apps persist state through a backend `env.storage` (Workers KV) binding and call backend operations from the frontend via `window.charming.api`. The `module`, `ui`, and `description` parameter docs carry the authoring rules — including the fill-viewport outer-container rule on `ui`; the charming:app-guide prompt has the full guide and a canonical example. Read the public docs without a browser using read_docs({ path: "build-mcp.md" }); read_docs({}) lists available pages. If a request needs in-app AI calls, external integrations, native apps, scheduled jobs, SQL, notifications, or view-only sharing, do not fake support. Build the closest local-state version, then log the gap with `submit_feedback`. The charming:app-guide prompt has alternatives. The charming:design-guide prompt documents Charming's default visual style for generated `ui` (single accent, warm neutrals, real type hierarchy; no gradients or decorative emoji) — a default that yields to any user-requested aesthetic. When telling the user where to open or share the app, always give them `shareUrl` from the result — never the `url` field, which is machine-only and embeds a write-capable access token.

  Connector

  Destructive

  OAuth

• contrast_checkA

  rnv-color-mcpA

  WCAG contrast ratio between a foreground and background color, for accessibility. Both accept a hex, CSS name, RNV brand name, or saved-palette reference. Returns the ratio (1.0-21.0) plus pass/fail for AA and AAA at normal and large text sizes and for UI components. Read-only and deterministic, with no side effects. Use this for legibility and accessibility checks; to measure raw perceptual difference between two colors rather than readability use color_difference instead.

  ConnectorNo auth

• contrast_checkA

  rnv-color-mcpA

  WCAG contrast ratio between a foreground and background color, for accessibility. Both accept a hex, CSS name, RNV brand name, or saved-palette reference. Returns the ratio (1.0-21.0) plus pass/fail for AA and AAA at normal and large text sizes and for UI components. Read-only and deterministic, with no side effects. Use this for legibility and accessibility checks; to measure raw perceptual difference between two colors rather than readability use color_difference instead.

  ConnectorNo auth

• read_schematicA

  boardrepoA

  Use when the user asks how a public board is wired, what a component (e.g. U1) connects to, or which pins are on a net (e.g. GND), in that design. Returns the board's latest geometry-free connectivity. No focus returns a bounded overview (components + a net index); ref returns one component and the nets it connects to with the other pins on those nets; net returns the pins on that net. These are in-design connections, not an authoritative manufacturer pinout, and a very large design may be truncated (the response flags this). Prefer a focused ref or net over repeated overviews. Use get_bom for purchasing and read_file for raw source. If nets are still computing, continue with the components shown and try again shortly rather than inferring connectivity.

  ConnectorOAuth

• read_store_guideA

  SCVD General StoreA

  The store's front door as text: the full menu with prices, how x402 payment works here, the free shelf, and the house promises. Free. Completes when the guide text returns. NOT a purchase or payment endpoint — to buy, call a buy_* tool with x402 payment in _meta['x402/payment']; this only returns the guide. A store errand, for you the visiting agent — nothing here needs a human's decision.

  ConnectorNo auth

• get-design-contentA

  CanvaA

  Get the text content of a doc, presentation, whiteboard, social media post, and other designs in Canva (except sheets, as it does not return data in sheets). Use this when you only need to read text content without making changes. IMPORTANT: If the user wants to edit, update, change, translate, or fix content, use `start-editing-transaction` instead as it shows content AND enables editing. You must provide the design ID, which you can find with the `search-designs` tool. You may also pass a full Canva design share URL directly (do not pre-extract just the ID) — any collaboration token embedded in the URL is needed to access a design shared via link and will be parsed and forwarded automatically. Do not use web search to get the content of a design as the content is not accessible to the public. Example URL: https://www.canva.com/design/{design_id}.

  ConnectorOAuth

• designesy_skill_mdA

  DesignesyA

  Get the Designesy SKILL.md — the agent-skill-format export of the design-system contract, written as behavioral rules an AI coding agent can drop into .agents/skills/ or a system prompt. Use this when you want the contract in a form that steers how an agent *builds* UI (tokens, anti-patterns, behavioral rules, verification). When NOT to use: for the raw contract JSON, use designesy_contract; for scoring, use designesy_score. Read-only — no side effects. Returns markdown text (SKILL.md format) — drop into .agents/skills/ or paste into a system prompt. No parameters.

  ConnectorNo auth

• lemonvite_generate_designA

  LemonviteA

  Use this when the user wants Lemonvite's design engine to create the invitation artwork — because this assistant cannot produce images itself, or because the user asked for a Lemonvite design. Describe the look in design_brief (theme, colours, mood, motifs); the event date, time and venue are lettered onto the design automatically unless include_event_details is false. A reference_image from the conversation guides the engine's style. Each call spends one of the host's design generations (new accounts start with 5; every purchased publish credit adds 5) and REPLACES the current artwork (the previous design stays in the event's design history on the website), so confirm with the user before calling it. If this assistant already made an image in the conversation, attach it with invitation_image on lemonvite_update_invitation instead. Never call it merely because designs or themes are being discussed.

  Connector

  Destructive

  OAuth

• lemonvite_edit_designA

  LemonviteA

  Use this when the user wants a change to the invitation's CURRENT artwork rather than a new design — "make the sky a sunset", "change the balloons to gold", "remove the banner at the bottom". Lemonvite's design engine applies the request to the existing artwork and leaves everything else as it is. Put the user's request in edit_request in their own words; do not rewrite it into a design brief. Each call spends one of the host's design generations (same as lemonvite_generate_design) and REPLACES the current artwork (the previous version stays in the event's design history on the website), so confirm with the user before calling it. The invitation must already have artwork that is not a GIF and has no text or image layers added in the web editor (those are edited on the website); to create artwork from scratch use lemonvite_generate_design, and to attach an image this assistant made use invitation_image on lemonvite_update_invitation.

  Connector

  Destructive

  OAuth

• get_knowledge_versionA

  Marmo UI MCPA

  Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.

  ConnectorNo auth

• get_knowledge_versionA

  marmo-uiA

  Returns the MCP knowledge version: gitSha, indexedAt, componentCount, patternCount, uptimeSeconds. Call this ONCE per session before generating UI code so you know how fresh the design-system data is. Cheap to call. If gitSha is "unknown" or indexedAt is far in the past, surface that to the user before relying on the data.

  ConnectorNo auth

• get_resort_infoA

  SnowSure — Snow & SkiA

  INTERACTIVE RESORT GUIDE CARD (Resort Info sidebar UI) — elevation, vertical, lifts, runs, skiable acres, average snowfall, season dates, ski passes, editorial description, hero/gallery carousel. REQUIRED when the user asks for: resort guide, mountain profile, resort info, lifts/runs/vertical/skiable area, season dates, ski passes, or "tell me about the mountain" (non-weather). Answers single-resort stat questions: base/summit elevation, vertical drop, skiable area, average annual snowfall. Examples: "Aspen Mountain resort guide", "how many lifts at Jackson Hole", "what is the base elevation at Arapahoe Basin". For X-vs-Y stat questions use compare_resorts. Do NOT use get_resort (that shows the snow conditions card).

  ConnectorNo auth

• designesy_contractA

  DesignesyA

  Get the Designesy design-system contract — the canonical tokens, motion, acoustic, takt, cadence, typography, components, and verification rules that define what the Designesy org considers legitimate design. Use this when you need the actual contract values (token names and values, motion timings, accessibility rules) to author, check, or bind a design. When NOT to use: for a pass/fail score of a live site, use designesy_score; for an agent-skill-format export, use designesy_skill_md. Read-only — cached ~24h server-side. Returns the full contract JSON, or a single section when "section" is provided. Pass section to get one slice (e.g. "motion" for just the motion tokens) instead of the full contract — saves tokens when you only need one dimension.

  ConnectorNo auth

• dont_make_me_thinkA

  CSS SOTAA

  UI/UX guidelines and a review of a page against them. mode="guidelines" returns the principles — Nielsen's 10 heuristics, Hick's and Fitts's laws, WCAG 2.2, neurodiversity-inclusive design, motion and microinteractions (including when Lottie or Rive are worth their bundle cost), SVG craft and animation, light-first theming, lightness and responsiveness — optionally filtered by topic. Read them BEFORE designing or building UI. mode="review" statically reviews supplied HTML and CSS, or a URL, and reports what violates which principle. The review reads source and does not render it, so it cannot measure computed contrast, real target sizes, or where focus lands — it catches what is visible in the markup, which is most of what actually goes wrong.

  ConnectorNo auth

• remove_elementsA

  CluesoA

  Remove many elements across one or more clips in a single tool call. One entry per element ({clip_index, element_id}). Concurrency: parallel-safe (conflict domain: the individual element) — same as add_elements/update_elements. Each removal is a granular element_remove patch merged under a per-guide lock, and the whole batch lands in ONE save. Fan out across subagents freely; two edits to the SAME element id serialize. Do NOT run concurrently with whole-clip/whole-project mutations on the same guide (update_clips on that clip, structural clip ops, add_audio, update_project). To remove an audio track (not an element), use remove_from_project(target='audio').

  Connector

  Destructive

  No auth