# Pca UI Builder

> Gera prototipos React (SPA) visuais completos num unico ficheiro HTML. Utiliza Tailwind e shadcn/ui. Ideal para visualizar dashboards do PCA Camocim.

- Skill: `narcisolcf/pca-ui-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add narcisolcf/pca-ui-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/narcisolcf/pca-ui-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: narcisolcf (https://skillmd.com/u/narcisolcf)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/narcisolcf/pca-ui-builder

---


# Construtor de UI PCA Camocim

## Visão Geral
Esta habilidade permite criar mini-aplicações React visualizáveis diretamente na interface do Claude. É usada para validar ideias visuais (ex: novos formulários de contratação) sem sujar o código principal.

## Como Funciona
A skill executa scripts shell que:
1.  Inicializam um projeto React temporário com `shadcn/ui`.
2.  Permitem ao Claude escrever o código dos componentes.
3.  Empacotam tudo num único ficheiro `bundle.html`.

## Instruções de Uso

### 1. Criar um Protótipo
Quando o utilizador pedir "Crie um protótipo visual de X":
1.  Execute `scripts/init-artifact.sh` para preparar o ambiente.
2.  Escreva o código React (App.tsx, componentes).
3.  Execute `scripts/bundle-artifact.sh` para gerar o HTML final.

## Requisitos Técnicos
- O ambiente deve suportar execução de Bash scripts.
- O ficheiro `shadcn-components.tar.gz` deve estar presente em `scripts/`.