DevelopmentMédio

Web Artifacts Builder

poranthropics·anthropics· v1.0.0 · atualizado em 2026-04-10

Score

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

reacthtml-artifactfrontend-developmenttailwind-cssshadcn-uiviteparcel-bundler

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdweb-artifacts-builder-neuroskill/workflow

1. Initialize the project using `scripts/init-artifact.sh` with the desired project name.

2. Develop the artifact by editing the generated code, utilizing React components and Tailwind CSS for styling.

3. Bundle the code into a single HTML file using `scripts/bundle-artifact.sh`.

4. Share the bundled HTML file with the user for viewing as an artifact in the Claude conversation.

5. (Optional) Test the artifact to ensure it functions as expected.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Compõe comalgorithmic-art

70%

Compõe comAnthropic Brand Styling

70%

Compõe com ←canvas-design

70%

Compõe com ←frontend-design

70%

Compõe com ←Theme Factory Skill

70%

Compõe com ←Web Application Testing

70%

50%

Similar aMarkdown to Docs

60%

Similar aImage Optimizer

60%

Similar aReact Component Generator

60%

40%

Co-executed ←canvas-design

47%

Co-executed ←frontend-design

51%

Co-executed ←Theme Factory Skill

50%

Árvore do Skill

Web Artifacts Builder

web-artifacts-builder-neuroskill

Fases Cognitivas4

1.SENSE

2.CONTEXTUALIZE

3.ACT

4.REFLECT

Triggers8

create a React-based HTML artifactbuild a frontend artifact for Claudegenerate a single-file HTML artifactbundle a React app into HTMLuse shadcn/ui to create an artifactdevelop a complex HTML artifactinitialize a React project with Tailwind CSSbundle code into a single HTML file

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download web-artifacts-builder-neuroskill

$ synaptic skills detail web-artifacts-builder-neuroskill

$ synaptic skills live web-artifacts-builder-neuroskill

Dependências

react typescript vite parcel tailwindcss shadcn/ui @parcel/config-default parcel-resolver-tspaths html-inline

Links

GitHub Repository