Po ui
Plugin Claude Code para Protheus e ADVPL/TLPP — base 155k+ registros, Agent Teams, compilação TDS-CLI, testes TIR e MCP PO-UI
npx -y skills add tbc-servicos/dataagile-agent-kit --skill po-uiAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.md
3.6 KB, as published. Nobody here has run it
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