# Widget

> Cria widget Angular 19 + PO-UI 19.36.0 para TOTVS Fluig. Estrutura completa com components, pages, services, testes Jasmine+Karma. Padrão: wg_[nome-kebab-case].

- **Type:** Skill
- **Install:** `agentstack add skill-tbc-servicos-dataagile-agent-kit-widget`
- **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/fluig/skills/widget
- **Website:** https://dataagile-agent-kit.dataagile.com.br

## Install

```sh
agentstack add skill-tbc-servicos-dataagile-agent-kit-widget
```

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

## About

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

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