tbc-servicos 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-tablecom 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
- Identificar o componente: usar
list_componentsquando não souber o nome exato - Buscar doc detalhada:
get_component_docscom o nome do componente - Consultar exemplo: incluído na doc; copiar estrutura base
- Verificar inputs/outputs: nome exato, tipo, valor default
- 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
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