# Po Ui

> Consulta componentes, inputs/outputs, exemplos e guias da biblioteca PO-UI (Angular TOTVS) via MCP server oficial. Use antes de escrever ou modificar qualquer UI que utilize PO-UI.

- **Type:** Skill
- **Install:** `agentstack add skill-tbc-servicos-dataagile-agent-kit-po-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tbc-servicos](https://agentstack.voostack.com/s/tbc-servicos)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tbc-servicos](https://github.com/tbc-servicos)
- **Source:** https://github.com/tbc-servicos/dataagile-agent-kit/tree/main/po-ui/skills/po-ui
- **Website:** https://dataagile-agent-kit.dataagile.com.br

## Install

```sh
agentstack add skill-tbc-servicos-dataagile-agent-kit-po-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Skill: PO-UI Component Reference

## Quando ativar

Sempre que a tarefa envolva:

- Criar componente Angular novo usando PO-UI
- Modificar componente existente que use `po-*` tags
- Decidir entre Angular Material e PO-UI (resposta: **sempre PO-UI**)
- Buscar input/output específico (ex: `po-table` com paginação infinita)
- Configurar tema, i18n, acessibilidade PO-UI
- Resolver erro de componente PO-UI (input errado, output não chamado, layout quebrado)

## Fluxo obrigatório antes de codar

1. **Identificar o componente**: usar `list_components` quando não souber o nome exato
2. **Buscar doc detalhada**: `get_component_docs` com o nome do componente
3. **Consultar exemplo**: incluído na doc; copiar estrutura base
4. **Verificar inputs/outputs**: nome exato, tipo, valor default
5. **Aplicar no código**: usar nome de propriedades EXATO da doc (case-sensitive, prefixo `p-`)

## Tools MCP

### `list_components`

Lista todos componentes PO-UI agrupados por categoria.

**Use quando**: não sabe o nome do componente ou quer ver opções disponíveis em uma categoria.

**Exemplo de retorno**: `po-table, po-button, po-input, po-dynamic-form, po-page, po-modal, ...`

### `get_component_docs`

Doc completa de um componente: descrição, inputs (`p-*`), outputs (`p-*-change`), métodos públicos, exemplos.

**Use quando**: já sabe o nome (ou aprendeu via `list_components`) e precisa implementar.

**Parâmetros**: `component_name` (ex: `"po-table"`)

### `search_docs`

Busca textual livre na documentação oficial — para conceitos, guias, dúvidas que não mapeiam diretamente a um componente.

**Use quando**: pergunta tipo "como faço paginação infinita" ou "exemplo de upload de arquivo".

### `get_guide`

Guias temáticos: acessibilidade, theming, i18n, performance, setup.

**Use quando**: configuração transversal (não específica de componente).

## Convenções obrigatórias

| Convenção | Regra |
|-----------|-------|
| Biblioteca UI | **PO-UI sempre**, nunca Angular Material |
| Notificações | `PoNotificationService` (success/warning/error/info), nunca `alert()` |
| Tabelas | `po-table` com `p-columns` tipadas (`[{ property, label, type }]`) |
| Formulários reativos | `po-dynamic-form` (preferencial) ou campos PO individuais (`po-input`, `po-select`, `po-datepicker`) |
| Ícones | prefixo `po-icon-*` (lista completa em `get_component_docs` de `po-icon`) |
| Tema | `@po-ui/style` — não criar variáveis CSS manuais |
| Loading | `p-loading="true"` no componente, não overlay custom |
| Layout | `po-page-default`, `po-page-dynamic-table`, `po-page-dynamic-edit` conforme tipo de tela |

## Anti-padrões

| Anti-padrão | Correção |
|-------------|----------|
| `import { MatTable } from '@angular/material'` | Use `PoTableModule` |
| `alert("erro")` | `this.poNotification.error({ message: '...' })` |
| `` HTML puro | `` com colunas tipadas |
| Variáveis CSS hardcoded (`#1a4d5c`) | Tokens do tema `@po-ui/style` |
| `getElementById` para focus | `ViewChild` + métodos do componente PO |

## Instalação em projeto novo

```bash
ng add @po-ui/ng-components
```

Inclui automaticamente:

- `@po-ui/ng-components`
- `@po-ui/ng-templates`
- `@po-ui/style`
- Configuração de tema padrão

## Recursos

- Site: https://po-ui.io
- Docs LLM compacta: https://po-ui.io/llms.txt
- Docs LLM expandida: https://po-ui.io/llms-full.txt
- npm MCP: https://www.npmjs.com/package/@po-ui/mcp

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [tbc-servicos](https://github.com/tbc-servicos)
- **Source:** [tbc-servicos/dataagile-agent-kit](https://github.com/tbc-servicos/dataagile-agent-kit)
- **License:** MIT
- **Homepage:** https://dataagile-agent-kit.dataagile.com.br

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tbc-servicos-dataagile-agent-kit-po-ui
- Seller: https://agentstack.voostack.com/s/tbc-servicos
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.