@eximia-ventures/claude-code-toolkit 5.2.1 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -16
- package/package.json +1 -1
- package/src/installer.js +29 -2
- package/src/modules/aios.js +0 -6
- package/src/modules/external-packages.js +45 -0
- package/assets/skill/ds-apply.md +0 -118
- package/assets/skill/ds-install.md +0 -94
- package/assets/skill/ds-list.md +0 -62
- package/assets/skill/ds-pack.md +0 -92
- package/assets/skill/ds.md +0 -248
package/README.md
CHANGED
|
@@ -29,6 +29,7 @@ O `claude-code-toolkit` transforma sua experiência com o Claude Code instalando
|
|
|
29
29
|
| **eximia-meter** | Monitor de consumo de tokens no menu bar do macOS |
|
|
30
30
|
| **AIOS Framework** | 7 slash commands com wizards interativos: story, epic, QA, publish, bootstrap, help, integrate (opt-in) |
|
|
31
31
|
| **Squad Forge** | Transforma squads e agents em plataformas visuais interativas (Chat, Canvas, Wizard, Dashboard) |
|
|
32
|
+
| **Pacotes externos** | Instala pacotes complementares via `npm install` (ex: `@eximia-ventures/ds`) |
|
|
32
33
|
|
|
33
34
|
---
|
|
34
35
|
|
|
@@ -465,7 +466,7 @@ forge/{target}/
|
|
|
465
466
|
|
|
466
467
|
### Design System Manager (`@eximia-ventures/ds`) 📦
|
|
467
468
|
|
|
468
|
-
Pacote npm
|
|
469
|
+
Pacote npm independente que gerencia design systems como artefatos instaláveis (formato `.dspack`). O toolkit oferece sua instalação via wizard — as skills são instaladas pelo próprio pacote.
|
|
469
470
|
|
|
470
471
|
```bash
|
|
471
472
|
npm install @eximia-ventures/ds
|
|
@@ -487,15 +488,7 @@ meu-ds.dspack
|
|
|
487
488
|
└── templates/
|
|
488
489
|
```
|
|
489
490
|
|
|
490
|
-
**
|
|
491
|
-
|
|
492
|
-
| Skill | Descrição |
|
|
493
|
-
|-------|-----------|
|
|
494
|
-
| `/ds` | Wizard central interativo — menu de operações |
|
|
495
|
-
| `/ds-pack` | Empacota um DS existente em `.dspack` |
|
|
496
|
-
| `/ds-install` | Instala um `.dspack` no projeto (`design-systems/`) |
|
|
497
|
-
| `/ds-list` | Lista DSs instalados e disponíveis |
|
|
498
|
-
| `/ds-apply` | Registra DS como ativo e gera `.ds-context.md` para Brad Frost e `@dev` |
|
|
491
|
+
**Skills instaladas pelo pacote:** `/ds`, `/ds-pack`, `/ds-install`, `/ds-list`, `/ds-apply`
|
|
499
492
|
|
|
500
493
|
**Fluxo com Forge:**
|
|
501
494
|
|
|
@@ -589,12 +582,7 @@ claude-code-toolkit/
|
|
|
589
582
|
│ ├── aios-qa.md # QA toolkit
|
|
590
583
|
│ ├── aios-publish.md # Release management
|
|
591
584
|
│ ├── aios-bootstrap.md # Setup de projeto
|
|
592
|
-
│
|
|
593
|
-
│ ├── ds.md # Design System Manager — wizard central
|
|
594
|
-
│ ├── ds-pack.md # Empacotar DS em .dspack
|
|
595
|
-
│ ├── ds-install.md # Instalar .dspack no projeto
|
|
596
|
-
│ ├── ds-list.md # Listar DSs instalados
|
|
597
|
-
│ └── ds-apply.md # Registrar DS ativo + gerar contexto
|
|
585
|
+
│ └── aios-help.md # Guia de comandos AIOS
|
|
598
586
|
└── squads/
|
|
599
587
|
└── forge/ # Squad Forge (Platform Materializer)
|
|
600
588
|
├── squad.yaml # Manifest AIOS
|
package/package.json
CHANGED
package/src/installer.js
CHANGED
|
@@ -6,6 +6,7 @@ const os = require('os');
|
|
|
6
6
|
const fs = require('fs-extra');
|
|
7
7
|
const logger = require('./utils/logger');
|
|
8
8
|
const modules = require('./modules');
|
|
9
|
+
const { EXTERNAL_PACKAGES, installPackages } = require('./modules/external-packages');
|
|
9
10
|
|
|
10
11
|
const MANIFEST_PATH = path.join(os.homedir(), '.claude', '.toolkit-manifest.json');
|
|
11
12
|
|
|
@@ -82,7 +83,23 @@ async function runInstaller() {
|
|
|
82
83
|
}
|
|
83
84
|
}
|
|
84
85
|
|
|
85
|
-
// --- Step 3:
|
|
86
|
+
// --- Step 3: Pacotes externos ---
|
|
87
|
+
logger.section('Pacotes Externos');
|
|
88
|
+
|
|
89
|
+
const { selectedPackages } = await inquirer.prompt([
|
|
90
|
+
{
|
|
91
|
+
type: 'checkbox',
|
|
92
|
+
name: 'selectedPackages',
|
|
93
|
+
message: 'Selecione pacotes externos para instalar:',
|
|
94
|
+
choices: EXTERNAL_PACKAGES.map(p => ({
|
|
95
|
+
name: `${p.package.padEnd(26)} — ${p.desc}`,
|
|
96
|
+
value: p.package,
|
|
97
|
+
checked: false
|
|
98
|
+
}))
|
|
99
|
+
}
|
|
100
|
+
]);
|
|
101
|
+
|
|
102
|
+
// --- Step 4: AIOS (sempre wizard) ---
|
|
86
103
|
logger.section('AIOS Framework');
|
|
87
104
|
|
|
88
105
|
const { useAios } = await inquirer.prompt([
|
|
@@ -129,7 +146,7 @@ async function runInstaller() {
|
|
|
129
146
|
}
|
|
130
147
|
|
|
131
148
|
// --- Validate selection ---
|
|
132
|
-
if (selectedModules.length === 0) {
|
|
149
|
+
if (selectedModules.length === 0 && selectedPackages.length === 0) {
|
|
133
150
|
logger.warn('Nenhum módulo selecionado. Saindo.');
|
|
134
151
|
return;
|
|
135
152
|
}
|
|
@@ -183,6 +200,13 @@ async function runInstaller() {
|
|
|
183
200
|
}
|
|
184
201
|
}
|
|
185
202
|
|
|
203
|
+
// Install external packages
|
|
204
|
+
if (selectedPackages.length > 0) {
|
|
205
|
+
logger.section('Pacotes Externos');
|
|
206
|
+
const pkgResults = await installPackages({ packages: selectedPackages });
|
|
207
|
+
manifest.externalPackages = pkgResults;
|
|
208
|
+
}
|
|
209
|
+
|
|
186
210
|
// Save manifest
|
|
187
211
|
await fs.ensureDir(path.dirname(MANIFEST_PATH));
|
|
188
212
|
await fs.writeJson(MANIFEST_PATH, manifest, { spaces: 2 });
|
|
@@ -198,6 +222,9 @@ async function runInstaller() {
|
|
|
198
222
|
if (selectedModules.includes('aios') && aiosOptions.installAiosSkills?.length > 0) {
|
|
199
223
|
logger.info(`Skills AIOS instaladas: ${aiosOptions.installAiosSkills.join(', ')}`);
|
|
200
224
|
}
|
|
225
|
+
if (selectedPackages.length > 0) {
|
|
226
|
+
logger.info(`Pacotes externos: ${selectedPackages.join(', ')}`);
|
|
227
|
+
}
|
|
201
228
|
logger.blank();
|
|
202
229
|
}
|
|
203
230
|
|
package/src/modules/aios.js
CHANGED
|
@@ -14,12 +14,6 @@ const SKILLS = [
|
|
|
14
14
|
{ src: 'aios-publish.md', name: '/aios-publish', desc: 'Release management (version, changelog, publish)' },
|
|
15
15
|
{ src: 'aios-bootstrap.md', name: '/aios-bootstrap', desc: 'Setup de projeto (greenfield, brownfield, team, GitHub)' },
|
|
16
16
|
{ src: 'aios-help.md', name: '/aios-help', desc: 'Guia de comandos AIOS (reference, busca, workflows)' },
|
|
17
|
-
// Design System Manager (@eximia-ventures/ds)
|
|
18
|
-
{ src: 'ds.md', name: '/ds', desc: 'Design System Manager — wizard central interativo' },
|
|
19
|
-
{ src: 'ds-pack.md', name: '/ds-pack', desc: 'Empacotar design system em .dspack' },
|
|
20
|
-
{ src: 'ds-install.md', name: '/ds-install', desc: 'Instalar um .dspack no projeto' },
|
|
21
|
-
{ src: 'ds-list.md', name: '/ds-list', desc: 'Listar design systems instalados' },
|
|
22
|
-
{ src: 'ds-apply.md', name: '/ds-apply', desc: 'Registrar DS ativo e gerar contexto para Brad Frost/@dev' },
|
|
23
17
|
];
|
|
24
18
|
|
|
25
19
|
async function installCore({ targetDir } = {}) {
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const { execSync } = require('child_process');
|
|
4
|
+
const logger = require('../utils/logger');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Pacotes externos compatíveis com o toolkit.
|
|
8
|
+
* Cada pacote é instalado via npm e gerencia suas próprias skills.
|
|
9
|
+
*/
|
|
10
|
+
const EXTERNAL_PACKAGES = [
|
|
11
|
+
{
|
|
12
|
+
package: '@eximia-ventures/ds',
|
|
13
|
+
name: 'Design System Manager',
|
|
14
|
+
desc: 'Gerenciar design systems (.dspack) — skills /ds, /ds-pack, /ds-install, /ds-list, /ds-apply'
|
|
15
|
+
}
|
|
16
|
+
];
|
|
17
|
+
|
|
18
|
+
async function installPackages({ packages, targetDir } = {}) {
|
|
19
|
+
const cwd = targetDir || process.cwd();
|
|
20
|
+
const toInstall = packages
|
|
21
|
+
? EXTERNAL_PACKAGES.filter(p => packages.includes(p.package))
|
|
22
|
+
: EXTERNAL_PACKAGES;
|
|
23
|
+
|
|
24
|
+
const results = [];
|
|
25
|
+
|
|
26
|
+
for (const pkg of toInstall) {
|
|
27
|
+
logger.dim(`Instalando ${pkg.package}...`);
|
|
28
|
+
try {
|
|
29
|
+
execSync(`npm install ${pkg.package}`, {
|
|
30
|
+
cwd,
|
|
31
|
+
stdio: 'inherit',
|
|
32
|
+
timeout: 120000
|
|
33
|
+
});
|
|
34
|
+
logger.success(`${pkg.package} instalado`);
|
|
35
|
+
results.push({ package: pkg.package, installed: true });
|
|
36
|
+
} catch (err) {
|
|
37
|
+
logger.warn(`Falha ao instalar ${pkg.package}: ${err.message}`);
|
|
38
|
+
results.push({ package: pkg.package, installed: false, error: err.message });
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return results;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
module.exports = { EXTERNAL_PACKAGES, installPackages };
|
package/assets/skill/ds-apply.md
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
# ds-apply
|
|
2
|
-
|
|
3
|
-
Integra o design system instalado ao projeto — registra como ativo e prepara o contexto para o Brad Frost e o @dev implementarem.
|
|
4
|
-
|
|
5
|
-
**Este skill NÃO modifica código do projeto.**
|
|
6
|
-
A aplicação real (tokens no tailwind, componentes no src/) é responsabilidade do Brad Frost (`design:design-system`) e do @dev.
|
|
7
|
-
|
|
8
|
-
## Ativação
|
|
9
|
-
|
|
10
|
-
Ativado via `/ds-apply` no Claude Code.
|
|
11
|
-
|
|
12
|
-
## O que faz
|
|
13
|
-
|
|
14
|
-
1. Define o DS como ativo em `design-systems/manifest.json`
|
|
15
|
-
2. Valida a estrutura do DS (tokens, componentes, metodologia)
|
|
16
|
-
3. Gera um resumo de contexto para o Brad Frost e o @dev
|
|
17
|
-
4. Informa os próximos passos
|
|
18
|
-
|
|
19
|
-
## Processo
|
|
20
|
-
|
|
21
|
-
### 1. Identificar DS
|
|
22
|
-
|
|
23
|
-
Se o usuário passou argumento (`/ds-apply eximia-default`), usar esse.
|
|
24
|
-
Se não, ler `design-systems/manifest.json` e listar instalados:
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
🎨 ds:apply — Integrar Design System
|
|
28
|
-
|
|
29
|
-
DSs instalados:
|
|
30
|
-
1. eximia-default v1.0.0 (ativo)
|
|
31
|
-
2. meu-ds v2.1.0
|
|
32
|
-
|
|
33
|
-
Qual integrar? (Enter para usar o ativo)
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### 2. Validar estrutura do DS
|
|
37
|
-
|
|
38
|
-
Verificar em `design-systems/{nome}/`:
|
|
39
|
-
- `manifest.json` existe e é válido
|
|
40
|
-
- Pasta `tokens/` ou arquivos de token presentes
|
|
41
|
-
- Estrutura Atomic Design presente (`atoms/`, `molecules/`, etc.) — se tiver componentes
|
|
42
|
-
|
|
43
|
-
Reportar o que foi encontrado:
|
|
44
|
-
```
|
|
45
|
-
Validando eximia-default...
|
|
46
|
-
✅ manifest.json — v1.0.0, Atomic Design
|
|
47
|
-
✅ tokens/ — 3 arquivo(s): tokens.json, tokens.css, tokens.tw.js
|
|
48
|
-
✅ atoms/ — 12 componente(s)
|
|
49
|
-
✅ molecules/ — 8 componente(s)
|
|
50
|
-
✅ organisms/ — 4 componente(s)
|
|
51
|
-
⚠️ templates/ — vazio
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### 3. Definir como ativo
|
|
55
|
-
|
|
56
|
-
Atualizar `design-systems/manifest.json`:
|
|
57
|
-
```json
|
|
58
|
-
{
|
|
59
|
-
"active": "eximia-default"
|
|
60
|
-
}
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### 4. Gerar contexto de handoff
|
|
64
|
-
|
|
65
|
-
Criar `design-systems/.ds-context.md` com as informações que o Brad Frost e o @dev precisam:
|
|
66
|
-
|
|
67
|
-
```markdown
|
|
68
|
-
# DS Ativo: eximia-default v1.0.0
|
|
69
|
-
|
|
70
|
-
## Localização
|
|
71
|
-
design-systems/eximia-default/
|
|
72
|
-
|
|
73
|
-
## Tokens disponíveis
|
|
74
|
-
- tokens/tokens.json — W3C DTCG format
|
|
75
|
-
- tokens/tokens.css — CSS custom properties
|
|
76
|
-
- tokens/tokens.tw.js — Tailwind config
|
|
77
|
-
|
|
78
|
-
## Componentes disponíveis
|
|
79
|
-
Atoms (12): Button, Input, Label, Badge, Icon, ...
|
|
80
|
-
Molecules (8): FormField, SearchBar, Card, ...
|
|
81
|
-
Organisms (4): Header, Sidebar, AuthForm, ...
|
|
82
|
-
Templates (0): —
|
|
83
|
-
|
|
84
|
-
## Metodologia
|
|
85
|
-
Atomic Design (Brad Frost)
|
|
86
|
-
|
|
87
|
-
## Para o Brad Frost (@design-system)
|
|
88
|
-
Use `design-systems/eximia-default/` como fonte de tokens e componentes.
|
|
89
|
-
Não gere tokens novos — reutilize os existentes.
|
|
90
|
-
|
|
91
|
-
## Para o @dev
|
|
92
|
-
Importe componentes de `design-systems/eximia-default/components/`.
|
|
93
|
-
Tokens CSS disponíveis em `design-systems/eximia-default/tokens/tokens.css`.
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
### 5. Confirmar integração
|
|
97
|
-
|
|
98
|
-
```
|
|
99
|
-
✅ Design System integrado!
|
|
100
|
-
|
|
101
|
-
DS ativo: eximia-default v1.0.0
|
|
102
|
-
Local: design-systems/eximia-default/
|
|
103
|
-
Contexto: design-systems/.ds-context.md
|
|
104
|
-
|
|
105
|
-
Próximos passos:
|
|
106
|
-
→ Brad Frost aplicará os tokens e componentes no projeto
|
|
107
|
-
→ @dev implementará os componentes conforme o DS
|
|
108
|
-
|
|
109
|
-
Para iniciar: @brad-frost *setup ou *build {componente}
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
## Regras
|
|
113
|
-
|
|
114
|
-
- NÃO copiar arquivos para `src/` ou qualquer pasta do projeto
|
|
115
|
-
- NÃO modificar `tailwind.config.*`, `package.json` ou qualquer arquivo de configuração do projeto
|
|
116
|
-
- NÃO instalar dependências
|
|
117
|
-
- Apenas registrar, validar e preparar contexto
|
|
118
|
-
- O arquivo `.ds-context.md` é o único output gerado fora de `design-systems/`
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
# ds-install
|
|
2
|
-
|
|
3
|
-
Instala um arquivo `.dspack` no projeto atual, extraindo seu conteúdo em `design-systems/`.
|
|
4
|
-
|
|
5
|
-
## Ativação
|
|
6
|
-
|
|
7
|
-
Ativado via `/ds-install {caminho}` no Claude Code.
|
|
8
|
-
|
|
9
|
-
## Processo
|
|
10
|
-
|
|
11
|
-
### 1. Identificar o arquivo
|
|
12
|
-
|
|
13
|
-
- **Com argumento**: `ds:install ./caminho/arquivo.dspack` — usar o caminho informado
|
|
14
|
-
- **Sem argumento**: listar arquivos `design-systems/*.dspack` e perguntar qual instalar
|
|
15
|
-
|
|
16
|
-
Se nenhum `.dspack` for encontrado, orientar o usuário a usar `ds:pack` ou obter um arquivo `.dspack`.
|
|
17
|
-
|
|
18
|
-
### 2. Validar o .dspack
|
|
19
|
-
|
|
20
|
-
Antes de extrair, verifique:
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
# Verificar se é um zip válido
|
|
24
|
-
unzip -t "{caminho-do-dspack}"
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
Verificações:
|
|
28
|
-
- O arquivo existe no caminho informado
|
|
29
|
-
- É um zip válido (unzip -t não retorna erro)
|
|
30
|
-
- Contém `manifest.json` na raiz (`unzip -l` mostra o índice)
|
|
31
|
-
- O `manifest.json` tem `name` e `version`
|
|
32
|
-
|
|
33
|
-
Se qualquer verificação falhar, avise o usuário com a causa e interrompa.
|
|
34
|
-
|
|
35
|
-
### 3. Verificar conflito
|
|
36
|
-
|
|
37
|
-
Leia `design-systems/manifest.json`. Se o DS já estiver na lista `installed`:
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
⚠️ {nome} v{versão-atual} já está instalado.
|
|
41
|
-
Substituir pela versão {versão-nova}? (s/n)
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
Se não, prosseguir.
|
|
45
|
-
|
|
46
|
-
### 4. Extrair
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
# Extrair para design-systems/{nome}/ a partir do caminho absoluto do .dspack
|
|
50
|
-
unzip -o "{caminho-absoluto-do-dspack}" -d "design-systems/{nome}/"
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### 5. Atualizar manifest.json do projeto
|
|
54
|
-
|
|
55
|
-
Leia `design-systems/manifest.json`, faça merge no array `installed` (não substitua), e salve:
|
|
56
|
-
|
|
57
|
-
```json
|
|
58
|
-
{
|
|
59
|
-
"version": "1.0.0",
|
|
60
|
-
"installed": [
|
|
61
|
-
{
|
|
62
|
-
"name": "{nome}",
|
|
63
|
-
"version": "{versão}",
|
|
64
|
-
"path": "design-systems/{nome}/",
|
|
65
|
-
"installed_at": "{ISO date atual}"
|
|
66
|
-
}
|
|
67
|
-
],
|
|
68
|
-
"active": "{nome}"
|
|
69
|
-
}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
> Se já havia outros DSs em `installed`, mantê-los. Apenas adicionar (ou atualizar) o novo.
|
|
73
|
-
> Definir `active` como o DS recém-instalado.
|
|
74
|
-
|
|
75
|
-
### 6. Confirmar
|
|
76
|
-
|
|
77
|
-
```
|
|
78
|
-
✅ Design System instalado!
|
|
79
|
-
|
|
80
|
-
Nome: {nome}
|
|
81
|
-
Versão: {versão}
|
|
82
|
-
Local: design-systems/{nome}/
|
|
83
|
-
Status: ativo
|
|
84
|
-
|
|
85
|
-
Próximo passo:
|
|
86
|
-
/ds-apply → aplicar tokens e componentes no projeto
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## Regras
|
|
90
|
-
|
|
91
|
-
- Sempre validar o zip antes de extrair
|
|
92
|
-
- Nunca sobrescrever instalação existente sem confirmação
|
|
93
|
-
- Fazer merge no array `installed`, nunca sobrescrever o manifest inteiro
|
|
94
|
-
- Definir o DS recém-instalado como `active` automaticamente
|
package/assets/skill/ds-list.md
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
# ds-list
|
|
2
|
-
|
|
3
|
-
Lista os design systems instalados e disponíveis no projeto atual.
|
|
4
|
-
|
|
5
|
-
## Ativação
|
|
6
|
-
|
|
7
|
-
Ativado via `/ds-list` no Claude Code.
|
|
8
|
-
|
|
9
|
-
## Processo
|
|
10
|
-
|
|
11
|
-
### 1. Verificar design-systems/
|
|
12
|
-
|
|
13
|
-
Se a pasta `design-systems/` não existir:
|
|
14
|
-
```
|
|
15
|
-
❌ design-systems/ não encontrado.
|
|
16
|
-
Execute: npm install @eximia-ventures/ds
|
|
17
|
-
```
|
|
18
|
-
Interromper.
|
|
19
|
-
|
|
20
|
-
### 2. Ler manifest.json
|
|
21
|
-
|
|
22
|
-
Leia `design-systems/manifest.json`.
|
|
23
|
-
|
|
24
|
-
Se não existir ou `installed` estiver vazio, pular para o passo 3.
|
|
25
|
-
|
|
26
|
-
### 3. Escanear .dspack disponíveis
|
|
27
|
-
|
|
28
|
-
Listar arquivos `design-systems/*.dspack` — estes estão disponíveis mas não instalados.
|
|
29
|
-
|
|
30
|
-
### 4. Exibir resultado
|
|
31
|
-
|
|
32
|
-
```
|
|
33
|
-
🎨 Design Systems — {nome-do-projeto}
|
|
34
|
-
|
|
35
|
-
Instalados:
|
|
36
|
-
✅ eximia-default v1.0.0 (ativo)
|
|
37
|
-
○ meu-ds v2.1.0
|
|
38
|
-
|
|
39
|
-
Disponíveis (não instalados):
|
|
40
|
-
📦 outro-ds.dspack
|
|
41
|
-
|
|
42
|
-
─────────────────────────────────
|
|
43
|
-
/ds-install {nome} → instalar
|
|
44
|
-
/ds-pack → empacotar um DS existente
|
|
45
|
-
/ds-apply → aplicar o DS ativo no projeto
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
Se não houver nada instalado nem disponível:
|
|
49
|
-
```
|
|
50
|
-
🎨 Design Systems — {nome-do-projeto}
|
|
51
|
-
|
|
52
|
-
Nenhum DS encontrado.
|
|
53
|
-
|
|
54
|
-
/ds-pack → empacotar um design system existente
|
|
55
|
-
/ds-install → instalar um arquivo .dspack
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Regras
|
|
59
|
-
|
|
60
|
-
- Marcar o DS ativo com `(ativo)`
|
|
61
|
-
- Mostrar `.dspack` disponíveis separadamente dos instalados
|
|
62
|
-
- Nome do projeto vem do `package.json` (campo `name`) ou do nome do diretório atual
|
package/assets/skill/ds-pack.md
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
# ds-pack
|
|
2
|
-
|
|
3
|
-
Empacota um design system existente em um arquivo `.dspack` (zip renomeado).
|
|
4
|
-
|
|
5
|
-
## Ativação
|
|
6
|
-
|
|
7
|
-
Ativado via `/ds-pack` no Claude Code.
|
|
8
|
-
|
|
9
|
-
## Processo
|
|
10
|
-
|
|
11
|
-
### 1. Coletar caminho
|
|
12
|
-
|
|
13
|
-
Pergunte ao usuário:
|
|
14
|
-
```
|
|
15
|
-
📦 ds:pack — Empacotar Design System
|
|
16
|
-
|
|
17
|
-
Informe o caminho do design system a empacotar:
|
|
18
|
-
(ex: ./src/design-system, ./tokens, ./ui)
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
Se o caminho não existir, avise e interrompa.
|
|
22
|
-
|
|
23
|
-
### 2. Escanear o diretório
|
|
24
|
-
|
|
25
|
-
Analise o diretório e identifique:
|
|
26
|
-
- **Tokens**: `tokens.json`, `tokens.yaml`, `*.css` com variáveis CSS, `tailwind.config.*`
|
|
27
|
-
- **Componentes**: `*.tsx`, `*.jsx`, `*.vue` dentro de `atoms/`, `molecules/`, `organisms/`, `templates/`
|
|
28
|
-
- **Documentação**: `README.md`, `CHANGELOG.md`, configs do Storybook
|
|
29
|
-
|
|
30
|
-
### 3. Gerar manifest.json
|
|
31
|
-
|
|
32
|
-
Crie `{caminho}/manifest.json` com o inventário real do scan:
|
|
33
|
-
|
|
34
|
-
```json
|
|
35
|
-
{
|
|
36
|
-
"name": "{nome-inferido-do-diretório}",
|
|
37
|
-
"version": "1.0.0",
|
|
38
|
-
"description": "",
|
|
39
|
-
"author": "",
|
|
40
|
-
"methodology": "atomic-design",
|
|
41
|
-
"tokens": {
|
|
42
|
-
"files": ["tokens/tokens.json"],
|
|
43
|
-
"format": "dtcg | css-variables | tailwind"
|
|
44
|
-
},
|
|
45
|
-
"components": {
|
|
46
|
-
"atoms": ["Button", "Input", "Label"],
|
|
47
|
-
"molecules": [],
|
|
48
|
-
"organisms": [],
|
|
49
|
-
"templates": []
|
|
50
|
-
},
|
|
51
|
-
"created_at": "{ISO date atual}"
|
|
52
|
-
}
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### 4. Compactar
|
|
56
|
-
|
|
57
|
-
Use caminhos absolutos para evitar ambiguidade:
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
zip -r "{caminho-absoluto-para-design-systems}/{nome}.dspack" "{caminho-absoluto-do-ds}/" \
|
|
61
|
-
-x "*/node_modules/*" \
|
|
62
|
-
-x "*/.git/*" \
|
|
63
|
-
-x "*/dist/*" \
|
|
64
|
-
-x "*/build/*" \
|
|
65
|
-
-x "*/.next/*"
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
> **Windows (sem zip nativo):** use PowerShell:
|
|
69
|
-
> ```powershell
|
|
70
|
-
> Compress-Archive -Path "{caminho}" -DestinationPath "design-systems/{nome}.dspack"
|
|
71
|
-
> ```
|
|
72
|
-
|
|
73
|
-
### 5. Confirmar
|
|
74
|
-
|
|
75
|
-
```
|
|
76
|
-
✅ Design system empacotado!
|
|
77
|
-
|
|
78
|
-
Arquivo: design-systems/{nome}.dspack
|
|
79
|
-
Tamanho: {tamanho}
|
|
80
|
-
Tokens: {N} arquivo(s)
|
|
81
|
-
Atoms: {N} | Molecules: {N} | Organisms: {N}
|
|
82
|
-
|
|
83
|
-
Para instalar em outro projeto:
|
|
84
|
-
/ds-install design-systems/{nome}.dspack
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
## Regras
|
|
88
|
-
|
|
89
|
-
- Nunca incluir `node_modules/`, `.git/`, `dist/`, `build/` no pacote
|
|
90
|
-
- Sempre gerar `manifest.json` antes de compactar
|
|
91
|
-
- Salvar o `.dspack` em `design-systems/` da raiz do projeto atual
|
|
92
|
-
- Se `design-systems/` não existir, criar antes de salvar
|
package/assets/skill/ds.md
DELETED
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
# ds
|
|
2
|
-
|
|
3
|
-
Assistente central do Design System Manager. Apresenta um menu interativo e guia o usuário pela operação desejada.
|
|
4
|
-
|
|
5
|
-
## Ativação
|
|
6
|
-
|
|
7
|
-
Ativado via `/ds` no Claude Code.
|
|
8
|
-
|
|
9
|
-
## Menu Principal
|
|
10
|
-
|
|
11
|
-
Ao ser ativado, sempre apresente:
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
🎨 Design System Manager
|
|
15
|
-
|
|
16
|
-
Projeto: {nome do package.json ou nome do diretório}
|
|
17
|
-
DS ativo: {nome do DS ativo em design-systems/manifest.json, ou "nenhum"}
|
|
18
|
-
|
|
19
|
-
O que deseja fazer?
|
|
20
|
-
|
|
21
|
-
1. 📦 Empacotar — empacotar um DS existente em .dspack
|
|
22
|
-
2. 📥 Instalar — instalar um .dspack neste projeto
|
|
23
|
-
3. 📋 Listar — ver DSs instalados e disponíveis
|
|
24
|
-
4. 🎨 Aplicar — aplicar o DS ativo no projeto
|
|
25
|
-
5. ❓ Ajuda — ver dicas e comandos diretos
|
|
26
|
-
|
|
27
|
-
0. Sair
|
|
28
|
-
|
|
29
|
-
Digite o número da opção:
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Opção 1 — Empacotar
|
|
33
|
-
|
|
34
|
-
Execute o fluxo completo de `/ds-pack`:
|
|
35
|
-
|
|
36
|
-
### Passo 1 — Caminho do DS
|
|
37
|
-
```
|
|
38
|
-
📦 Empacotar Design System
|
|
39
|
-
|
|
40
|
-
Informe o caminho do design system:
|
|
41
|
-
(ex: ./src/design-system, ./tokens, ./ui)
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### Passo 2 — Confirmar inventário
|
|
45
|
-
Escaneie o diretório e exiba o que foi encontrado:
|
|
46
|
-
```
|
|
47
|
-
Encontrado em {caminho}:
|
|
48
|
-
|
|
49
|
-
Tokens: {N} arquivo(s) — {lista}
|
|
50
|
-
Atoms: {N} componente(s)
|
|
51
|
-
Molecules: {N} componente(s)
|
|
52
|
-
Organisms: {N} componente(s)
|
|
53
|
-
|
|
54
|
-
Nome sugerido: {nome-inferido}
|
|
55
|
-
Versão: 1.0.0
|
|
56
|
-
|
|
57
|
-
Confirmar e empacotar? (s/n)
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### Passo 3 — Empacotar e salvar
|
|
61
|
-
```bash
|
|
62
|
-
zip -r "design-systems/{nome}.dspack" "{caminho-absoluto}/" \
|
|
63
|
-
-x "*/node_modules/*" -x "*/.git/*" -x "*/dist/*" -x "*/build/*"
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### Resultado
|
|
67
|
-
```
|
|
68
|
-
✅ Empacotado!
|
|
69
|
-
|
|
70
|
-
design-systems/{nome}.dspack — {tamanho}
|
|
71
|
-
|
|
72
|
-
Próximo passo:
|
|
73
|
-
2 → Instalar em outro projeto
|
|
74
|
-
0 → Sair
|
|
75
|
-
|
|
76
|
-
Digite:
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
---
|
|
80
|
-
|
|
81
|
-
## Opção 2 — Instalar
|
|
82
|
-
|
|
83
|
-
Execute o fluxo completo de `/ds-install`:
|
|
84
|
-
|
|
85
|
-
### Passo 1 — Selecionar arquivo
|
|
86
|
-
Escaneie `design-systems/*.dspack` e liste:
|
|
87
|
-
```
|
|
88
|
-
📥 Instalar Design System
|
|
89
|
-
|
|
90
|
-
Arquivos disponíveis:
|
|
91
|
-
1. eximia-default.dspack
|
|
92
|
-
2. meu-ds.dspack
|
|
93
|
-
3. Informar outro caminho...
|
|
94
|
-
|
|
95
|
-
Selecione:
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### Passo 2 — Validar
|
|
99
|
-
```
|
|
100
|
-
Validando {nome}.dspack...
|
|
101
|
-
✅ Arquivo válido
|
|
102
|
-
✅ manifest.json encontrado
|
|
103
|
-
Nome: {nome} | Versão: {versão}
|
|
104
|
-
|
|
105
|
-
Instalar? (s/n)
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### Passo 3 — Extrair e atualizar manifest
|
|
109
|
-
```bash
|
|
110
|
-
unzip -o "{caminho-absoluto}.dspack" -d "design-systems/{nome}/"
|
|
111
|
-
```
|
|
112
|
-
Atualizar `design-systems/manifest.json` fazendo merge no array `installed`.
|
|
113
|
-
|
|
114
|
-
### Resultado
|
|
115
|
-
```
|
|
116
|
-
✅ Instalado!
|
|
117
|
-
|
|
118
|
-
{nome} v{versão} — ativo
|
|
119
|
-
|
|
120
|
-
Próximo passo:
|
|
121
|
-
4 → Aplicar no projeto
|
|
122
|
-
0 → Sair
|
|
123
|
-
|
|
124
|
-
Digite:
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## Opção 3 — Listar
|
|
130
|
-
|
|
131
|
-
Execute o fluxo de `/ds-list` e exiba:
|
|
132
|
-
|
|
133
|
-
```
|
|
134
|
-
📋 Design Systems — {projeto}
|
|
135
|
-
|
|
136
|
-
Instalados:
|
|
137
|
-
✅ eximia-default v1.0.0 (ativo)
|
|
138
|
-
○ meu-ds v2.1.0
|
|
139
|
-
|
|
140
|
-
Disponíveis para instalar:
|
|
141
|
-
📦 outro-ds.dspack
|
|
142
|
-
|
|
143
|
-
─────────────────────────
|
|
144
|
-
1 → Empacotar 2 → Instalar 4 → Aplicar 0 → Sair
|
|
145
|
-
|
|
146
|
-
Digite:
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
---
|
|
150
|
-
|
|
151
|
-
## Opção 4 — Aplicar
|
|
152
|
-
|
|
153
|
-
Execute o fluxo completo de `/ds-apply`:
|
|
154
|
-
|
|
155
|
-
### Passo 1 — Verificar DS ativo
|
|
156
|
-
Ler `design-systems/manifest.json → active`.
|
|
157
|
-
Se nenhum ativo, mostrar opção 3 antes de continuar.
|
|
158
|
-
|
|
159
|
-
### Passo 2 — Detectar stack (silencioso)
|
|
160
|
-
Antes de perguntar qualquer coisa, leia `package.json` e a estrutura de diretórios.
|
|
161
|
-
|
|
162
|
-
### Passo 3 — Wizard contextual
|
|
163
|
-
```
|
|
164
|
-
🎨 Aplicar DS — {nome} v{versão}
|
|
165
|
-
|
|
166
|
-
Stack detectada: {framework} + {css-approach}
|
|
167
|
-
Componentes: {pasta-detectada}
|
|
168
|
-
|
|
169
|
-
O que aplicar?
|
|
170
|
-
1. Apenas tokens ({formato} → {arquivo-destino})
|
|
171
|
-
2. Apenas componentes ({N} atoms, {N} molecules, {N} organisms)
|
|
172
|
-
3. Tudo
|
|
173
|
-
4. Interativo (arquivo por arquivo)
|
|
174
|
-
|
|
175
|
-
Selecione:
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
### Passo 4 — Preview antes de aplicar
|
|
179
|
-
```
|
|
180
|
-
Será aplicado:
|
|
181
|
-
|
|
182
|
-
Tokens:
|
|
183
|
-
→ {arquivo-destino} {novo | mesclar com existente}
|
|
184
|
-
|
|
185
|
-
Componentes:
|
|
186
|
-
→ {pasta}/atoms/ ({N} arquivos)
|
|
187
|
-
→ {pasta}/molecules/ ({N} arquivos)
|
|
188
|
-
|
|
189
|
-
Confirmar? (s/n)
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
### Passo 5 — Aplicar e confirmar
|
|
193
|
-
Executar. Se conflito de arquivo:
|
|
194
|
-
```
|
|
195
|
-
⚠️ {arquivo} já existe.
|
|
196
|
-
Sobrescrever? (s = este | t = todos | n = pular)
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
### Resultado
|
|
200
|
-
```
|
|
201
|
-
✅ DS aplicado!
|
|
202
|
-
|
|
203
|
-
{N} token(s) → {destino}
|
|
204
|
-
{N} componente(s) → {pasta}
|
|
205
|
-
|
|
206
|
-
⚠️ Revise os imports antes de commitar.
|
|
207
|
-
|
|
208
|
-
0 → Sair
|
|
209
|
-
|
|
210
|
-
Digite:
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
---
|
|
214
|
-
|
|
215
|
-
## Opção 5 — Ajuda
|
|
216
|
-
|
|
217
|
-
```
|
|
218
|
-
❓ Design System Manager — Ajuda
|
|
219
|
-
|
|
220
|
-
Comandos diretos (atalhos):
|
|
221
|
-
/ds-pack → empacotar diretamente
|
|
222
|
-
/ds-install → instalar diretamente
|
|
223
|
-
/ds-list → listar diretamente
|
|
224
|
-
/ds-apply → aplicar diretamente
|
|
225
|
-
|
|
226
|
-
Formato .dspack:
|
|
227
|
-
→ Arquivo zip com manifest.json na raiz
|
|
228
|
-
→ Estrutura Atomic Design (atoms/molecules/organisms/templates)
|
|
229
|
-
→ Tokens em DTCG JSON, CSS vars ou Tailwind config
|
|
230
|
-
|
|
231
|
-
Pasta design-systems/:
|
|
232
|
-
→ Ignorada pelo git (cada dev instala localmente)
|
|
233
|
-
→ manifest.json rastreia DSs instalados e DS ativo
|
|
234
|
-
|
|
235
|
-
0 → Voltar ao menu
|
|
236
|
-
|
|
237
|
-
Digite:
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
---
|
|
241
|
-
|
|
242
|
-
## Regras Gerais
|
|
243
|
-
|
|
244
|
-
- Sempre ler `design-systems/manifest.json` ao iniciar para exibir estado atual
|
|
245
|
-
- Após cada operação, sempre oferecer próximo passo sugerido ou retorno ao menu
|
|
246
|
-
- Nunca sobrescrever arquivos sem confirmação explícita
|
|
247
|
-
- Detectar stack **antes** de exibir opções de aplicação
|
|
248
|
-
- Se `design-systems/` não existir, orientar: `npm install @eximia-ventures/ds`
|