# Astryx (Meta) — prompts, comandos e passo a passo

Material da edição "A Meta abriu 163 componentes de graça".
Newsletter Nomics Tech · gruponomics.com.br/newsletter

Tudo aqui foi testado em 28/08/2026 num projeto real. Versão instalada: Astryx v0.5.0, 163 componentes.

---

## 1. Instalar

Requisito: React 19 ou superior.

```bash
npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral @astryxdesign/cli
```

No arquivo de entrada do app (main.tsx, layout.tsx), os dois imports de estilo.
Sem eles os componentes aparecem sem formatação nenhuma:

```ts
import "@astryxdesign/core/reset.css";
import "@astryxdesign/core/astryx.css";
```

---

## 2. Gerar o arquivo de contexto da sua IA

Esse é o comando que muda o jogo. Ele escreve, dentro do projeto,
um arquivo com as regras de uso que a sua IA lê sozinha.

```bash
# padrão: gera AGENTS.md (lido por quase todo agente)
npx @astryxdesign/cli init --features agents

# no formato de uma ferramenta específica
npx @astryxdesign/cli init --features agents --agent claude   # .claude/CLAUDE.md
npx @astryxdesign/cli init --features agents --agent cursor   # .cursorrules
npx @astryxdesign/cli init --features agents --agent codex    # AGENTS.md
```

O arquivo gerado tem 2.440 caracteres e traz, entre outras coisas:
- o fluxo de 3 passos que a IA deve seguir antes de escrever qualquer tela
- as proibições: nada de `<div>` solta, nada de valor cravado na mão, sempre os tokens do tema
- uma auto-checagem que ela roda antes de terminar

---

## 3. O teste das 3 perguntas

Cole isso na sua IA ANTES de pedir qualquer código.
A documentação oficial declara: essas três têm 0% de acerto sem os agent docs instalados.

```
Antes de escrever qualquer código do Astryx, confira o que você sabe:

1. Qual é o caminho correto de import do Button?
2. Como se deixa um Dialog impossível de fechar?
3. Qual propriedade o Selector usa para os itens dele?

Se você não souber as três, rode `npx @astryxdesign/cli init --features agents`
e leia o arquivo gerado antes de continuar.
```

---

## 4. Escolher a cara do projeto

Seis temas prontos: butter, chocolate, gothic, matcha, neutral e stone.

```bash
npx astryx theme list          # lista os seis, com a descrição de cada um
npx astryx theme add matcha    # copia o tema pro seu projeto como arquivo EDITÁVEL
npx astryx theme template      # modelo em branco comentado, pra sua própria marca
```

O `theme add` não instala um pacote fechado: ele copia o código pra dentro do
seu projeto. A partir daí o tema é seu e você mexe à vontade.

---

## 5. Descobrir em vez de chutar

O comando que monta o kit da tela. Funciona em português.

```bash
npx astryx build "painel com barra lateral, tabela de clientes e filtro"
npx astryx component Table          # props e exemplos de um componente
npx astryx component --list         # os 163, por categoria
npx astryx template --list          # 682 receitas de página e bloco
npx astryx search "menu suspenso"   # busca livre
npx astryx swizzle Dialog           # ejeta o código-fonte pra customizar fundo
```

---

## 6. Ligar o servidor MCP

Assim a sua IA consulta a documentação sozinha, sem você copiar nada.
Mesma configuração para Claude, Cursor e Windsurf:

```json
{
  "mcpServers": {
    "xds": {
      "type": "url",
      "url": "https://astryx.atmeta.com/mcp"
    }
  }
}
```

Testado: o servidor responde como `astryx` v2.0.0, com duas ferramentas,
`search` (busca por linguagem natural) e `get` (documentação completa de um item).

---

## 7. O prompt completo, pra colar de uma vez

```
Instale o Astryx neste projeto: @astryxdesign/core, @stylexjs/stylex,
@astryxdesign/theme-neutral e @astryxdesign/cli.

Depois rode `npx @astryxdesign/cli init --features agents --agent claude`
e LEIA o arquivo gerado antes de escrever qualquer código.

Adicione os dois imports de CSS no meu arquivo de entrada.

Em seguida me pergunte qual a cara que este projeto deve ter, rode
`npx astryx theme list` e comece pelo tema mais próximo com `theme add`.
Se nenhum servir, use `theme template`.

Antes de montar qualquer tela, rode `npx astryx build "<a tela que eu pedir>"`
e siga o kit que ele devolver. Não invente componente nem propriedade:
se tiver dúvida, rode `npx astryx component <Nome>`.
```

---

## 8. Antes de decidir usar

O Astryx é feito para construir PRODUTO: painel, área logada, ferramenta interna.
Não é para landing page de vendas. Eu testei: o próprio `build` avisou que não
tinha correspondência exata para "página de vendas".

Outros pontos:
- Está em beta (v0.5.0). Vai mudar coisa no caminho.
- Exige React 19. Em versão anterior, não instala.
- Usa StyleX, o jeito da Meta de escrever estilo. Convive com Tailwind e CSS puro,
  mas é mais uma peça no seu projeto.

Licença MIT. Repositório: github.com/facebook/astryx