Generate Mcp App Ui (Grade A)Habilidade de desenvolvimento testada para segurança para Claude AI. Grau A. Gere um widget de aplicativo MCP (auto-contido em HTML) para uma ferramenta MCP. Descreva o visual desejado e cole a saída de teste da ferramenta.

— (0)

Avaliado por Daniel Nikulshyn·Atualizado julho de 2026

Visão geral

Gere um widget de aplicativo MCP (auto-contido em HTML) para uma ferramenta MCP. Descreva o visual desejado e cole a saída de teste da ferramenta. Essa habilidade gera widgets focados e de propósito único que exibem a saída de uma ferramenta visualmente dentro de uma conversa de chat. Requer uma descrição do visual e da saída de teste da ferramenta em formato JSON. O widget gerado pode ser interativo se um nome de ferramenta for fornecido, permitindo que ele chame a ferramenta e atualize os dados.

Funcionalidades principais

Gera widgets HTML auto-contidos
Suporta widgets interativos com funcionalidade callServerTool
Lida com vários tipos de dados com verificações de tipo seguro
Encoraja o uso de Fluent UI e diretrizes de design para consistência visual

Preços

Modelo: Free
Categoria: Habilidades
Avaliação: Ainda sem avaliações

Casos de uso

Visualização de Saída de Ferramenta

Um usuário deseja visualizar a saída de uma ferramenta como um gráfico ou tabela em uma conversa de chat. Eles fornecem uma descrição do visual desejado e da saída de teste da ferramenta em formato JSON.

Painel Interativo

Um usuário solicita um widget interativo que exibe dados de uma ferramenta e permite atualizar os dados. O usuário fornece um nome de ferramenta e saída de teste.

Prós e contras

Prós

Gera widgets visualmente atraentes para conversas de chat
Permite widgets interativos com capacidades de atualização
Encoraja representações visuais compactas e focadas de dados

Contras

Requer entrada específica dos usuários (descrição do visual e saída de teste da ferramenta)
Limitado a gerar widgets com base em dados fornecidos, sem fazer suposições sobre o formato dos dados

Avaliações

Entra para deixar uma avaliação.

Ainda sem avaliações. Sê o primeiro!

Perguntas e respostas

Can the widget refresh data automatically?

If you provide a tool name, the generated HTML can include a `callServerTool` function that lets the widget call the tool and refresh its data. Without a tool name, the widget displays the data read‑only.

Asked by Bilal Choudhury · Jan 11, 2026

Is there a learning curve to using this skill?

The main steps are describing the desired visual (e.g., chart, table) and supplying the tool’s JSON output. Once those are provided, the skill outputs the HTML; no additional coding is needed, though familiarity with Fluent UI guidelines can help customize the look.

Asked by Sarai Cohen · Jan 11, 2026

Do I need to provide my tool’s data before creating a widget?

Yes. The tool requires a test output in JSON format from the tool you want to visualize. Without this JSON, it will prompt you to paste it; it will not guess the data shape.

Asked by Yara Mansour · Nov 20, 2025

What kind of visual outputs can this tool generate?

It creates self‑contained HTML widgets such as charts, comparison tables or maps that display a tool’s JSON output. The widget is styled with Fluent UI for consistency and can be interactive if a tool name is supplied.

Asked by Tobias Hartmann · Oct 18, 2025

Faz uma pergunta

Alternativas a Habilidades

Using Git Worktrees (Grade A)Habilidades

Habilidade de dados de segurança testada para Claude AI. Grau A. Use ao iniciar o trabalho de recurso que precisa de isolamento do espaço de trabalho atual ou antes de executar planos de implementação - cria worktrees git isolados

— (0)

Free

Ga4 Bigquery Schema (Grade A)Habilidades

Habilidade de dados-IA testada por segurança para Claude AI. Nota A. Referência do Esquema de Exportação GA4 BigQuery - referência de campo completa, estruturas aninhadas, padrões de consulta e dicas de desempenho

— (0)

Free

Meta Capi (Grade A)Habilidades

Habilidade de dados-IA testada em segurança para Claude AI. Grau A. Referência de configuração do Meta Conversions API (CAPI) — arquitetura, tipos de eventos, hash de informações de cliente, deduplicação, exemplos de implementação, AEM

— (0)

Free

Callees (Grade A)Habilidades

Habilidade de desenvolvimento testada por segurança para Claude AI. Nota A. Lista o que uma função/método chama (gráfico de chamadas direto)

— (0)

Free

Test Module Name (Grade A)Habilidades

Habilidade de dados de segurança testada para Claude AI. Grau A.

— (0)

Free

Board Of Directors (Grade A)Habilidades

Habilidade de dados-IA testada para segurança para Claude AI. Grau A. Simula uma deliberação de um conselho de 5 membros especialistas para decisões importantes. Use ao avaliar planos, escolhas de arquitetura, designs de recursos ou qualquer decisão

— (0)

Free

Advpl Mvc Avancado (Grade A)Habilidades

Skill de desenvolvimento testada quanto à segurança para o Claude AI. Grade A. MVC avançado via PE (Pontos de Entrada) — adicionar grids customizadas em telas MVC padrão (CNTA300/MATA070/MATA440/MATA460/FINA040 via *STRU)

— (0)

Free

Docs Writer (Grade A)Habilidades

Habilidade de segurança testada para desenvolvedores para Claude AI. Grau A. **HABILIDADE DE FLUXO DE TRABALHO** — Mantém a precisão e atualidade da documentação do repositório em todo o site de documentação, arquivos de agente e changelog. QUANDO: "atualizar documentação"

— (0)

Free