New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Implementing MCP UI Apps

by PostHog in PostHog/posthog

Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop.

OfficialCustom licenceAuto-check passedAgent Workflows

Install Implementing MCP UI Apps

skills CLI
$ npx skills add PostHog/posthog --skill implementing-mcp-ui-apps -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install PostHog/posthog implementing-mcp-ui-apps --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/PostHog/posthog.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/implementing-mcp-ui-apps .claude/skills/implementing-mcp-ui-apps && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implementing-mcp-ui-apps
GitHub stars
40k
Token cost
~4.3k tokens
SKILL.md length
895 words
Files
1
Skills in repo
252
Repo updated
First seen
Licence
Custom licence

At a glance

Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop.

  • Works in 4 steps: Add it to the relevant Zod schema… → Add it to the matching Resolved*… → Add the default derivation in… → …
  • Adding a new detail
  • SKILL.md covers Quick workflow, When to add a UI app, Architecture and View components, plus 3 more sections
  • Calls pnpm

What it does

Implementing MCP UI Apps is an agent skill from PostHog/posthog, published by the product's own GitHub organization. Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop. Use when adding a new detail or list view for an MCP tool, creating view components in products//mcp/apps/, or linking tools to UI apps via YAML.

Its SKILL.md is about 4.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Agent Workflows, covering MCP servers. It works with Model Context Protocol and PostHog. The repository describes itself as: :hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error…

When your agent uses it

  • Adding a new detail
  • List view for an MCP tool
  • Creating view components in products//mcp/apps/
  • Linking tools to UI apps via YAML

Example prompts

  • “/implementing-mcp-ui-apps”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Add it to the relevant Zod schema (DetailUiAppSchema, ListUiAppSchema, or CustomUiAppSchema)
  2. Add it to the matching Resolved* interface (ResolvedDetailUiApp, ResolvedListUiApp, or ResolvedCustomUiApp)
  3. Add the default derivation in resolveDetailApp(), resolveListApp(), or resolveCustomApp() in generate-ui-apps.ts
  4. Use the resolved value in the entry-point or dispatch generator

What it can do on your machine

Read from SKILL.md and the folder at commit 10f9ad7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implementing MCP UI Apps loads about 4.3k tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 895 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~73
When it runs · the whole SKILL.md, loaded when a task matches
~4.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 895 words (~4,306 tokens).

“MCP UI apps are interactive React visualizations that render alongside tool results in MCP clients (e.g. Claude Desktop). They're built with the Quill component library and served via Cloudflare Workers Static Assets.”

— opening of SKILL.md by PostHog, Custom licence
name
implementing-mcp-ui-apps

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/implementing-mcp-ui-apps of PostHog/posthog.

Open the folder on GitHubat commit 10f9ad7

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in PostHog/posthog, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Implementing MCP UI Apps next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implementing MCP UI Apps compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implementing MCP UI Apps this skillPostHog/posthog40k—~4.3kAutomated safety check: PassCustom licence
Exploring The WizardPostHog/wizard197—~2.2kAutomated safety check: PassMIT
MCP Server Builderanthropics/skills180k64 repos~2.3kAutomated safety check: PassApache-2.0
MCP Server BuildershareAI-lab/learn-claude-code78k5 repos~1.2kAutomated safety check: PassMIT
MCP Integration for Pluginsanthropics/claude-plugins-official38k11 repos~3.1kAutomated safety check: PassApache-2.0
Fastmcp Client CLIPrefectHQ/fastmcp28k1 repos~823Automated safety check: PassApache-2.0

Similar skills

  • Exploring The Wizard

    PostHog/wizard

    Official

    Drive the PostHog wizard headlessly against a throwaway app through wizard-ci MCP tools, inspect decisions, and capture the real TUI.

    197 GitHub stars~2.2k tokensUpdated today
    Testing & QAAuto-check passed

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 64 repos~2.3k tokens
    Agent WorkflowsAuto-check passed

  • MCP Server Builder

    shareAI-lab/learn-claude-code

    Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.

    78k GitHub starsUsed in 5 repos~1.2k tokens
    Agent WorkflowsAuto-check passed

  • MCP Integration for Plugins

    anthropics/claude-plugins-official

    Official

    Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.

    38k GitHub starsUsed in 11 repos~3.1k tokens
    Agent WorkflowsAuto-check passed

  • Fastmcp Client CLI

    PrefectHQ/fastmcp

    Query and invoke tools on MCP servers using fastmcp list and fastmcp call.

    28k GitHub starsUsed in 1 repo~823 tokens
    Agent WorkflowsAuto-check passed

  • Crush Configuration

    charmbracelet/crush

    Explains how to configure the Crush coding agent with crushrc or crush.json, covering providers, models, LSPs, MCP servers, hooks, permissions and config precedence.

    29k GitHub stars~3.7k tokensUpdated today
    Agent WorkflowsAuto-check passed

More from PostHog/posthog

All 252 skills in this repo

  • Authoring Log Alerts

    PostHog/posthog

    Official

    Author useful, low-noise log alerts on services in a PostHog project.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Autoresolving PR Conflicts

    PostHog/posthog

    Official

    Operating procedure for the conflict-autoresolver agent: sweep open PostHog/posthog PRs that conflict with master, resolve the trivial conflicts (generated artifacts deterministically, source…

    40k GitHub stars~4.2k tokensUpdated today
    Auto-check passed

  • Diagnosing Stacktrace Symbolication

    PostHog/posthog

    Official

    Help users debug PostHog Error Tracking stack-trace symbolication for any supported platform — JavaScript/TypeScript web, React Native (Hermes), Android (Proguard / R8), or iOS / macOS (dSYM).

    40k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Exploring Apm Traces

    PostHog/posthog

    Official

    Investigates distributed application performance using PostHog APM (OpenTelemetry span) data via MCP.

    40k GitHub stars~3.5k tokensUpdated today
    Auto-check passed

  • Exploring LLM Traces

    PostHog/posthog

    Official

    Debug and inspect LLM/AI agent traces using PostHog's MCP tools.

    40k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Investigate Metric

    PostHog/posthog

    Official

    Diagnose why a product metric changed (dropped, spiked, or plateaued) by orchestrating breakdowns, actors, paths, lifecycle, retention, and annotations queries.

    40k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Implementing MCP UI Apps

What does Implementing MCP UI Apps do?

Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop. Implementing MCP UI Apps is an agent skill from PostHog/posthog, published by the product's own GitHub organization. Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop.

When should I use Implementing MCP UI Apps?

Implementing MCP UI Apps fits situations like: adding a new detail; list view for an MCP tool; creating view components in products//mcp/apps/; linking tools to UI apps via YAML.

How do I install Implementing MCP UI Apps in Claude Code?

Run `npx skills add PostHog/posthog --skill implementing-mcp-ui-apps -a claude-code`. Or copy the skill folder (.agents/skills/implementing-mcp-ui-apps in PostHog/posthog) into .claude/skills/implementing-mcp-ui-apps in your project. Claude Code loads it when a task matches its description.

How do I install Implementing MCP UI Apps in Codex?

Run `npx skills add PostHog/posthog --skill implementing-mcp-ui-apps -a codex`. Or copy the skill folder (.agents/skills/implementing-mcp-ui-apps in PostHog/posthog) into .agents/skills/implementing-mcp-ui-apps in your project. Codex loads it when a task matches its description.

Can I use Implementing MCP UI Apps in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add PostHog/posthog --skill implementing-mcp-ui-apps -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implementing-mcp-ui-apps, .gemini/skills/implementing-mcp-ui-apps, .github/skills/implementing-mcp-ui-apps and .opencode/skills/implementing-mcp-ui-apps in your project.

What does Implementing MCP UI Apps need to run?

Going by SKILL.md and its folder, Implementing MCP UI Apps needs the command-line tools its instructions call (pnpm).

Does Implementing MCP UI Apps access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Implementing MCP UI Apps safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Implementing MCP UI Apps use?

Implementing MCP UI Apps has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Implementing MCP UI Apps use?

About 4.3k tokens (SKILL.md is roughly 17k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Implementing MCP UI Apps?

Skills that share tags, products or a category with Implementing MCP UI Apps: Exploring The Wizard (PostHog/wizard, 197 stars), MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars) and MCP Integration for Plugins (anthropics/claude-plugins-official, 38k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implementing MCP UI Apps?

PostHog (a GitHub organization, an official publisher) maintains it in PostHog/posthog, which has 40,182 GitHub stars. The repository holds 252 skills in this directory. The repository was last updated on October 8, 2026.

Source: PostHog/posthog on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.