"Resources for Frontend and UI Design" matching MCP tools:

• 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

• explain_transactionA

  cleartraceA

  Classify a single transaction against the attribution engine: which frontend or router originated the trade and by which evidence, the pools it touched, any fee recipients, and whether it was sandwiched. Confidence is per-vector and is reported per result -- a calldata suffix is strong evidence a specific frontend tagged the swap, while a fee recipient is indirect evidence and is never rated high. Pass that qualification through instead of stating the frontend flatly. `estimated_volume_usd` (only with price=true) is a best-effort spot price on the dominant leg. It is an approximation for orientation and must never be quoted as a settlement figure. Fee amounts are exact raw token integers with no decimals or pricing applied. deep=true costs more upstream credits; leave it off unless a shallow classification came back unattributed.

  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

• evaluate_accessibilityA

  Axcess — Design Accessibility EvaluationA

  Evaluates UI elements for accessibility issues that automated scanners miss. COST: $0.01 USDC via x402 on Base-compatible EVM network per call. Checks beyond what axe/Lighthouse/WAVE catch at the design stage: - Touch targets below 24×24px (WCAG 2.5.8 AA hard fail) - Touch targets below 44×44px (WCAG 2.5.5 AAA recommended) - Information conveyed by color alone without a secondary indicator (WCAG 1.4.1) - Missing focus indicators on interactive elements (WCAG 2.4.7) - Focus rings thinner than 2px (WCAG 2.4.11) - Focus ring contrast below 3:1 against adjacent background (WCAG 2.4.11) - Interactive elements below the practical usability height floor Args: - elements: Array of 1–50 UI element objects - screen_name: Optional label for the evaluation report Each element requires: element_type. Provide width_px/height_px for touch target checks. Provide uses_color_only + secondary indicator flags for 1.4.1 checks. Provide is_interactive + focus_visible + focus indicator properties for focus checks. Returns: Structured report with: - Per-element scores (0–100) and specific issues - Severity levels (critical/major/minor) with WCAG references - What automated tools miss and why - Concrete fix recommendations - Overall score and verdict (pass/needs_work/fail) - Top issues sorted by severity

  ConnectorNo auth

• migrate_to_propelauth_frontendA

  PropelAuth Integration MCP ServerA

  Returns instructions for migrating to PropelAuth in a frontend framework such as React, JavaScript, TypeScript, or when using Next.js for just the frontend (e.g. client-side rendered). Guidance includes migrating from several auth providers, such as Clerk or Auth0. Each guidance will include documentation from the auth provider and PropelAuth. It is important to follow the instructions carefully to ensure a successful integration. Make sure to use the 'Installation' guidance first. It is important to call every guidance to ensure a successful integration. Do not update a component/hook/etc from the auth provider until you receive guidance about that component/hook/etc. CRITICAL: If the current implementation uses a traditional OAuth/OIDC flow (e.g., via express-openid-connect, passport-auth0, or similar backend-managed session libraries), you MUST select 'OAuth' as the framework, regardless of the frontend library (React/Vue/etc.). Only select 'React' or 'Javascript' if the current implementation uses a frontend-only SDK (like @auth0/auth0-react) or if using fullstack Next.js.

  ConnectorNo auth

• 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

• 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

• ui_statesA

  Colour MemoryA

  Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.

  ConnectorNo auth

• deploy_groupA

  DockholdA

  Deploy several connected services in one go (e.g. a frontend + an API). Call this when the user's project is split across multiple repos that must talk to each other; for a single repo use deploy_app. Each service is a public GitHub repo that gets its own URL. Wire them by setting an env var to the exact token ${services.<otherServiceName>.url} — Dockhold injects that service's live URL once it deploys. Give the backend its own database with "db":"enable" (DATABASE_URL is injected; a pure frontend doesn't need one). Builds run in parallel; poll get_app_status with each returned app_id.

  ConnectorNo auth

• ui_statesA

  Colour MemoryA

  Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.

  ConnectorNo auth

• ui_statesA

  Colour MemoryA

  Generate a complete WCAG-compliant UI state palette from a brand hex. Returns colours for: brand, hover, active, disabled, focus ring, success, warning, error, info, surface subtle, surface strong. All states computed for contrast against your background colour. Returns hex, contrast ratio, WCAG grade, and usage note for each state. Includes CSS custom properties ready to paste. Supports light and dark mode. Use before building any UI component system.

  ConnectorNo auth

• read_resourceA

  PRIMAMCPA

  Read a resource by its URI. For static resources, provide the exact URI. For templated resources, provide the URI with template parameters filled in. Returns the resource content as a string. Binary content is base64-encoded.

  ConnectorAPI key

• 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

• list_componentsA

  TsehaA

  Lists every UI component in the project's design system, each with its name, source package, import path, and a short note on its intended use. Read-only and unpaginated: it returns the whole catalog across all packages assigned to the project, so expect a large response on big design systems. Use it to see what exists before building UI, and to get the exact component name other tools need. Do not use it to find a component by need - search_components ranks by description - and do not use it for props, examples, or Figma data, which only get_component returns. project_id is not a display filter: it selects the assigned packages, so two projects in one organization legitimately return different catalogs.

  ConnectorNo auth

• read_resourceA

  PRIMAMCPA

  Read a resource by its URI. For static resources, provide the exact URI. For templated resources, provide the URI with template parameters filled in. Returns the resource content as a string. Binary content is base64-encoded.

  ConnectorAPI key

• get-design-pagesA

  CanvaA

  Get a list of pages in a Canva design, such as a presentation. Each page includes its index and thumbnail. This tool doesn't work on designs that don't have pages (e.g. Canva docs). You must provide the design ID, which you can find using tools like `search-designs` or `list-folder-items`. 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. You can use 'offset' and 'limit' to paginate through the pages. Use `get-design` to find out the total number of pages, if needed.

  ConnectorOAuth

• get_fabrication_quoteA

  Agentic Fabrication Network (AFN)A

  Get ranked, purchasable offers (price, ETA, preview image) for fabricating a physical item from a design file. process=fdm_print for 3D printing a model (STL/OBJ/PLY/3MF/AMF/STEP/IGES), process=cnc or process=sheetmetal for machined/bent metal parts (STEP, IGES, DXF), process=decal for stickers/decals from artwork (any common image or design file — PNG/JPG/HEIC/TIFF/GIF/BMP/WEBP/AVIF/SVG/PDF/AI/EPS/PSD/CDR, auto-converted). A .ufp file (UFP part container: the design plus saved spec/constraints in one) is accepted anywhere a design file is — its saved intent applies automatically and anything the user states now wins. If the user just drops a file and asks for a price, omit process — UFP routes it. Provide the design either as design_file (an image/file the user attached or you generated — preferred) or file_url (a public URL). REORDERS: if the user has a UFP part number (from a receipt email or a previous session, looks like UFP-… or part_…), pass it as part_number INSTEAD of any file — the stored design and spec are reused and re-shopped across all current vendors. Locked parts additionally require share_key (from the owner's share link). Returns offers across vendors like Google Flights returns flights.

  ConnectorNo auth

• adcritter_get_design_guideA

  AdCritter for BuildersA

  Returns AdCritter design guidance for an entity at a caller-chosen guidance level - screen experiences, API integration patterns, and design philosophy. The default ('full') returns step-by-step prescription (exact layouts, colors, copy text, column orders). Request 'patterns' for balanced hints including common design patterns with softened vocabulary. Request 'facts' if you have strong visual-design instincts and just want API integration bindings (or call adcritter_get_api_reference and adcritter_get_usage_guide directly and skip this tool). Guidance is format-agnostic - it describes outcomes and integration, never prescribes frameworks or architecture. Available entities: ad, advertiser, audience, authentication, blueprint, campaign, geo, media-asset, plan, report, settings.

  ConnectorNo auth

• designesy_scoreA

  DesignesyA

  Score a live URL against the Designesy design contract — a deterministic 42-check verification engine that returns a numeric score, letter grade (A–F), and per-check breakdown. Use this to audit whether a website or AI-generated UI complies with a real design contract (tokens, motion, accessibility, cadence, takt, typography, copywriting). When NOT to use: for token-file validation only, use designesy_tokens_score; for a Lottie file, use designesy_motion_score; for a qualitative critique, use designesy_design_review. Executable — fetches the URL server-side, extracts CSS, runs 42 checks. Results cached ~24h per URL. Checks needing a live browser (Core Web Vitals, sound toggle, overflow) return MANUAL, not FAIL — run the full audit (/api/score/audit) to resolve them. Checks that are not applicable to the site (no tokens, no buttons, no DESIGN.md) return SKIP (N/A). Returns JSON: { url, score (0–100), grade (A–F), pass_count, fail_count, checks[{id, name, status, weight, category}] }. Pass format="canonical" for review-findings.json schema, "review" for markdown, or "google" for design.md-compatible output.

  ConnectorNo auth