mcp-apps-builder
Build MCP Apps — the interactive HTML UI primitive introduced in the 2026-07-28 MCP specification. Scaffolds UI templates, wires the JSON-RPC back-channel, declares tool manifests, and validates against the conformance suite. Use when adding visual interfaces (forms, data previews, approval flows) to an existing MCP server.
v1.0.0New
Unsigned, install at your own risk
UnverifiedThis skill has no cryptographic signature attached. We can't verify the contents match what the publisher intended.
Install this skill
Run this command in your terminal. No account required — it auto-detects your AI tool and installs the skill file.
npx @skills-hub-ai/cli install mcp-apps-builderOr download directly:
Browse all CLI commands →Setup by platform
Install
One-click setup for your editorRun in your project root
npx @skills-hub-ai/cli install mcp-apps-builder --target claude-codeInstructions
Security
Loading security scan...
Reviews (0)
Related skills
Browse all →skill-writerLearn to build and publish your own AI agent skills -- from idea to published on skills-hub.ai6 installsskillifyCreate a reusable, self-healing, self-evolving global skill — either from the current conversation context OR from a plain-language description of a workflow. Triggers on: 'turn this into a skill', 'make a skill from this', 'skillify this', 'capture this as a skill', 'save this workflow as a skill', 'create a skill for this', 'make this repeatable', 'skill this up', 'build me a skill that does X', 'I want a skill for Y', or any time a workflow just played out and the user wants to preserve it. Invoke even if the user only hints at wanting to reuse what just happened.6 installsskill-creatorCreate new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.6 installsapi-reviewReview API design against REST best practices and internal consistency. Audits naming conventions, HTTP method semantics, status code correctness, pagination and filtering patterns, error response format, versioning strategy, rate limiting, idempotency keys, HATEOAS links, and content negotiation. Works with Express, Fastify, Hono, Flask, Django REST, Spring, Rails, Gin, and any HTTP API framework. Use when you need to review an API, audit REST endpoints, check API consistency, fix HTTP status codes, add pagination, or prepare an API for public release.6 installsweb-gameScaffolds a browser-based game with Phaser 3, PixiJS, or Three.js including game loop, asset pipeline, responsive canvas, input handling, audio, save/load, and deployment to itch.io or web. Triggers on: "web game", "browser game", "html5 game", "phaser game", "pixi game", "three.js game", "javascript game", "typescript game", "make a game for the browser", "build a web game", "2d browser game", "3d web game", "itch.io game", "canvas game", "webgl game".6 installsdesign-claudeHTML-first hi-fi design skill: interactive prototypes, slide decks, animation demos, design variant exploration, visual direction advising, and expert critique. Triggers: make a prototype, design demo, interactive prototype, HTML presentation, animation demo, design variants, hi-fi design, UI mockup, prototype, design exploration, make an HTML page, make a visualization, app prototype, iOS prototype, mobile app mockup, export MP4, export GIF, 60fps video, design style, design direction, design philosophy, color scheme, visual style, recommend style, pick a style, make it look good, review, does this look good, review this design. Core capabilities: Junior Designer workflow (show assumptions+reasoning+placeholders first, then iterate), anti-AI-slop checklist, React+Babel best practices, Tweaks variant switching, Speaker Notes presentation, Starter Components (slide shell/variant canvas/animation engine/device frames), App prototype rules (default real images from Wikimedia/Met/Unsplash,6 installs
More from Skills Hub
View source →unit-testGenerate comprehensive unit tests with edge cases, error paths, and boundary values. Auto-detects test framework (Vitest, Jest, pytest, go test, flutter_test, RSpec, cargo test, JUnit), scans for untested functions by priority, adopts existing test conventions, generates tests with proper mocks, runs them, and self-heals failures in up to 3 iterations. Measures coverage before and after. Use when you need to add unit tests, increase code coverage, test edge cases, or verify error handling paths.18 installsdesign-to-codeTurn a design into production-quality frontend code: extract a design system with tokens and components, make layouts responsive across breakpoints, add dark mode with WCAG-compliant theming, then run a UX audit to validate everything. Use when implementing UI from Figma, adding theming, making an app responsive, or overhauling frontend design consistency.16 installssecurity-reviewSecurity audit and vulnerability assessment for any codebase. Scans for authentication bypasses, missing auth middleware, broken JWT validation (algorithm confusion, weak secrets, missing expiry), OAuth state and PKCE flaws, IDOR and horizontal privilege escalation, vertical privilege escalation via role manipulation, SQL injection, NoSQL injection, XSS (stored, reflected, DOM), command injection, path traversal, SSRF, CSRF, hardcoded secrets and API keys (sk_live_, AKIA, ghp_), .env and credential file exposure, PII leaking in logs and error responses, overfetching sensitive fields, CORS misconfiguration, session fixation, missing secure/httpOnly/sameSite cookie flags, and Firebase/Firestore rule weaknesses. Produces a severity-ranked findings report with exploit scenarios and fix recommendations. Covers OWASP Top 10.15 installspreflightPre-deploy verification gate. Checks git status, build, tests, migrations, secrets, and commit conventions. Reports READY or NOT READY. Read-only, no changes. Trigger words: preflight, pre-deploy check, ready to deploy, deployment checklist.11 installscleanup-sprintDeep codebase cleanup — kills dead code, fixes all lint/format warnings, removes orphaned files, cleans stale TODOs, strips security hazards, tightens TypeScript strict mode, and organizes imports. Triggers on: clean up, dead code, unused imports, lint, technical debt cleanup, spring cleaning, tidy up the codebase, remove dead code, code hygiene, declutter.8 installsrecallReconstructs the development cycle from git history, distills sequential/parallel patterns, and produces actionable insights for improving future iterations. Triggers: recall, retrospective, development analysis, what happened, dev cycle analysis.7 installs
More Integration skills
Browse category →perplexity-searchAI-powered web search and research using the Perplexity API (Sonar models). Performs deep web research with citations, fact-checking, competitive analysis, market research, and technical documentation lookup. Supports streaming responses, search domain filtering, and recency filtering.3 installsgemini-cli-migrationMigrate Gemini CLI workflows to a new AI coding tool (Claude Code, Antigravity CLI, or Codex CLI). Scans shell config, scripts, and CI pipelines for gemini calls, maps each to an equivalent command in the target tool, rewrites config files, and validates the migration. Use when Gemini CLI free-tier access ends June 18 2026 or when switching AI coding CLIs.1 installsstitch-exploreGenerate design alternatives in Google Stitch with constraints. Tell Stitch what to improve about your UI and get back multiple variations — vibe-based, targeted, or constraint-locked. Use when: 'stitch explore', 'stitch redesign', 'stitch alternatives', 'improve design with stitch', 'stitch variations', 'make it look better with stitch'.1 installsauth-providerSet up complete OAuth/SSO authentication with Google, GitHub, Apple, or SAML providers. Auto-detects your framework and configures the best auth library (NextAuth, Passport, Firebase Auth, Supabase, Clerk, Lucia, django-allauth). Includes session management, JWT token refresh, login/logout UI components, route protection middleware, and database schema updates. Use when you need OAuth login, social sign-in, SSO integration, authentication setup, login page, or user authentication.1 installsstitch-compareSide-by-side comparison of your current design against Stitch variations. Cherry-pick improvements at section-level and token-level, then delegates code changes to existing design skills. Use when: 'stitch compare', 'compare stitch designs', 'pick stitch design', 'adopt stitch changes', 'stitch diff', 'review stitch variations'.1 installsstitch-bridgeBidirectional sync between your codebase and Google Stitch. Pushes current design state (tokens, components, screenshots) to Stitch and pulls generated designs back into a platform-agnostic staging directory. Use when: 'sync to stitch', 'push to stitch', 'pull from stitch', 'stitch sync', 'connect stitch', 'stitch bridge'.1 installs
Frequently asked questions about mcp-apps-builder
What does the mcp-apps-builder skill do?
Build MCP Apps — the interactive HTML UI primitive introduced in the 2026-07-28 MCP specification. Scaffolds UI templates, wires the JSON-RPC back-channel, declares tool manifests, and validates against the conformance suite. Use when adding visual interfaces (forms, data previews, approval flows) to an existing MCP server. It's a reusable SKILL.md instruction set that loads into your AI coding assistant on demand, no prompt engineering, no copy-pasting every session.
How do I install the mcp-apps-builder skill?
Run `npx @skills-hub-ai/cli install mcp-apps-builder` from your terminal. The CLI writes the SKILL.md to the correct location for your AI tool (e.g. ~/.claude/skills/mcp-apps-builder/ for Claude Code or ~/.cursor/skills/ for Cursor with --target cursor) and adds it to your project's .skills.json lockfile.
Which AI tools does mcp-apps-builder work with?
mcp-apps-builder runs in Claude Code. It follows the open Agent Skills standard (SKILL.md), so the same skill works in every supported tool without modification.
Is the mcp-apps-builder skill free?
Yes. Every skill on skills-hub.ai is free and open-source. There are no premium tiers, paywalls, or usage limits. You only pay for whatever AI assistant you're already using.
How do I use mcp-apps-builder after installing it?
In Claude Code, type `/mcp-apps-builder` (or whatever slash command the skill registers) and the AI follows the skill's instructions immediately. You can also reference it by name in natural language, your AI loads the skill into context when relevant.
Can I share the mcp-apps-builder skill with my team?
Yes. Commit your project's .skills.json lockfile and teammates run `npx @skills-hub-ai/cli install` (no args) to install every skill at the exact version you pinned. Organization-scoped installs work via skills-hub.ai organizations.