prjct-cli 0.35.3 → 0.36.1
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/CHANGELOG.md +43 -0
- package/README.md +63 -618
- package/bin/prjct.ts +116 -17
- package/core/cli/start.ts +387 -0
- package/core/commands/analysis.ts +58 -32
- package/core/commands/command-data.ts +11 -50
- package/core/commands/commands.ts +18 -21
- package/core/commands/context.ts +238 -0
- package/core/commands/register.ts +7 -5
- package/core/commands/setup.ts +1 -17
- package/core/index.ts +103 -39
- package/core/infrastructure/ai-provider.ts +312 -0
- package/core/infrastructure/command-installer.ts +49 -5
- package/core/infrastructure/editors-config.ts +20 -6
- package/core/infrastructure/setup.ts +227 -62
- package/core/services/index.ts +2 -0
- package/core/services/skill-service.ts +52 -16
- package/core/services/sync-service.ts +1080 -0
- package/core/types/commands.ts +0 -12
- package/core/types/index.ts +12 -1
- package/core/types/provider.ts +110 -0
- package/core/utils/branding.ts +20 -3
- package/dist/bin/prjct.mjs +1053 -1426
- package/dist/core/infrastructure/command-installer.js +33 -2
- package/dist/core/infrastructure/editors-config.js +13 -3
- package/dist/core/infrastructure/setup.js +293 -73
- package/package.json +10 -16
- package/scripts/postinstall.js +17 -119
- package/templates/agentic/agent-routing.md +22 -88
- package/templates/agentic/agents/uxui.md +42 -197
- package/templates/agentic/context-filtering.md +14 -56
- package/templates/agentic/orchestrator.md +26 -302
- package/templates/agentic/skill-integration.md +37 -289
- package/templates/agentic/subagent-generation.md +31 -104
- package/templates/agentic/task-fragmentation.md +39 -273
- package/templates/agents/AGENTS.md +33 -181
- package/templates/commands/bug.md +22 -520
- package/templates/commands/dash.md +26 -161
- package/templates/commands/done.md +19 -250
- package/templates/commands/enrich.md +21 -732
- package/templates/commands/idea.md +18 -160
- package/templates/commands/init.md +20 -209
- package/templates/commands/merge.md +21 -185
- package/templates/commands/next.md +21 -103
- package/templates/commands/p.md +1 -1
- package/templates/commands/p.toml +37 -0
- package/templates/commands/pause.md +21 -272
- package/templates/commands/resume.md +18 -411
- package/templates/commands/setup.md +0 -1
- package/templates/commands/ship.md +30 -627
- package/templates/commands/sync.md +11 -1448
- package/templates/commands/task.md +17 -439
- package/templates/commands/test.md +30 -259
- package/templates/global/CLAUDE.md +33 -1
- package/templates/global/GEMINI.md +265 -0
- package/templates/global/STORAGE-SPEC.md +256 -0
- package/templates/global/docs/agents.md +88 -0
- package/templates/global/docs/architecture.md +103 -0
- package/templates/global/docs/commands.md +96 -0
- package/templates/global/docs/validation.md +95 -0
- package/CLAUDE.md +0 -211
- package/packages/shared/package.json +0 -29
- package/packages/shared/src/index.ts +0 -10
- package/packages/shared/src/schemas.ts +0 -124
- package/packages/shared/src/types.ts +0 -187
- package/packages/shared/src/unified.ts +0 -174
- package/packages/shared/src/utils.ts +0 -148
- package/packages/shared/tsconfig.json +0 -18
package/scripts/postinstall.js
CHANGED
|
@@ -1,136 +1,34 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* postinstall - Minimal
|
|
4
|
+
* postinstall - Minimal setup message
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
6
|
+
* NOTE: postinstall often doesn't run (npm quirks, --ignore-scripts, etc.)
|
|
7
|
+
* The reliable setup path is `prjct start` which users run manually.
|
|
8
|
+
*
|
|
9
|
+
* This script just shows a helpful message.
|
|
9
10
|
*/
|
|
10
11
|
|
|
11
12
|
const fs = require('fs')
|
|
12
13
|
const path = require('path')
|
|
13
|
-
const os = require('os')
|
|
14
14
|
|
|
15
15
|
const ROOT = path.resolve(__dirname, '..')
|
|
16
|
-
const HOME = os.homedir()
|
|
17
|
-
const CLAUDE_DIR = path.join(HOME, '.claude')
|
|
18
|
-
const COMMANDS_DIR = path.join(CLAUDE_DIR, 'commands')
|
|
19
|
-
|
|
20
|
-
// Read version from package.json
|
|
21
16
|
const pkg = JSON.parse(fs.readFileSync(path.join(ROOT, 'package.json'), 'utf-8'))
|
|
22
17
|
const VERSION = pkg.version
|
|
23
18
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const pmdSrc = path.join(ROOT, 'templates', 'commands', 'p.md')
|
|
31
|
-
const pmdDest = path.join(COMMANDS_DIR, 'p.md')
|
|
32
|
-
|
|
33
|
-
if (fs.existsSync(pmdSrc)) {
|
|
34
|
-
fs.copyFileSync(pmdSrc, pmdDest)
|
|
35
|
-
console.log(' \u2713 p.md router installed')
|
|
36
|
-
} else {
|
|
37
|
-
console.log(' ! p.md not found in package')
|
|
38
|
-
}
|
|
39
|
-
} catch (error) {
|
|
40
|
-
console.log(' ! Could not install p.md:', error.message)
|
|
41
|
-
console.log(' Run: npx prjct-cli setup')
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// 2. Install individual commands as separate skills (p.task, p.sync, etc.)
|
|
45
|
-
try {
|
|
46
|
-
const commandsDir = path.join(ROOT, 'templates', 'commands')
|
|
47
|
-
const commands = fs.readdirSync(commandsDir).filter(f => f.endsWith('.md') && f !== 'p.md')
|
|
48
|
-
|
|
49
|
-
let installed = 0
|
|
50
|
-
for (const cmd of commands) {
|
|
51
|
-
const src = path.join(commandsDir, cmd)
|
|
52
|
-
const cmdName = cmd.replace('.md', '')
|
|
53
|
-
const dest = path.join(COMMANDS_DIR, `p.${cmdName}.md`)
|
|
54
|
-
|
|
55
|
-
try {
|
|
56
|
-
fs.copyFileSync(src, dest)
|
|
57
|
-
installed++
|
|
58
|
-
} catch {
|
|
59
|
-
// Skip files that fail to copy
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
console.log(` \u2713 ${installed} individual commands installed (/p.task, /p.sync, etc.)`)
|
|
64
|
-
} catch (error) {
|
|
65
|
-
console.log(' ! Could not install individual commands:', error.message)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// 3. Statusline (best-effort, not critical)
|
|
69
|
-
try {
|
|
70
|
-
const STATUSLINE_SRC = path.join(ROOT, 'assets', 'statusline')
|
|
71
|
-
const STATUSLINE_DEST = path.join(HOME, '.prjct-cli', 'statusline')
|
|
72
|
-
|
|
73
|
-
if (fs.existsSync(STATUSLINE_SRC)) {
|
|
74
|
-
// Create dirs
|
|
75
|
-
fs.mkdirSync(path.join(STATUSLINE_DEST, 'lib'), { recursive: true })
|
|
76
|
-
fs.mkdirSync(path.join(STATUSLINE_DEST, 'components'), { recursive: true })
|
|
77
|
-
fs.mkdirSync(path.join(STATUSLINE_DEST, 'themes'), { recursive: true })
|
|
78
|
-
|
|
79
|
-
// Copy main script with version patched
|
|
80
|
-
const mainScript = path.join(STATUSLINE_SRC, 'statusline.sh')
|
|
81
|
-
if (fs.existsSync(mainScript)) {
|
|
82
|
-
let content = fs.readFileSync(mainScript, 'utf-8')
|
|
83
|
-
content = content.replace(/CLI_VERSION="[^"]*"/, `CLI_VERSION="${VERSION}"`)
|
|
84
|
-
fs.writeFileSync(path.join(STATUSLINE_DEST, 'statusline.sh'), content, { mode: 0o755 })
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
// Copy subdirs
|
|
88
|
-
for (const subdir of ['lib', 'components', 'themes']) {
|
|
89
|
-
const srcDir = path.join(STATUSLINE_SRC, subdir)
|
|
90
|
-
if (fs.existsSync(srcDir)) {
|
|
91
|
-
for (const f of fs.readdirSync(srcDir)) {
|
|
92
|
-
fs.copyFileSync(
|
|
93
|
-
path.join(srcDir, f),
|
|
94
|
-
path.join(STATUSLINE_DEST, subdir, f)
|
|
95
|
-
)
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Default config (only if not exists)
|
|
101
|
-
const configSrc = path.join(STATUSLINE_SRC, 'default-config.json')
|
|
102
|
-
const configDest = path.join(STATUSLINE_DEST, 'config.json')
|
|
103
|
-
if (fs.existsSync(configSrc) && !fs.existsSync(configDest)) {
|
|
104
|
-
fs.copyFileSync(configSrc, configDest)
|
|
105
|
-
}
|
|
19
|
+
// Colors
|
|
20
|
+
const CYAN = '\x1b[36m'
|
|
21
|
+
const GREEN = '\x1b[32m'
|
|
22
|
+
const DIM = '\x1b[2m'
|
|
23
|
+
const BOLD = '\x1b[1m'
|
|
24
|
+
const RESET = '\x1b[0m'
|
|
106
25
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
const targetPath = path.join(STATUSLINE_DEST, 'statusline.sh')
|
|
110
|
-
try {
|
|
111
|
-
if (fs.existsSync(symlinkPath)) fs.unlinkSync(symlinkPath)
|
|
112
|
-
if (fs.existsSync(targetPath)) fs.symlinkSync(targetPath, symlinkPath)
|
|
113
|
-
} catch {
|
|
114
|
-
// Symlink failed, copy instead
|
|
115
|
-
if (fs.existsSync(targetPath)) {
|
|
116
|
-
fs.copyFileSync(targetPath, symlinkPath)
|
|
117
|
-
fs.chmodSync(symlinkPath, 0o755)
|
|
118
|
-
}
|
|
119
|
-
}
|
|
26
|
+
console.log(`
|
|
27
|
+
${CYAN}${BOLD} prjct${RESET} ${DIM}v${VERSION}${RESET}
|
|
120
28
|
|
|
121
|
-
|
|
122
|
-
const settingsPath = path.join(CLAUDE_DIR, 'settings.json')
|
|
123
|
-
let settings = {}
|
|
124
|
-
if (fs.existsSync(settingsPath)) {
|
|
125
|
-
try { settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8')) } catch {}
|
|
126
|
-
}
|
|
127
|
-
settings.statusLine = { type: 'command', command: symlinkPath }
|
|
128
|
-
fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2))
|
|
29
|
+
${GREEN}✓${RESET} Installed successfully!
|
|
129
30
|
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
} catch {
|
|
133
|
-
// Statusline is optional, don't fail
|
|
134
|
-
}
|
|
31
|
+
${BOLD}Next step:${RESET} Run ${CYAN}prjct start${RESET} to configure your AI providers.
|
|
135
32
|
|
|
136
|
-
|
|
33
|
+
${DIM}Supports: Claude Code, Gemini CLI, or both${RESET}
|
|
34
|
+
`)
|
|
@@ -1,111 +1,45 @@
|
|
|
1
1
|
---
|
|
2
2
|
allowed-tools: [Read]
|
|
3
|
-
description: 'Determine which agent should handle a task - Claude decides'
|
|
4
3
|
---
|
|
5
4
|
|
|
6
|
-
# Agent Routing
|
|
5
|
+
# Agent Routing
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
Determine best agent for a task.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
## Process
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
1. **Understand task**: What files? What work? What knowledge?
|
|
12
|
+
2. **Read project context**: Technologies, structure, patterns
|
|
13
|
+
3. **Match to agent**: Based on analysis, not assumptions
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
## Agent Types
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
| Type | Domain |
|
|
18
|
+
|------|--------|
|
|
19
|
+
| Frontend/UX | UI components, styling |
|
|
20
|
+
| Backend | API, server logic |
|
|
21
|
+
| Database | Schema, queries, migrations |
|
|
22
|
+
| DevOps/QA | Testing, CI/CD |
|
|
23
|
+
| Full-stack | Cross-cutting concerns |
|
|
19
24
|
|
|
20
|
-
##
|
|
21
|
-
|
|
22
|
-
If project analysis exists, read it to understand:
|
|
23
|
-
|
|
24
|
-
- What technologies are actually used
|
|
25
|
-
- How the project is structured
|
|
26
|
-
- What patterns are established
|
|
27
|
-
|
|
28
|
-
## Step 3: Match Task to Agent
|
|
29
|
-
|
|
30
|
-
Based on your analysis, determine which agent is best suited:
|
|
31
|
-
|
|
32
|
-
**DO NOT assume:**
|
|
33
|
-
- "React" = frontend agent
|
|
34
|
-
- "Express" = backend agent
|
|
35
|
-
- "Database" = database agent
|
|
36
|
-
|
|
37
|
-
**DO analyze:**
|
|
38
|
-
- What the task actually requires
|
|
39
|
-
- What files will be touched
|
|
40
|
-
- What expertise is needed
|
|
41
|
-
|
|
42
|
-
## Available Agent Types
|
|
43
|
-
|
|
44
|
-
Consider these agent specializations:
|
|
45
|
-
|
|
46
|
-
- **Coordinator**: High-level planning, task breakdown
|
|
47
|
-
- **Frontend/UX**: UI components, user experience, styling
|
|
48
|
-
- **Backend**: API endpoints, server logic, business rules
|
|
49
|
-
- **Database**: Schema design, queries, migrations
|
|
50
|
-
- **DevOps/QA**: Testing, CI/CD, deployment, infrastructure
|
|
51
|
-
- **Full-stack**: Cross-cutting concerns, multiple layers
|
|
52
|
-
|
|
53
|
-
## Decision Process
|
|
54
|
-
|
|
55
|
-
1. Read task description
|
|
56
|
-
2. Identify primary area of work
|
|
57
|
-
3. Consider secondary areas
|
|
58
|
-
4. Choose agent with best expertise match
|
|
59
|
-
|
|
60
|
-
## How to Invoke (EFFICIENT)
|
|
61
|
-
|
|
62
|
-
After deciding the best agent, **delegate via Task tool with REFERENCE, not content**:
|
|
25
|
+
## Delegation
|
|
63
26
|
|
|
64
27
|
```
|
|
65
28
|
Task(
|
|
66
29
|
subagent_type: 'general-purpose',
|
|
67
30
|
prompt: '
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
## Task
|
|
72
|
-
{task description}
|
|
73
|
-
|
|
74
|
-
## Context
|
|
75
|
-
- Project: {projectPath}
|
|
76
|
-
- Files affected: {file list if known}
|
|
77
|
-
|
|
78
|
-
## Flow
|
|
79
|
-
1. Read agent file FIRST
|
|
80
|
-
2. Apply agent expertise and patterns
|
|
81
|
-
3. Execute task following agent guidelines
|
|
82
|
-
4. Return results
|
|
31
|
+
Read: ~/.prjct-cli/projects/{projectId}/agents/{agent}.md
|
|
32
|
+
Task: {description}
|
|
33
|
+
Execute using agent patterns.
|
|
83
34
|
'
|
|
84
35
|
)
|
|
85
36
|
```
|
|
86
37
|
|
|
87
|
-
|
|
38
|
+
**Pass PATH, not CONTENT** - subagent reads what it needs.
|
|
88
39
|
|
|
89
|
-
|
|
90
|
-
|----------|-------------|-------|
|
|
91
|
-
| ❌ Inject content | 3-5KB | Bloats context, increases hallucinations |
|
|
92
|
-
| ✅ Pass reference | ~200 bytes | Subagent reads what it needs |
|
|
93
|
-
|
|
94
|
-
**CRITICAL:** The subagent reads the agent file itself. You do NOT need to read and inject the content.
|
|
95
|
-
|
|
96
|
-
## Output (After Delegation)
|
|
97
|
-
|
|
98
|
-
After Task tool returns, summarize:
|
|
40
|
+
## Output
|
|
99
41
|
|
|
100
42
|
```
|
|
101
|
-
✅ Delegated to: {agent
|
|
102
|
-
Result: {
|
|
43
|
+
✅ Delegated to: {agent}
|
|
44
|
+
Result: {summary}
|
|
103
45
|
```
|
|
104
|
-
|
|
105
|
-
## Rules
|
|
106
|
-
|
|
107
|
-
- **Task-driven, not tech-driven** - Focus on what needs to be done
|
|
108
|
-
- **Context matters** - Same tech can mean different things in different projects
|
|
109
|
-
- **Be flexible** - One project's "backend" might be another's "full-stack"
|
|
110
|
-
- **Pass PATH, not CONTENT** - Let subagent read the agent file
|
|
111
|
-
- **Explain your reasoning** - Don't just pick, justify
|
|
@@ -1,218 +1,63 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: uxui
|
|
3
|
-
description: UX/UI
|
|
3
|
+
description: UX/UI Specialist. Use PROACTIVELY for interfaces. Priority: UX > UI.
|
|
4
4
|
tools: Read, Write, Glob, Grep
|
|
5
5
|
model: sonnet
|
|
6
6
|
skills: [frontend-design]
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
#
|
|
9
|
+
# UX/UI Design Specialist
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
**Prioridad: UX > UI** - La experiencia es más importante que lo visual.
|
|
11
|
+
**Priority: UX > UI** - Experience over aesthetics.
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
## META-INSTRUCTION
|
|
17
|
-
|
|
18
|
-
You are an intelligent agent responsible for UX/UI design.
|
|
19
|
-
Your mission is to ensure every interface is:
|
|
20
|
-
1. **Usable** - Users understand what to do immediately
|
|
21
|
-
2. **Accessible** - Works for everyone (a11y compliant)
|
|
22
|
-
3. **Distinctive** - Avoids generic "AI slop" aesthetics
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
## PARTE 1: UX - Experiencia de Usuario
|
|
27
|
-
|
|
28
|
-
### 1.1 Antes de Diseñar NADA
|
|
29
|
-
|
|
30
|
-
**Preguntas obligatorias:**
|
|
31
|
-
1. ¿Quién es el usuario? (persona, contexto, habilidades)
|
|
32
|
-
2. ¿Qué problema resuelve? (pain point específico)
|
|
33
|
-
3. ¿Cuál es el flujo crítico? (happy path)
|
|
34
|
-
4. ¿Qué puede salir mal? (edge cases, errores)
|
|
35
|
-
|
|
36
|
-
### 1.2 Principios UX Fundamentales
|
|
37
|
-
|
|
38
|
-
#### Claridad > Creatividad
|
|
39
|
-
- El usuario debe entender qué hacer en < 3 segundos
|
|
40
|
-
- Evitar ambigüedad en acciones principales
|
|
41
|
-
- Labels claros, no cleverness
|
|
42
|
-
|
|
43
|
-
#### Feedback Inmediato
|
|
44
|
-
- Cada acción tiene respuesta visual
|
|
45
|
-
- Loading states para operaciones > 100ms
|
|
46
|
-
- Confirmaciones para acciones destructivas
|
|
47
|
-
|
|
48
|
-
#### Reducir Fricción
|
|
49
|
-
- Mínimos pasos para completar tarea
|
|
50
|
-
- Defaults inteligentes
|
|
51
|
-
- Autocompletar cuando sea posible
|
|
52
|
-
- Remember user preferences
|
|
53
|
-
|
|
54
|
-
#### Manejo de Errores
|
|
55
|
-
- Mensajes de error claros y actionables
|
|
56
|
-
- Prevenir errores > Recuperarse de errores
|
|
57
|
-
- Validación inline, no al submit
|
|
58
|
-
|
|
59
|
-
#### Accesibilidad (A11y)
|
|
60
|
-
- Contrast ratio mínimo 4.5:1
|
|
61
|
-
- Keyboard navigation completa
|
|
62
|
-
- Screen reader compatible
|
|
63
|
-
- Touch targets mínimo 44x44px (mobile)
|
|
64
|
-
|
|
65
|
-
### 1.3 Patrones UX por Contexto
|
|
66
|
-
|
|
67
|
-
#### Forms
|
|
68
|
-
- Single column layout
|
|
69
|
-
- Inline validation
|
|
70
|
-
- Clear labels (no placeholder-only)
|
|
71
|
-
- Progress indicator si multi-step
|
|
72
|
-
|
|
73
|
-
#### Navigation
|
|
74
|
-
- Max 7±2 items en nav principal
|
|
75
|
-
- Breadcrumbs para deep hierarchy
|
|
76
|
-
- Current location siempre visible
|
|
77
|
-
|
|
78
|
-
#### Mobile
|
|
79
|
-
- Thumb-zone friendly actions
|
|
80
|
-
- Bottom nav para acciones frecuentes
|
|
81
|
-
- Swipe gestures naturales
|
|
82
|
-
- Pull-to-refresh donde aplique
|
|
83
|
-
|
|
84
|
-
---
|
|
85
|
-
|
|
86
|
-
## PARTE 2: UI - Diseño Visual
|
|
13
|
+
## UX Principles
|
|
87
14
|
|
|
88
|
-
###
|
|
15
|
+
### Before Designing
|
|
16
|
+
1. Who is the user?
|
|
17
|
+
2. What problem does it solve?
|
|
18
|
+
3. What's the happy path?
|
|
19
|
+
4. What can go wrong?
|
|
89
20
|
|
|
90
|
-
|
|
21
|
+
### Core Rules
|
|
22
|
+
- Clarity > Creativity (understand in < 3 sec)
|
|
23
|
+
- Immediate feedback for every action
|
|
24
|
+
- Minimize friction (smart defaults, autocomplete)
|
|
25
|
+
- Clear, actionable error messages
|
|
26
|
+
- Accessibility: 4.5:1 contrast, keyboard nav, 44px touch targets
|
|
91
27
|
|
|
92
|
-
|
|
93
|
-
|----------|-------------|
|
|
94
|
-
| Minimal | Herramientas productividad, B2B |
|
|
95
|
-
| Bold/Maximalist | Entretenimiento, creativos |
|
|
96
|
-
| Soft/Organic | Wellness, lifestyle |
|
|
97
|
-
| Brutalist | Tech startups, developer tools |
|
|
98
|
-
| Luxury | Finance, premium products |
|
|
99
|
-
| Playful | Consumer apps, gaming |
|
|
100
|
-
| Editorial | Content-heavy, news |
|
|
28
|
+
## UI Guidelines
|
|
101
29
|
|
|
102
|
-
###
|
|
30
|
+
### Typography (avoid AI slop)
|
|
31
|
+
**USE**: Clash Display, Cabinet Grotesk, Satoshi, Geist
|
|
32
|
+
**AVOID**: Inter, Space Grotesk, Roboto, Poppins
|
|
103
33
|
|
|
104
|
-
|
|
105
|
-
-
|
|
106
|
-
|
|
107
|
-
- Serif accent: Fraunces, Instrument Serif
|
|
34
|
+
### Color
|
|
35
|
+
60-30-10 framework: dominant, secondary, accent
|
|
36
|
+
**AVOID**: Generic purple/blue gradients
|
|
108
37
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
38
|
+
### Animation
|
|
39
|
+
**USE**: Staggered entrances, hover micro-motion, skeleton loaders
|
|
40
|
+
**AVOID**: Purposeless animation, excessive bounces
|
|
112
41
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
**Framework 60-30-10:**
|
|
116
|
-
- 1 color dominante (60%)
|
|
117
|
-
- 1 color secundario (30%)
|
|
118
|
-
- 1 color accent (10%)
|
|
119
|
-
- Usar CSS variables para tema
|
|
120
|
-
|
|
121
|
-
**EVITAR:**
|
|
122
|
-
- Purple/blue gradients genéricos
|
|
123
|
-
- Paletas sin personalidad
|
|
124
|
-
- Demasiados colores
|
|
125
|
-
|
|
126
|
-
### 2.4 Animación
|
|
127
|
-
|
|
128
|
-
**High Impact (usar):**
|
|
129
|
-
- Staggered entrance animations
|
|
130
|
-
- Page transitions suaves
|
|
131
|
-
- Hover states con micro-motion
|
|
132
|
-
- Skeleton loaders
|
|
133
|
-
|
|
134
|
-
**Low Impact (evitar):**
|
|
135
|
-
- Animaciones sin propósito
|
|
136
|
-
- Bounces excesivos
|
|
137
|
-
- Todo animándose a la vez
|
|
138
|
-
|
|
139
|
-
**Herramientas:**
|
|
140
|
-
- Web: CSS animations, Framer Motion
|
|
141
|
-
- Mobile: React Native Animated, Lottie
|
|
142
|
-
|
|
143
|
-
### 2.5 Layout
|
|
144
|
-
|
|
145
|
-
**EXPLORAR:**
|
|
146
|
-
- Bento grids
|
|
147
|
-
- Overlapping elements
|
|
148
|
-
- Asymmetric compositions
|
|
149
|
-
- Generous whitespace
|
|
150
|
-
|
|
151
|
-
**EVITAR:**
|
|
152
|
-
- Todo centrado uniformemente
|
|
153
|
-
- Spacing uniforme sin jerarquía
|
|
154
|
-
- Layouts predecibles y genéricos
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
## PARTE 3: Checklist de Calidad
|
|
159
|
-
|
|
160
|
-
### UX Checklist (OBLIGATORIO)
|
|
161
|
-
- [ ] ¿El usuario entiende qué hacer inmediatamente?
|
|
162
|
-
- [ ] ¿Cada acción tiene feedback visual?
|
|
163
|
-
- [ ] ¿Los errores son claros y recuperables?
|
|
164
|
-
- [ ] ¿Funciona con teclado?
|
|
165
|
-
- [ ] ¿Contrast ratio >= 4.5:1?
|
|
166
|
-
- [ ] ¿Touch targets >= 44px? (mobile)
|
|
167
|
-
|
|
168
|
-
### UI Checklist
|
|
169
|
-
- [ ] ¿Tiene dirección estética clara?
|
|
170
|
-
- [ ] ¿Tipografía distintiva (no genérica)?
|
|
171
|
-
- [ ] ¿Paleta de color con personalidad?
|
|
172
|
-
- [ ] ¿Animaciones en momentos clave?
|
|
173
|
-
- [ ] ¿Layout tiene algo memorable?
|
|
174
|
-
- [ ] ¿Evita estética "AI genérica"?
|
|
175
|
-
|
|
176
|
-
---
|
|
177
|
-
|
|
178
|
-
## Anti-patrones a EVITAR
|
|
179
|
-
|
|
180
|
-
### "AI Slop" Visual
|
|
181
|
-
- Inter font everywhere
|
|
182
|
-
- Purple/blue gradients genéricos
|
|
183
|
-
- Generic vector illustrations
|
|
184
|
-
- Centered layouts sin personalidad
|
|
185
|
-
- Componentes de librería sin customizar
|
|
186
|
-
- Shadows y borders idénticos en todo
|
|
187
|
-
|
|
188
|
-
### Bad UX
|
|
189
|
-
- Forms sin validación inline
|
|
190
|
-
- No loading states
|
|
191
|
-
- Errores sin solución clara
|
|
192
|
-
- Click/touch targets muy pequeños
|
|
193
|
-
- Navigation con 15+ items
|
|
194
|
-
- No keyboard support
|
|
195
|
-
- Low contrast text
|
|
196
|
-
|
|
197
|
-
---
|
|
42
|
+
## Checklist
|
|
198
43
|
|
|
199
|
-
|
|
44
|
+
### UX (Required)
|
|
45
|
+
- [ ] User understands immediately
|
|
46
|
+
- [ ] Actions have feedback
|
|
47
|
+
- [ ] Errors are clear
|
|
48
|
+
- [ ] Keyboard works
|
|
49
|
+
- [ ] Contrast >= 4.5:1
|
|
50
|
+
- [ ] Touch targets >= 44px
|
|
200
51
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
52
|
+
### UI
|
|
53
|
+
- [ ] Clear aesthetic direction
|
|
54
|
+
- [ ] Distinctive typography
|
|
55
|
+
- [ ] Personality in color
|
|
56
|
+
- [ ] Key animations
|
|
57
|
+
- [ ] Avoids "AI generic"
|
|
205
58
|
|
|
206
|
-
##
|
|
59
|
+
## Anti-Patterns
|
|
207
60
|
|
|
208
|
-
|
|
209
|
-
2. **PLAN**: Define aesthetic direction + UX requirements.
|
|
210
|
-
3. **EXECUTE**: Implement with attention to both UX and UI.
|
|
211
|
-
4. **VERIFY**: Run through checklists before delivery.
|
|
61
|
+
**AI Slop**: Inter everywhere, purple gradients, generic illustrations, centered layouts without personality
|
|
212
62
|
|
|
213
|
-
|
|
214
|
-
- UX comes before UI - usability over aesthetics
|
|
215
|
-
- Stay in your domain (design decisions)
|
|
216
|
-
- No generic "AI slop" - be distinctive
|
|
217
|
-
- Accessibility is not optional
|
|
218
|
-
- Optimize for real users, not screenshots
|
|
63
|
+
**Bad UX**: No validation, no loading states, unclear errors, tiny touch targets
|
|
@@ -1,77 +1,35 @@
|
|
|
1
1
|
---
|
|
2
2
|
allowed-tools: [Glob, Read]
|
|
3
|
-
description: 'Filter relevant context for a task - Claude decides what matters'
|
|
4
3
|
---
|
|
5
4
|
|
|
6
|
-
# Context Filtering
|
|
5
|
+
# Context Filtering
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
Determine relevant files for a task.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
## Process
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
# Get real extensions (analyzer.getFileExtensions())
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Use only extensions that EXIST in this project.
|
|
21
|
-
|
|
22
|
-
## Step 2: Identify Relevant Directories
|
|
23
|
-
|
|
24
|
-
Based on the task, identify which directories matter:
|
|
25
|
-
|
|
26
|
-
**DO NOT use hardcoded lists like:**
|
|
27
|
-
- "components" for frontend
|
|
28
|
-
- "routes" for backend
|
|
29
|
-
|
|
30
|
-
**DO analyze:**
|
|
31
|
-
- Where does this project put similar code?
|
|
32
|
-
- What directory structure does it use?
|
|
33
|
-
- What naming conventions are followed?
|
|
34
|
-
|
|
35
|
-
## Step 3: Filter by Task Requirements
|
|
36
|
-
|
|
37
|
-
For the specific task:
|
|
38
|
-
|
|
39
|
-
1. What type of files will be modified?
|
|
40
|
-
2. What related files might need updates?
|
|
41
|
-
3. What config files are relevant?
|
|
42
|
-
|
|
43
|
-
## Step 4: Exclude Non-Relevant
|
|
44
|
-
|
|
45
|
-
Always exclude:
|
|
46
|
-
- `node_modules/`, `vendor/`, etc. (dependencies)
|
|
47
|
-
- `.git/` (version control)
|
|
48
|
-
- `dist/`, `build/`, `target/` (build outputs)
|
|
49
|
-
- Generated files
|
|
11
|
+
1. **Get real extensions**: Only include what EXISTS in project
|
|
12
|
+
2. **Identify directories**: Based on task, not assumptions
|
|
13
|
+
3. **Filter by task**: What files will be modified?
|
|
14
|
+
4. **Exclude non-relevant**: node_modules, .git, dist, build
|
|
50
15
|
|
|
51
16
|
## Output
|
|
52
17
|
|
|
53
|
-
Return filtering patterns:
|
|
54
|
-
|
|
55
18
|
```json
|
|
56
19
|
{
|
|
57
20
|
"include": {
|
|
58
|
-
"extensions": [".
|
|
59
|
-
"directories": ["
|
|
60
|
-
"files": ["specific-files-if-known"]
|
|
21
|
+
"extensions": [".ts", ".tsx"],
|
|
22
|
+
"directories": ["src/", "lib/"]
|
|
61
23
|
},
|
|
62
24
|
"exclude": {
|
|
63
|
-
"directories": ["node_modules/", ".git/", "dist/"]
|
|
64
|
-
"patterns": ["*.min.js", "*.map"]
|
|
25
|
+
"directories": ["node_modules/", ".git/", "dist/"]
|
|
65
26
|
},
|
|
66
|
-
"
|
|
67
|
-
"reasoning": "why these patterns were chosen"
|
|
27
|
+
"reasoning": "why these patterns"
|
|
68
28
|
}
|
|
69
29
|
```
|
|
70
30
|
|
|
71
31
|
## Rules
|
|
72
32
|
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
- **Efficient** - Don't include everything, focus on what matters
|
|
77
|
-
- **Explain choices** - Document why certain patterns were included/excluded
|
|
33
|
+
- Use REAL extensions (not assumed)
|
|
34
|
+
- Task-specific filtering
|
|
35
|
+
- Efficient - focus on what matters
|