Skip to main content
ZICQ

Skills ZICQ category:Agent Workflows mcp-apps-builder

Mcp Apps Builder

Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features.

28859 installs

Official URL:skills.sh

What this skill does

Intro in this page language first. The official description stays in its original wording; we do not rewrite SKILL.md.

What it does

Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features.

When to use it

The official description does not include a separate “Use when”. Per the spec, agents activate this skill when the task matches keywords in that description.

How agents load it

Per Agent Skills progressive disclosure: name and description load at startup (~100 tokens); the full SKILL.md body loads when the skill activates; scripts/, references/, and assets/ load only as needed. This file's sections: Build with mcp-use; Workflow; Core invariants; Guardrails. It includes spec-recommended sections: step-by-step instructions.

File analysis

File analysis: besides SKILL.md, the body references references/server.md, references/views.md, references/auth.md, references/skills-over-mcp.md, references/advanced-features.md, references/migration.md. Those resources load on demand.

Build with mcp-useWorkflowCore invariantsGuardrails

Source category:skills.sh agent-skill

SKILL.md & Agent activation

Official spec ↗
name
mcp-apps-builder
description
Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features.
  1. DiscoverThe client exposes names and descriptions to the agent.
  2. ActivateYour request or the task context selects the skill and loads its instructions.
  3. Load resourcesReferenced scripts, documentation and assets are used when needed.
Files referenced by the instructions · 7
  • references/server.md
  • references/views.md
  • references/auth.md
  • references/skills-over-mcp.md
  • references/advanced-features.md
  • references/migration.md
  • references/verification.md

These paths are extracted from the text. Check the upstream package to verify the files exist.

Invocation syntax and available tools depend on your Agent client. Client integration guide ↗

Install this skill

Skills CLI ↗

Choose the target agent and installation scope, keep referenced package files, then verify the skill appears in the client's catalog.

This skill references supporting files. Retrieve the complete directory from the source; copying SKILL.md alone may leave missing dependencies.

Ask your Agent to install

Copy these instructions to a compatible agent and confirm the target directory matches your client.

Install the agent skill "mcp-apps-builder" into my project. The full SKILL.md and official description are at https://zicq.com/en/skills/skl-767a0eb72483cfbb-Mcp-Apps-Builder.html
Save it as .cursor/skills/mcp-apps-builder/SKILL.md or .claude/skills/mcp-apps-builder/SKILL.md and keep the frontmatter name and description exactly as-is.
This skill also ships scripts/, references/, or assets/ — fetch the whole folder from https://github.com/mcp-use/mcp-use instead of creating only a SKILL.md.

Full package on GitHub ↗

Install from the terminal · Skills CLI

Requires Node.js and npx. First inspect the repository's skill list to confirm the name.

npx skills add 'https://github.com/mcp-use/mcp-use' --list

npx skills add 'https://github.com/mcp-use/mcp-use' --skill 'mcp-apps-builder'

The CLI lets you choose the agent interactively. The default scope is the project; use -g for user scope. Confirm package availability with the discovery command, then use npx skills list to inspect installed skills.

Readable layout
--- name: mcp-apps-builder description: Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features. --- # Build with mcp-use Treat the installed `mcp-use` package, its exported types, generated declarations, and the project's existing code as the source of truth. Inspect the installed version before choosing APIs or changing code. ## Workflow 1. Inspect `package.json`, the server entry, exported tool refs, `mcp-env.d.ts`, `views/`, `skills/`, and the installed `mcp-use` version. 2. Scaffold a new stable project with `create-mcp-use-app@latest` and the appropriate template. Match the package version or dist-tag when working on beta, canary, or an existing versioned project. 3. Read only the references needed for the task: - [Server](references/server.md) for tools, resources, prompts, MCP middleware, request context, and result envelopes. - [Views](references/views.md) for interactive MCP Apps, React hooks, model context, host capabilities, assets, and CSP. - [Authentication](references/auth.md) for OAuth providers, verified identity, scopes, permissions, and authorization. - [Skills over MCP](references/skills-over-mcp.md) when a server should ship reusable workflows alongside its tools. - [Advanced features](references/advanced-features.md) for OpenAPI, proxying, notifications, subscriptions, and elicitation. - [Migration](references/migration.md) only when retired or compatibility-only imports, helpers, registration shapes, UI patterns, or session assumptions are present. - [Verification](references/verification.md) before reporting implementation work complete. 4. Implement against installed types. Prefer the framework's current conventions over copied examples or historical changelogs. 5. Validate the smallest real lifecycle that proves the changed behavior, then expand checks in proportion to risk. ## Core invariants - Import server APIs from `mcp-use`, React APIs from `mcp-use/react`, and OAuth provider adapters from their `mcp-use/oauth/*` subpaths. - Define tool arguments with `inputSchema`. Add `outputSchema` for structured results and every View-bound tool. - Return raw MCP result envelopes. A successful schema-backed tool must include matching `structuredContent`; an expected failure may return `isError: true` with model-readable `content`. - Put each View at `views//view.tsx` and bind it with `view: { name: "" }`. - Export every statically declared tool ref consumed by a View. Default-export the server entry used by `mcp-use dev`, `build`, and `start`. - Keep identity and mutable workflow state request-scoped or in an external store. Treat client-reported metadata as unverified. - Consider Skills over MCP when a server exposes a repeatable, multi-step workflow that would otherwise inflate tool descriptions. ## Guardrails - Do not invent exports, configuration fields, or callback shapes. Confirm uncertain details in installed declarations or source. - Do not preserve APIs that are absent from the installed version merely because they appear in an existing project. - Do not return a plain domain object from a tool callback. - Do not bind a View without a matching `outputSchema` and `structuredContent` result. - Do not use module globals for cross-request identity, elicitation continuity, or durable business state. - Do not claim success from a source build alone when types, package exports, authentication, or interactive behavior changed. - Do not deploy or mutate external systems unless the user explicitly requests it.

Related skills

Agent Workflows

Skill Creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that exte…

Agent Workflows

Clawdhub

Use the ClawdHub CLI to search, install, update, and publish agent skills from clawdhub.com. Use when you need to fetch new skills on the fl…

Agent Workflows

Agent Team Orchestration

Orchestrate multi-agent teams with defined roles, task lifecycles, handoff protocols, and review workflows. Use when: (1) Setting up a team …

Agent Workflows

Superpowers

Spec-first, TDD, subagent-driven software development workflow. Use when: (1) building any new feature or app — triggers brainstorm → plan →…