Habilidades web-artifacts-builder
📦

web-artifacts-builder

Baixo Risco ⚡ Contém scripts📁 Acesso ao sistema de arquivos⚙️ Comandos externos

Crie Artefatos React com Componentes shadcn/ui

Também disponível em: davila7,Azeem-2,anthropics

Criar artefatos React com múltiplos componentes para conversas no Claude requer configuração e empacotamento complexos. Esta skill automatiza a configuração do projeto com React 18, TypeScript, Tailwind CSS e mais de 40 componentes shadcn/ui, depois empacota tudo em um único arquivo HTML.

Suporta: Claude Codex Code(CC)
🥉 73 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "web-artifacts-builder". Initialize a project called "task-board" with kanban board layout

Resultado esperado:

Projeto 'task-board' criado com sucesso com React 18, TypeScript, Vite, Tailwind CSS 3.4.1 e mais de 40 componentes shadcn/ui. Aliases de caminho (@/) configurados. Execute 'cd task-board && pnpm dev' para iniciar o servidor de desenvolvimento.

A utilizar "web-artifacts-builder". Bundle the current React project into a single HTML artifact

Resultado esperado:

Empacotamento concluído! Output: bundle.html (487 KB). Todo JavaScript, CSS e assets embutidos. Abra bundle.html no navegador para visualizar, ou compartilhe diretamente em conversas no Claude.

Auditoria de Segurança

Baixo Risco
v1 • 2/24/2026

Static analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.

3
Arquivos analisados
451
Linhas analisadas
5
achados
1
Total de auditorias
Problemas de Baixo Risco (2)
scripts/bundle-artifact.sh:1-54scripts/init-artifact.sh:1-323
Shell Script Execution
Build scripts execute shell commands for project scaffolding. All commands use hardcoded arguments with no user input injection vectors. Standard pattern for development tooling.
scripts/init-artifact.sh:228-251
Filesystem Modification
Scripts modify project configuration files (tsconfig.json, tailwind.config.js) using Node.js fs module. Operations are scoped to the created project directory only.

Fatores de risco

⚡ Contém scripts (1)
scripts/init-artifact.sh:93
📁 Acesso ao sistema de arquivos (1)
scripts/init-artifact.sh:230-250
⚙️ Comandos externos (2)
scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323
Auditado por: claude

Pontuação de qualidade

45
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
86
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

Componentes de Dashboard Interativo

Construa dashboards complexos de visualização de dados com múltiplos componentes shadcn/ui como tabelas, cards, gráficos e filtros que funcionam diretamente em conversas no Claude.

Aplicações de Formulário Multi-Etapa

Crie fluxos de formulário sofisticados com validação, gerenciamento de estado e componentes de UI como diálogos, abas e sanfonas para experiências de onboarding de usuários.

Apresentações de Design System

Gere bibliotecas de componentes abrangentes mostrando temas shadcn/ui, suporte a modo escuro e layouts responsivos para documentação de design.

Tente Estes Prompts

Início Rápido - Inicializar Projeto 
Initialize a new web artifact project called "dashboard-demo" with all shadcn/ui components configured.
Criar Tabela de Dados com Filtros 
Create a customer management dashboard with a data table showing name, email, and status. Add filter controls using the select and input components. Include pagination and row actions via dropdown menu.
Formulário Multi-Etapa com Validação 
Build a 3-step registration form using the form, input, select, and button components. Use react-hook-form with zod validation. Step 1 collects personal info, Step 2 handles preferences, Step 3 shows confirmation. Include progress indicator.
Dashboard de Analytics com Modo Escuro 
Create an analytics dashboard with dark mode toggle using next-themes. Include metric cards, a line chart placeholder, recent activity table, and a settings dialog. Use the card, table, dialog, button, and switch components with proper shadcn/ui theming.

Melhores Práticas

  • Sempre execute init-artifact.sh antes de iniciar o desenvolvimento para garantir que todas as dependências e configurações estejam devidamente configuradas
  • Use os aliases de caminho fornecidos (@/components, @/lib) para imports mais limpos consistentes com as convenções shadcn/ui
  • Execute bundle-artifact.sh apenas após o desenvolvimento estar concluído para minimizar tempo de build e tamanho do output

Evitar

  • Não use esta skill para snippets React de arquivo único - ela é projetada para aplicações com múltiplos componentes
  • Evite modificar os scripts de build a menos que você entenda a configuração de empacotamento Parcel e resolução de aliases de caminho
  • Não faça commit do bundle.html no controle de versão - gere-o novamente para cada sessão de compartilhamento de artefato

Perguntas Frequentes

Qual é a diferença entre esta skill e a geração simples de artefatos React?
Esta skill cria aplicações React completas com múltiplos componentes com ferramentas de build adequadas, enquanto artefatos simples são snippets JSX de arquivo único. Use esta para UIs complexas que requerem gerenciamento de estado, roteamento ou muitos componentes shadcn/ui.
Posso usar npm ou yarn em vez de pnpm?
Os scripts são escritos para pnpm. Você pode adaptar manualmente os comandos para npm ou yarn, mas o pnpm é recomendado para compatibilidade com os scripts fornecidos e instalação mais rápida de dependências.
Por que o arquivo HTML empacotado é tão grande?
O bundle inclui toda a biblioteca React, todos os componentes shadcn/ui e Tailwind CSS embutidos em um único arquivo. Esta compensação permite o compartilhamento como um artefato autocontido sem dependências externas.
Posso adicionar componentes shadcn/ui personalizados após a inicialização?
Sim. A configuração components.json está configurada para a CLI shadcn/ui. Execute 'pnpm dlx shadcn-ui@latest add <component>' para adicionar mais componentes ao seu projeto.
Esta skill funciona com o modo workspace do Claude Code?
Sim. Os scripts operam dentro do diretório do projeto atual. Ao usar Claude Code, certifique-se de executar comandos a partir da raiz do projeto do artefato onde package.json existe.
Como personalizo o tema Tailwind além das cores shadcn padrão?
Edite tailwind.config.js para adicionar cores personalizadas, fontes ou estender o tema. O config está pré-configurado com variáveis CSS shadcn que você pode modificar ou estender.

Detalhes do Desenvolvedor

Licença

Complete terms in LICENSE.txt

Repositório

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder

Referência

main

Estrutura de arquivos

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md