Skill de Artefato Vivo

Crie um artefato vivo do OpenDesign: um artefato HTML com escopo de projeto, visualizável, cujos dados podem ser atualizados posteriormente sem redesenhar a apresentação.

Mapa de Recursos

live-artifact/
├── SKILL.md
└── references/
    ├── artifact-schema.md      ← `references/artifact-schema.md`: artifact files, DTO shape, template binding rules
    ├── connector-policy.md     ← `references/connector-policy.md`: connector safety, redaction, credential boundaries
    └── refresh-contract.md     ← `references/refresh-contract.md`: source metadata, refresh execution, snapshots

Status Atual

Use as referências neste diretório como a fonte da verdade para o contrato de arquivo do artefato vivo. Prefira comandos de wrapper de daemon em vez de HTTP bruto ao registrar ou atualizar artefatos vivos.

Quando usar esta skill

Use esta skill quando o usuário solicitar uma visualização baseada em dados que deve permanecer útil após a primeira renderização, por exemplo, um painel ao vivo, relatório atualizável, página de status sincronizada, visualização de dados auditável ou artefato que pode ser atualizado posteriormente a partir de dados locais/de projeto ou conectores.

Antes de criar arquivos, decida se o usuário realmente quer um artefato vivo ou um artefato estático normal:

• Use um artefato vivo quando o usuário mencionar atualização, sincronização, atualizações recorrentes, dados baseados em conectores, rastreamento de origem/proveniência, painéis, relatórios ou visualizações reutilizáveis baseadas em dados.
• Use um artefato estático normal quando o usuário quiser apenas um HTML/mockup/imagem/arquivo único e não precisar de atualização, metadados de origem ou painéis de dados/proveniência.
• Se a intenção for ambígua, faça uma pergunta curta: "Isso deve ser atualizável/vivo, ou apenas um artefato estático?"

Fluxo de Trabalho

1. Resolva o escopo e a fonte de dados sem depender de conectores conectados

   • Identifique o objetivo da visualização, o público, as expectativas de atualização dos dados e se a atualização deve ser possível posteriormente.
   • Se o usuário nomear explicitamente um conector/fonte como Notion, GitHub, Slack ou Google Drive, não pergunte "de onde os dados devem vir?" antes de verificar as ferramentas de conector do daemon.
   • Prefira fontes locais/de projeto ou ferramentas de conector do daemon quando disponíveis.
   • Não chame APIs de provedores diretamente quando um conector/wrapper de daemon existir.
   • Se dados do conector forem necessários, primeiro liste os conectores com "$OD_NODE_BIN" "$OD_BIN" tools connectors list --format compact. Se o conector nomeado estiver presente com status: "connected", escolha uma ferramenta auto somente leitura apropriada de seu catálogo e execute-a através do wrapper do conector.
   • Para Notion especificamente, um conector notion conectado mais um briefing do usuário que nomeia Notion é suficiente para começar com notion.notion_search usando uma consulta derivada do artefato/tópico solicitado. Use notion.notion_fetch_database apenas quando o usuário fornecer um ID de banco de dados ou o resultado da pesquisa identificar claramente um.
   • Pergunte ao usuário sobre a fonte de dados apenas quando não houver um conector conectado correspondente, múltiplos candidatos conectados se encaixarem igualmente bem, ou o artefato solicitado não tiver um tópico/consulta utilizável para pesquisar. Se você precisar perguntar, seja específico: peça a página/banco de dados/tópico ou permissão para pesquisar amplamente, não "onde está a fonte de dados do Notion?"

2. Crie os arquivos de origem

   • Escreva template.html como o template HTML projetado pelo humano. O daemon o preenche com data.json usando o contrato de vinculação html_template_v1 — permaneça dentro dele ou a hidratação falhará e o template bruto será enviado com tokens {{…}} visíveis:
     • Escalares: {{data.path.to.value}}. Caminhos começam com data, separados por pontos; índices numéricos de array são permitidos ({{data.kpis.0.value}}). Cada vinculação deve resultar em uma única string/número, não em um objeto ou array.
     • Listas: repita um elemento com data-od-repeat="item in data.items", então vincule campos de escopo de loop dentro dele como {{item.label}} (ou {{item}} para um array escalar). Apenas um nível; data.* ainda funciona dentro da repetição para globais.
     • NÃO faça loop manual em um <script> (scripts são removidos das visualizações), e NÃO referencie uma variável de loop nua como {{metric.value}} sem um escopo data-od-repeat correspondente — essa vinculação não pode ser resolvida. Repetições aninhadas, condicionais, filtros, helpers e interpolação bruta/de triplo-chave não são suportados.
   • Escreva data.json como os dados de visualização canônicos usados por essas vinculações — valores reais, não placeholders.
   • Escreva artifact.json com os metadados do artefato vivo, declaração de visualização, declaração de documento e descritores de origem seguros.

…