# 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.

- Skill: `tbc-servicos/po-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tbc-servicos/po-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tbc-servicos/po-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tbc-servicos (https://skillmd.com/u/tbc-servicos)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tbc-servicos/po-ui

---


# 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: '...' })` |
| `<table>` HTML puro | `<po-table>` 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