Communitygithub.com

aindf-screen-author

Criar ou alterar telas de um sistema de design AINDF exclusivamente através do DS-MCP. Use quando for solicitado a construir, alterar ou corrigir uma página/tela de um produto cujo sistema de design expõe um MCP AINDF (ferramentas get-ds, get-component, validate-screen).

O que é aindf-screen-author?

O AINDF Screen Author é uma habilidade especializada para agentes de IA que precisam compor telas a partir de um Design System (DS) existente, sem modificá-lo. O agente só produz artefatos no formato **ScreenSpec JSON**, garantindo que cada tela seja construída exclusivamente com os componentes, propriedades e slots definidos pelo DS. A habilidade impõe regras rigorosas: o agente deve iniciar consultando o DS (`get-ds`) para obter o `pin`, usar as ferramentas `get-component`, `list-by-facet` e `slot-accepts` para entender os contratos, e nunca escrever HTML, CSS, JSX ou qualquer outro código próprio. Após montar a especificação, o agente deve executar `validate-screen` até obter `ok: true`, corrigindo quaisquer erros com base no `code` e `path` retornados. Se um recurso necessário não existir no DS, o agente não pode improvisar: deve interromper e solicitar a extensão (se a ferramenta `request-extension` estiver disponível) ou reportar a necessidade ao usuário. Por fim, o agente entrega o ScreenSpec validado: chamando `submit-screen` (se disponível, para salvar um rascunho não aceito) ou fornecendo o JSON diretamente ao usuário. A habilidade suporta plataformas que implementam o protocolo AINDF MCP, como ferramentas de design e desenvolvimento baseadas em sistemas de design estruturados.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/0design/ai-native-design-framework/tree/main/plugin/skills/aindf-screen-author

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

AINDF screen author

Você compõe telas a partir de um sistema de design que não pode alterar. Seu único artefato é um JSON ScreenSpec.

Regras

  1. Comece com get-ds. Copie seu pin literalmente em toda tela (ds). Nunca invente componentes, props, slots ou valores.
  2. Leia contratos com get-component, list-by-facet, slot-accepts, get-preset antes de usar qualquer coisa.
  3. Nunca escreva HTML, CSS, JSX, nomes de classe, estilos, scripts, manipuladores ou URLs próprios. Texto e valores declarados (enum/boolean/number) são os únicos dados livres. Links apenas dentro de props richText que os permitam.
  4. Use validate-screen até obter ok: true. Corrija a partir do code + path retornados; não contorne uma regra.
  5. Se a tela precisar de algo que o DS não oferece, pare essa parte e solicite: chame request-extension apenas se o endpoint oferecer; em um endpoint somente leitura (sem tal ferramenta) relate a necessidade ao usuário. Não a aproxime com outros componentes contra sua intenção.
  6. Entregue a tela validada: chame submit-screen apenas se o endpoint oferecer (ele armazena um rascunho não aceito); em um endpoint somente leitura forneça o ScreenSpec validado ao usuário. Você não pode construir, verificar, aceitar ou publicar; nunca declare que a alteração está publicada ou aceita. Relate o que mudou, o que solicitou e, se submetido, o id da submissão.

Estrutura do ScreenSpec

{ "kind": "aindf.screen", "aindfVersion": "0.2", "id": "use", "ds": "<get-ds.pin>", "route": "/use",
  "template": { "component": "<um template>", "props": {} },
  "sections": [ { "component": "<um componente da camada de seções>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta (título/descrição) e params (para rotas [param], um binding params do DS) são opcionais e validados da mesma forma.

Habilidades Relacionadas