# Widget

> Consulta MCP

- Skill: `tbc-servicos/widget` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tbc-servicos/widget`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tbc-servicos/widget/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/widget

---


## Consulta MCP

Antes de gerar código, consulte o MCP `tbc-knowledge`:

```
searchFluigApi({ category: "widget" })
// → DatasetFactory client-side, REST Protheus, fluigc no contexto Angular

searchFluigPatterns({ category: "template", skill: "fluig-widget" })
// → templates: package.json, angular.json, app.module.ts, components, services, specs

searchFluigPatterns({ category: "conventions" })
// → convenções PO-UI, estrutura de módulos, boas práticas Angular/Fluig
```

---

## Stack e Estrutura

Consulte o MCP antes de gerar o widget:

```
searchFluigPatterns({ skill: "fluig-widget", category: "convention" })
searchFluigPatterns({ skill: "fluig-widget", category: "template" })
searchFluigPatterns({ skill: "fluig-widget", category: "naming" })
```

Aplique a stack, estrutura de pastas e convenções retornadas pelo MCP.

---

## Instruções para Claude

1. **Perguntar antes de gerar:** Qual o nome do widget? Qual a finalidade (listagem, formulário, dashboard)? Precisa integrar com dataset ou REST Protheus?
2. **Consultar MCP** para obter os templates de configuração (package.json, angular.json, app.module.ts) e os padrões PO-UI antes de gerar os arquivos.
3. **Criar TODOS os arquivos** da estrutura — incluindo configurações e specs de teste.
4. **Usar apenas PO-UI** para componentes visuais — nunca Angular Material isolado.
5. **Testes são obrigatórios:** gerar spec para cada componente e serviço criado.