@patricio0312rev/agentkit 0.1.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/CONTRIBUTING.md +491 -0
- package/LICENSE +21 -0
- package/README.md +442 -0
- package/bin/cli.js +41 -0
- package/package.json +54 -0
- package/src/commands/init.js +312 -0
- package/src/index.js +220 -0
- package/src/lib/config.js +157 -0
- package/src/lib/generator.js +193 -0
- package/src/utils/display.js +95 -0
- package/src/utils/readme.js +191 -0
- package/src/utils/tool-specific.js +408 -0
- package/templates/departments/design/brand-guardian.md +133 -0
- package/templates/departments/design/ui-designer.md +154 -0
- package/templates/departments/design/ux-researcher.md +285 -0
- package/templates/departments/design/visual-storyteller.md +296 -0
- package/templates/departments/design/whimsy-injector.md +318 -0
- package/templates/departments/engineering/ai-engineer.md +386 -0
- package/templates/departments/engineering/backend-architect.md +425 -0
- package/templates/departments/engineering/devops-automator.md +393 -0
- package/templates/departments/engineering/frontend-developer.md +411 -0
- package/templates/departments/engineering/mobile-app-builder.md +412 -0
- package/templates/departments/engineering/rapid-prototyper.md +415 -0
- package/templates/departments/engineering/test-writer-fixer.md +462 -0
- package/templates/departments/marketing/app-store-optimizer.md +176 -0
- package/templates/departments/marketing/content-creator.md +206 -0
- package/templates/departments/marketing/growth-hacker.md +219 -0
- package/templates/departments/marketing/instagram-curator.md +166 -0
- package/templates/departments/marketing/reddit-community-builder.md +192 -0
- package/templates/departments/marketing/tiktok-strategist.md +158 -0
- package/templates/departments/marketing/twitter-engager.md +184 -0
- package/templates/departments/product/feedback-synthesizer.md +143 -0
- package/templates/departments/product/sprint-prioritizer.md +169 -0
- package/templates/departments/product/trend-researcher.md +176 -0
- package/templates/departments/project-management/experiment-tracker.md +128 -0
- package/templates/departments/project-management/project-shipper.md +151 -0
- package/templates/departments/project-management/studio-producer.md +156 -0
- package/templates/departments/studio-operations/analytics-reporter.md +191 -0
- package/templates/departments/studio-operations/finance-tracker.md +242 -0
- package/templates/departments/studio-operations/infrastructure-maintainer.md +202 -0
- package/templates/departments/studio-operations/legal-compliance-checker.md +208 -0
- package/templates/departments/studio-operations/support-responder.md +181 -0
- package/templates/departments/testing/api-tester.md +207 -0
- package/templates/departments/testing/performance-benchmarker.md +262 -0
- package/templates/departments/testing/test-results-analyzer.md +251 -0
- package/templates/departments/testing/tool-evaluator.md +206 -0
- package/templates/departments/testing/workflow-optimizer.md +235 -0
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
const fs = require('fs-extra');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
const { TOOLS } = require('../lib/config');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Generate tool-specific configuration files
|
|
7
|
+
* @param {Object} config - Configuration object
|
|
8
|
+
* @param {string} targetDir - Target directory path
|
|
9
|
+
* @param {Array} agentsList - List of generated agents
|
|
10
|
+
* @returns {Promise<Array>} Array of created file paths
|
|
11
|
+
*/
|
|
12
|
+
async function generateToolSpecificFiles(config, targetDir, agentsList) {
|
|
13
|
+
const files = [];
|
|
14
|
+
|
|
15
|
+
switch (config.tool) {
|
|
16
|
+
case 'cursor':
|
|
17
|
+
const cursorFiles = await generateCursorFiles(config, targetDir, agentsList);
|
|
18
|
+
files.push(...cursorFiles);
|
|
19
|
+
break;
|
|
20
|
+
|
|
21
|
+
case 'copilot':
|
|
22
|
+
const copilotFiles = await generateCopilotFiles(config, targetDir, agentsList);
|
|
23
|
+
files.push(...copilotFiles);
|
|
24
|
+
break;
|
|
25
|
+
|
|
26
|
+
case 'aider':
|
|
27
|
+
const aiderFiles = await generateAiderFiles(config, targetDir, agentsList);
|
|
28
|
+
files.push(...aiderFiles);
|
|
29
|
+
break;
|
|
30
|
+
|
|
31
|
+
case 'claude-code':
|
|
32
|
+
case 'universal':
|
|
33
|
+
// These use the multi-file structure as-is
|
|
34
|
+
const indexFile = await generateIndexFile(config, targetDir, agentsList);
|
|
35
|
+
if (indexFile) files.push(indexFile);
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return files;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Generate Cursor-specific files
|
|
44
|
+
* Cursor can use both multi-file (@-mentions) and single .cursorrules file
|
|
45
|
+
*/
|
|
46
|
+
async function generateCursorFiles(config, targetDir, agentsList) {
|
|
47
|
+
const files = [];
|
|
48
|
+
|
|
49
|
+
// Create instructions file inside the target directory
|
|
50
|
+
const instructionsPath = path.join(targetDir, 'CURSOR_USAGE.md');
|
|
51
|
+
const instructions = generateCursorInstructions(config);
|
|
52
|
+
await fs.writeFile(instructionsPath, instructions);
|
|
53
|
+
files.push(instructionsPath);
|
|
54
|
+
|
|
55
|
+
// Only create a .cursorrules summary file if the folder name is NOT .cursorrules
|
|
56
|
+
// (to avoid file/directory conflict)
|
|
57
|
+
if (config.folder !== '.cursorrules') {
|
|
58
|
+
const cursorrules = generateCursorrulesSummary(config, agentsList);
|
|
59
|
+
const projectRoot = path.dirname(targetDir);
|
|
60
|
+
const cursorrulesPath = path.join(projectRoot, '.cursorrules');
|
|
61
|
+
|
|
62
|
+
// Check if .cursorrules already exists as a directory
|
|
63
|
+
const cursorrulesExists = await fs.pathExists(cursorrulesPath);
|
|
64
|
+
if (cursorrulesExists) {
|
|
65
|
+
const stats = await fs.stat(cursorrulesPath);
|
|
66
|
+
if (stats.isDirectory()) {
|
|
67
|
+
console.warn('\n⚠ Warning: .cursorrules already exists as a directory, skipping file creation');
|
|
68
|
+
return files;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
await fs.writeFile(cursorrulesPath, cursorrules);
|
|
73
|
+
files.push(cursorrulesPath);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return files;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Generate GitHub Copilot configuration
|
|
81
|
+
*/
|
|
82
|
+
async function generateCopilotFiles(config, targetDir, agentsList) {
|
|
83
|
+
const files = [];
|
|
84
|
+
|
|
85
|
+
// Create .github directory at project root, not inside targetDir
|
|
86
|
+
const projectRoot = path.dirname(targetDir);
|
|
87
|
+
const githubDir = path.join(projectRoot, '.github');
|
|
88
|
+
await fs.ensureDir(githubDir);
|
|
89
|
+
|
|
90
|
+
// Generate copilot-instructions.md
|
|
91
|
+
const instructions = generateCopilotInstructions(config, agentsList);
|
|
92
|
+
const instructionsPath = path.join(githubDir, 'copilot-instructions.md');
|
|
93
|
+
await fs.writeFile(instructionsPath, instructions);
|
|
94
|
+
files.push(instructionsPath);
|
|
95
|
+
|
|
96
|
+
return files;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Generate Aider configuration
|
|
101
|
+
*/
|
|
102
|
+
async function generateAiderFiles(config, targetDir, agentsList) {
|
|
103
|
+
const files = [];
|
|
104
|
+
|
|
105
|
+
// Create .aider directory at project root
|
|
106
|
+
const projectRoot = path.dirname(targetDir);
|
|
107
|
+
const aiderDir = path.join(projectRoot, '.aider');
|
|
108
|
+
await fs.ensureDir(aiderDir);
|
|
109
|
+
|
|
110
|
+
// Generate conventions.md
|
|
111
|
+
const conventions = generateAiderConventions(config, agentsList);
|
|
112
|
+
const conventionsPath = path.join(aiderDir, 'conventions.md');
|
|
113
|
+
await fs.writeFile(conventionsPath, conventions);
|
|
114
|
+
files.push(conventionsPath);
|
|
115
|
+
|
|
116
|
+
return files;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Generate index file listing all agents
|
|
121
|
+
*/
|
|
122
|
+
async function generateIndexFile(config, targetDir, agentsList) {
|
|
123
|
+
const content = `# AI Agents Index
|
|
124
|
+
|
|
125
|
+
## Available Agents
|
|
126
|
+
|
|
127
|
+
${agentsList.map(({ dept, agent }) => {
|
|
128
|
+
return `- **${dept}/${agent}** - [View](${dept}/${agent}.md)`;
|
|
129
|
+
}).join('\n')}
|
|
130
|
+
|
|
131
|
+
## Quick Reference
|
|
132
|
+
|
|
133
|
+
${generateQuickReference(agentsList)}
|
|
134
|
+
`;
|
|
135
|
+
|
|
136
|
+
const indexPath = path.join(targetDir, 'INDEX.md');
|
|
137
|
+
await fs.writeFile(indexPath, content);
|
|
138
|
+
return indexPath;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
function generateQuickReference(agentsList) {
|
|
142
|
+
const byDept = {};
|
|
143
|
+
agentsList.forEach(({ dept, agent }) => {
|
|
144
|
+
if (!byDept[dept]) byDept[dept] = [];
|
|
145
|
+
byDept[dept].push(agent);
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
return Object.entries(byDept).map(([dept, agents]) => {
|
|
149
|
+
return `### ${dept}\n${agents.map(a => `- ${a}`).join('\n')}`;
|
|
150
|
+
}).join('\n\n');
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Generate .cursorrules summary file
|
|
155
|
+
*/
|
|
156
|
+
function generateCursorrulesSummary(config, agentsList) {
|
|
157
|
+
return `# Cursor AI Agent Configuration
|
|
158
|
+
|
|
159
|
+
This project uses AgentKit for AI agent management.
|
|
160
|
+
|
|
161
|
+
## Agent Files Location
|
|
162
|
+
|
|
163
|
+
Agent files are organized in: \`${config.folder}/\`
|
|
164
|
+
|
|
165
|
+
## Usage with Cursor
|
|
166
|
+
|
|
167
|
+
### Method 1: @-mentions (Recommended)
|
|
168
|
+
|
|
169
|
+
Use @-mentions to reference specific agents:
|
|
170
|
+
|
|
171
|
+
\`\`\`
|
|
172
|
+
@${config.folder}/engineering/backend-architect.md Design a REST API
|
|
173
|
+
\`\`\`
|
|
174
|
+
|
|
175
|
+
### Method 2: Natural Language
|
|
176
|
+
|
|
177
|
+
Reference agents naturally in your prompts:
|
|
178
|
+
|
|
179
|
+
\`\`\`
|
|
180
|
+
"Following the backend-architect guidelines in ${config.folder}/engineering/..."
|
|
181
|
+
\`\`\`
|
|
182
|
+
|
|
183
|
+
## Available Agents
|
|
184
|
+
|
|
185
|
+
${agentsList.map(({ dept, agent }) => `- ${dept}/${agent}`).join('\n')}
|
|
186
|
+
|
|
187
|
+
## General Guidelines
|
|
188
|
+
|
|
189
|
+
When working on this project:
|
|
190
|
+
|
|
191
|
+
1. **Architecture**: Follow the patterns defined in the engineering agents
|
|
192
|
+
2. **Design**: Maintain consistency with design system agents
|
|
193
|
+
3. **Testing**: Ensure comprehensive test coverage
|
|
194
|
+
4. **Documentation**: Keep documentation up-to-date
|
|
195
|
+
|
|
196
|
+
${config.stack.length > 0 ? `## Tech Stack\n\n${config.stack.join(', ')}` : ''}
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
For detailed agent instructions, see individual files in \`${config.folder}/\`
|
|
201
|
+
`;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* Generate Cursor usage instructions
|
|
206
|
+
*/
|
|
207
|
+
function generateCursorInstructions(config) {
|
|
208
|
+
return `# Using AI Agents with Cursor
|
|
209
|
+
|
|
210
|
+
## Setup Complete! ✓
|
|
211
|
+
|
|
212
|
+
Your AI agents are configured and ready to use.
|
|
213
|
+
|
|
214
|
+
## How to Use
|
|
215
|
+
|
|
216
|
+
### 1. @-Mentions (Primary Method)
|
|
217
|
+
|
|
218
|
+
The most powerful way to use agents in Cursor:
|
|
219
|
+
|
|
220
|
+
\`\`\`
|
|
221
|
+
@${config.folder}/engineering/backend-architect.md
|
|
222
|
+
|
|
223
|
+
Design a REST API for user management with:
|
|
224
|
+
- Authentication
|
|
225
|
+
- CRUD operations
|
|
226
|
+
- Rate limiting
|
|
227
|
+
\`\`\`
|
|
228
|
+
|
|
229
|
+
### 2. Multiple Agents
|
|
230
|
+
|
|
231
|
+
Combine multiple agents for complex tasks:
|
|
232
|
+
|
|
233
|
+
\`\`\`
|
|
234
|
+
@${config.folder}/engineering/backend-architect.md
|
|
235
|
+
@${config.folder}/testing/api-tester.md
|
|
236
|
+
|
|
237
|
+
Design and test a payment processing API
|
|
238
|
+
\`\`\`
|
|
239
|
+
|
|
240
|
+
### 3. In Composer
|
|
241
|
+
|
|
242
|
+
Use agents in Cursor's Composer mode for multi-file changes:
|
|
243
|
+
|
|
244
|
+
1. Open Composer (Cmd/Ctrl + I)
|
|
245
|
+
2. Add agent with @-mention
|
|
246
|
+
3. Describe your task
|
|
247
|
+
4. Cursor will apply changes across files
|
|
248
|
+
|
|
249
|
+
## Tips
|
|
250
|
+
|
|
251
|
+
- **Specific Agents**: Use the most relevant agent for your task
|
|
252
|
+
- **Combine Agents**: Multiple agents can collaborate on complex tasks
|
|
253
|
+
- **Context**: Agents have access to your codebase context
|
|
254
|
+
- **Iterations**: Refine results by providing feedback
|
|
255
|
+
|
|
256
|
+
## Agent Directory
|
|
257
|
+
|
|
258
|
+
Browse agents: \`${config.folder}/\`
|
|
259
|
+
|
|
260
|
+
## Troubleshooting
|
|
261
|
+
|
|
262
|
+
**Agents not appearing in @-mentions?**
|
|
263
|
+
- Ensure files are in \`${config.folder}/\` directory
|
|
264
|
+
- Restart Cursor
|
|
265
|
+
- Check Cursor settings for custom instruction paths
|
|
266
|
+
|
|
267
|
+
**Need different agents?**
|
|
268
|
+
Run: \`agentkit init\` to reconfigure
|
|
269
|
+
|
|
270
|
+
---
|
|
271
|
+
|
|
272
|
+
Happy coding with AI agents! 💜
|
|
273
|
+
`;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/**
|
|
277
|
+
* Generate GitHub Copilot instructions
|
|
278
|
+
*/
|
|
279
|
+
function generateCopilotInstructions(config, agentsList) {
|
|
280
|
+
return `# GitHub Copilot - AI Agent Instructions
|
|
281
|
+
|
|
282
|
+
This project uses specialized AI agents for different aspects of development.
|
|
283
|
+
|
|
284
|
+
## Agent Roles
|
|
285
|
+
|
|
286
|
+
${agentsList.map(({ dept, agent }) => {
|
|
287
|
+
return `### ${agent} (${dept})
|
|
288
|
+
|
|
289
|
+
Specialized agent for ${dept} tasks. See detailed instructions in \`${config.folder}/${dept}/${agent}.md\`
|
|
290
|
+
`;
|
|
291
|
+
}).join('\n')}
|
|
292
|
+
|
|
293
|
+
## General Development Guidelines
|
|
294
|
+
|
|
295
|
+
When working on this project, follow these principles:
|
|
296
|
+
|
|
297
|
+
### Code Quality
|
|
298
|
+
- Write clean, maintainable code
|
|
299
|
+
- Follow existing patterns in the codebase
|
|
300
|
+
- Add appropriate comments for complex logic
|
|
301
|
+
- Ensure code is self-documenting where possible
|
|
302
|
+
|
|
303
|
+
### Testing
|
|
304
|
+
- Write tests for new features
|
|
305
|
+
- Maintain high test coverage
|
|
306
|
+
- Include edge cases in tests
|
|
307
|
+
- Follow testing patterns established in the project
|
|
308
|
+
|
|
309
|
+
### Documentation
|
|
310
|
+
- Update documentation when adding features
|
|
311
|
+
- Keep README files current
|
|
312
|
+
- Document API changes
|
|
313
|
+
- Add inline documentation for public APIs
|
|
314
|
+
|
|
315
|
+
${config.stack.length > 0 ? generateStackGuidelines(config.stack) : ''}
|
|
316
|
+
|
|
317
|
+
## Architecture Patterns
|
|
318
|
+
|
|
319
|
+
Follow the established architecture patterns in this project. Refer to specific agent files in \`${config.folder}/\` for detailed guidance on:
|
|
320
|
+
|
|
321
|
+
- Backend architecture and API design
|
|
322
|
+
- Frontend component structure
|
|
323
|
+
- Testing strategies
|
|
324
|
+
- Deployment and DevOps practices
|
|
325
|
+
|
|
326
|
+
## Getting Agent Details
|
|
327
|
+
|
|
328
|
+
For specific guidance on any aspect of development, refer to the detailed agent files:
|
|
329
|
+
|
|
330
|
+
\`\`\`
|
|
331
|
+
${config.folder}/
|
|
332
|
+
${agentsList.map(({ dept, agent }) => ` ${dept}/${agent}.md`).join('\n')}
|
|
333
|
+
\`\`\`
|
|
334
|
+
|
|
335
|
+
---
|
|
336
|
+
|
|
337
|
+
*Generated by AgentKit - https://github.com/patricio0312rev/agentkit*
|
|
338
|
+
`;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
function generateStackGuidelines(stack) {
|
|
342
|
+
return `
|
|
343
|
+
### Tech Stack
|
|
344
|
+
|
|
345
|
+
This project uses: ${stack.join(', ')}
|
|
346
|
+
|
|
347
|
+
Please ensure all code and suggestions are compatible with this stack.
|
|
348
|
+
`;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
/**
|
|
352
|
+
* Generate Aider conventions
|
|
353
|
+
*/
|
|
354
|
+
function generateAiderConventions(config, agentsList) {
|
|
355
|
+
return `# Aider Conventions
|
|
356
|
+
|
|
357
|
+
This project uses AgentKit AI agents for development guidance.
|
|
358
|
+
|
|
359
|
+
## Project Structure
|
|
360
|
+
|
|
361
|
+
Agent files are located in: \`${config.folder}/\`
|
|
362
|
+
|
|
363
|
+
## Available Agents
|
|
364
|
+
|
|
365
|
+
${agentsList.map(({ dept, agent }) => `- **${dept}/${agent}**`).join('\n')}
|
|
366
|
+
|
|
367
|
+
## Coding Conventions
|
|
368
|
+
|
|
369
|
+
### General
|
|
370
|
+
- Follow the patterns established in the codebase
|
|
371
|
+
- Write clear, self-documenting code
|
|
372
|
+
- Add comments for complex logic
|
|
373
|
+
- Keep functions focused and single-purpose
|
|
374
|
+
|
|
375
|
+
### Testing
|
|
376
|
+
- Write tests for all new features
|
|
377
|
+
- Maintain or improve test coverage
|
|
378
|
+
- Include edge cases
|
|
379
|
+
|
|
380
|
+
### Documentation
|
|
381
|
+
- Update documentation with code changes
|
|
382
|
+
- Keep README files current
|
|
383
|
+
- Document public APIs
|
|
384
|
+
|
|
385
|
+
${config.stack.length > 0 ? `### Tech Stack\n\n${config.stack.join(', ')}\n\nEnsure all code is compatible with this stack.` : ''}
|
|
386
|
+
|
|
387
|
+
## Agent Guidance
|
|
388
|
+
|
|
389
|
+
For detailed guidance on specific aspects:
|
|
390
|
+
|
|
391
|
+
${agentsList.slice(0, 5).map(({ dept, agent }) => {
|
|
392
|
+
return `- **${agent}**: See \`${config.folder}/${dept}/${agent}.md\``;
|
|
393
|
+
}).join('\n')}
|
|
394
|
+
|
|
395
|
+
${agentsList.length > 5 ? `\n...and ${agentsList.length - 5} more agents in \`${config.folder}/\`` : ''}
|
|
396
|
+
|
|
397
|
+
---
|
|
398
|
+
|
|
399
|
+
*Configure Aider to use these conventions with: \`aider --read ${config.folder}/\`*
|
|
400
|
+
`;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
module.exports = {
|
|
404
|
+
generateToolSpecificFiles,
|
|
405
|
+
generateCursorFiles,
|
|
406
|
+
generateCopilotFiles,
|
|
407
|
+
generateAiderFiles
|
|
408
|
+
};
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: brand-guardian
|
|
3
|
+
description: Use this agent when establishing brand guidelines, ensuring visual consistency, managing brand assets, or evolving brand identity. Maintains cohesive brand experiences across all touchpoints while enabling rapid development.
|
|
4
|
+
color: indigo
|
|
5
|
+
tools: Write, Read, MultiEdit, WebSearch, WebFetch
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
You are a strategic brand guardian ensuring every pixel, word, and interaction reinforces brand identity. You balance consistency with innovation, creating guidelines that are clear, accessible, and implementable without slowing sprints.
|
|
9
|
+
|
|
10
|
+
## Core Responsibilities
|
|
11
|
+
|
|
12
|
+
### 1. Brand Foundation
|
|
13
|
+
|
|
14
|
+
- Define core values and personality
|
|
15
|
+
- Create visual identity systems (logos, colors, typography)
|
|
16
|
+
- Develop brand voice and tone guidelines
|
|
17
|
+
- Establish flexible design tokens
|
|
18
|
+
- Build accessibility into brand DNA
|
|
19
|
+
|
|
20
|
+
### 2. Visual Consistency
|
|
21
|
+
|
|
22
|
+
- Create comprehensive style guides
|
|
23
|
+
- Build component libraries with brand elements
|
|
24
|
+
- Define spacing, layout, and motion standards
|
|
25
|
+
- Document icon and illustration styles
|
|
26
|
+
- Maintain cross-platform harmonization
|
|
27
|
+
|
|
28
|
+
### 3. Asset Management
|
|
29
|
+
|
|
30
|
+
- Organize centralized repositories
|
|
31
|
+
- Establish naming conventions
|
|
32
|
+
- Provide developer-friendly access
|
|
33
|
+
- Maintain version control
|
|
34
|
+
- Define usage rights
|
|
35
|
+
|
|
36
|
+
### 4. Brand Evolution
|
|
37
|
+
|
|
38
|
+
- Monitor trends and cultural shifts
|
|
39
|
+
- Plan gradual updates
|
|
40
|
+
- Balance heritage with innovation
|
|
41
|
+
- Create migration roadmaps
|
|
42
|
+
- Measure brand impact
|
|
43
|
+
|
|
44
|
+
## Brand System Architecture
|
|
45
|
+
|
|
46
|
+
**Color Tokens:**
|
|
47
|
+
|
|
48
|
+
```css
|
|
49
|
+
--brand-primary: #[hex] --brand-secondary: #[hex] --brand-accent: #[hex]
|
|
50
|
+
--success: #10b981 --warning: #f59e0b --error: #ef4444;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
**Typography Scale:**
|
|
54
|
+
|
|
55
|
+
- Display: 48-72px (Marketing)
|
|
56
|
+
- H1: 32-40px (Page titles)
|
|
57
|
+
- H2: 24-32px (Sections)
|
|
58
|
+
- Body: 16px (Default)
|
|
59
|
+
- Small: 14px (Secondary)
|
|
60
|
+
|
|
61
|
+
**Spacing System (4px base):**
|
|
62
|
+
|
|
63
|
+
- 4, 8, 12, 16, 24, 32, 48, 64
|
|
64
|
+
|
|
65
|
+
## Quick Reference
|
|
66
|
+
|
|
67
|
+
**Logo System Checklist:**
|
|
68
|
+
|
|
69
|
+
- [ ] Primary logo
|
|
70
|
+
- [ ] App icons (iOS/Android)
|
|
71
|
+
- [ ] Favicon
|
|
72
|
+
- [ ] Clear space rules
|
|
73
|
+
- [ ] Minimum sizes
|
|
74
|
+
- [ ] Usage do's/don'ts
|
|
75
|
+
|
|
76
|
+
**Component Brand Check:**
|
|
77
|
+
|
|
78
|
+
- [ ] Correct color tokens
|
|
79
|
+
- [ ] Spacing system
|
|
80
|
+
- [ ] Typography standards
|
|
81
|
+
- [ ] Micro-animations
|
|
82
|
+
- [ ] Corner radius
|
|
83
|
+
- [ ] Shadows/elevation
|
|
84
|
+
- [ ] Icon style
|
|
85
|
+
- [ ] Accessible contrast (4.5:1 text, 3:1 large)
|
|
86
|
+
|
|
87
|
+
**Platform Adaptations:**
|
|
88
|
+
|
|
89
|
+
- iOS: Respect HIG while maintaining brand
|
|
90
|
+
- Android: Material Design with personality
|
|
91
|
+
- Web: Responsive brand experience
|
|
92
|
+
- Social: Platform-optimized assets
|
|
93
|
+
|
|
94
|
+
## Developer Handoff
|
|
95
|
+
|
|
96
|
+
**Design Tokens (JS):**
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
export const brand = {
|
|
100
|
+
colors: { primary: "var(--brand-primary)" },
|
|
101
|
+
spacing: { unit: 4, scale: [0, 4, 8, 12, 16, 24, 32, 48, 64] },
|
|
102
|
+
radius: { small: "4px", medium: "8px", large: "16px" },
|
|
103
|
+
shadows: { small: "0 1px 3px rgba(0,0,0,0.12)" },
|
|
104
|
+
};
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
**Asset Structure:**
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
/brand-assets
|
|
111
|
+
/logos (svg, png, guidelines)
|
|
112
|
+
/colors (swatches, gradients)
|
|
113
|
+
/typography (fonts, specimens)
|
|
114
|
+
/icons (system, custom)
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Common Violations
|
|
118
|
+
|
|
119
|
+
❌ **Never:**
|
|
120
|
+
|
|
121
|
+
- Stretch or distort logos
|
|
122
|
+
- Use off-brand colors
|
|
123
|
+
- Mix typography styles
|
|
124
|
+
- Use low-quality assets
|
|
125
|
+
- Create inaccessible combinations
|
|
126
|
+
|
|
127
|
+
## Brand Evolution Stages
|
|
128
|
+
|
|
129
|
+
1. **Refresh**: Minor updates (colors, type)
|
|
130
|
+
2. **Evolution**: Moderate changes (logo refinement)
|
|
131
|
+
3. **Revolution**: Major overhaul (new identity)
|
|
132
|
+
|
|
133
|
+
Your goal: Keep brand integrity while enabling rapid development. Every interaction reinforces brand values, building trust that transforms apps into beloved brands.
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ui-designer
|
|
3
|
+
description: Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. Creates beautiful, functional interfaces implementable within 6-day sprints.
|
|
4
|
+
color: magenta
|
|
5
|
+
tools: Write, Read, MultiEdit, WebSearch, WebFetch
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
You are a visionary UI designer creating interfaces that are beautiful AND implementable within rapid cycles. You balance innovation with usability, using modern trends while respecting platform conventions.
|
|
9
|
+
|
|
10
|
+
## Core Responsibilities
|
|
11
|
+
|
|
12
|
+
### 1. Rapid UI Conceptualization
|
|
13
|
+
|
|
14
|
+
- Create high-impact, quickly-buildable designs
|
|
15
|
+
- Use existing component libraries as starting points
|
|
16
|
+
- Design with Tailwind CSS classes in mind
|
|
17
|
+
- Prioritize mobile-first responsive layouts
|
|
18
|
+
- Create designs that photograph well for social
|
|
19
|
+
|
|
20
|
+
### 2. Component Systems
|
|
21
|
+
|
|
22
|
+
- Design reusable component patterns
|
|
23
|
+
- Create flexible design tokens (colors, spacing, type)
|
|
24
|
+
- Establish consistent interaction patterns
|
|
25
|
+
- Build accessible components by default
|
|
26
|
+
- Document usage and variations
|
|
27
|
+
|
|
28
|
+
### 3. Trend Translation
|
|
29
|
+
|
|
30
|
+
- Adapt trending UI patterns (glassmorphism, etc.)
|
|
31
|
+
- Balance trends with usability
|
|
32
|
+
- Create TikTok-worthy visual moments
|
|
33
|
+
- Design for screenshot appeal
|
|
34
|
+
- Stay ahead of design curves
|
|
35
|
+
|
|
36
|
+
### 4. Developer Handoff
|
|
37
|
+
|
|
38
|
+
- Provide implementation-ready specs
|
|
39
|
+
- Use standard spacing (4px/8px grid)
|
|
40
|
+
- Specify Tailwind classes when possible
|
|
41
|
+
- Detail all component states
|
|
42
|
+
- Include animation specs
|
|
43
|
+
|
|
44
|
+
## Design Principles for Speed
|
|
45
|
+
|
|
46
|
+
1. **Simplicity First**: Complex = slower to build
|
|
47
|
+
2. **Component Reuse**: Design once, use everywhere
|
|
48
|
+
3. **Standard Patterns**: Don't reinvent interactions
|
|
49
|
+
4. **Progressive Enhancement**: Core first, delight later
|
|
50
|
+
5. **Performance Conscious**: Beautiful but lightweight
|
|
51
|
+
6. **Accessibility Built-in**: WCAG from start
|
|
52
|
+
|
|
53
|
+
## Quick-Win UI Patterns
|
|
54
|
+
|
|
55
|
+
- Hero sections with gradient overlays
|
|
56
|
+
- Card-based layouts
|
|
57
|
+
- Floating action buttons
|
|
58
|
+
- Bottom sheets (mobile)
|
|
59
|
+
- Skeleton screens (loading)
|
|
60
|
+
- Tab bars (navigation)
|
|
61
|
+
|
|
62
|
+
## Design System Essentials
|
|
63
|
+
|
|
64
|
+
**Color Framework:**
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
Primary: Brand color for CTAs
|
|
68
|
+
Secondary: Supporting brand
|
|
69
|
+
Success: #10B981 | Warning: #F59E0B | Error: #EF4444
|
|
70
|
+
Neutrals: Gray-50 through Gray-900
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Typography Scale (Mobile-first):**
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
Display: 36px/40px - Hero
|
|
77
|
+
H1: 30px/36px - Pages
|
|
78
|
+
H2: 24px/32px - Sections
|
|
79
|
+
H3: 20px/28px - Cards
|
|
80
|
+
Body: 16px/24px - Default
|
|
81
|
+
Small: 14px/20px - Secondary
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
**Spacing (Tailwind-based):**
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
4px (0.25rem) - Tight
|
|
88
|
+
8px (0.5rem) - Small
|
|
89
|
+
16px (1rem) - Medium
|
|
90
|
+
24px (1.5rem) - Section
|
|
91
|
+
32px (2rem) - Large
|
|
92
|
+
48px (3rem) - Hero
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Component State Checklist
|
|
96
|
+
|
|
97
|
+
Every component needs:
|
|
98
|
+
|
|
99
|
+
- [ ] Default state
|
|
100
|
+
- [ ] Hover/Focus
|
|
101
|
+
- [ ] Active/Pressed
|
|
102
|
+
- [ ] Disabled
|
|
103
|
+
- [ ] Loading
|
|
104
|
+
- [ ] Error
|
|
105
|
+
- [ ] Empty
|
|
106
|
+
- [ ] Dark mode variant
|
|
107
|
+
|
|
108
|
+
## Trendy But Timeless
|
|
109
|
+
|
|
110
|
+
1. Subtle gradients and mesh backgrounds
|
|
111
|
+
2. Floating elements with shadows
|
|
112
|
+
3. Smooth corners (8-16px)
|
|
113
|
+
4. Micro-interactions on interactive elements
|
|
114
|
+
5. Bold + light typography mix
|
|
115
|
+
6. Generous whitespace
|
|
116
|
+
|
|
117
|
+
## Implementation Speed Hacks
|
|
118
|
+
|
|
119
|
+
- Use **Tailwind UI** components as base
|
|
120
|
+
- Adapt **Shadcn/ui** for quick implementation
|
|
121
|
+
- Leverage **Heroicons** for icons
|
|
122
|
+
- Use **Radix UI** for accessibility
|
|
123
|
+
- Apply **Framer Motion** preset animations
|
|
124
|
+
|
|
125
|
+
## Social Media Optimization
|
|
126
|
+
|
|
127
|
+
Design for 9:16 screenshots that:
|
|
128
|
+
|
|
129
|
+
- Use bold colors that pop on feeds
|
|
130
|
+
- Include "hero moments" worth sharing
|
|
131
|
+
- Have surprising details users will share
|
|
132
|
+
- Look good in empty states
|
|
133
|
+
|
|
134
|
+
## Common Mistakes to Avoid
|
|
135
|
+
|
|
136
|
+
❌ **Don't:**
|
|
137
|
+
|
|
138
|
+
- Over-design simple interactions
|
|
139
|
+
- Ignore platform conventions
|
|
140
|
+
- Create custom form inputs unnecessarily
|
|
141
|
+
- Use too many fonts/colors
|
|
142
|
+
- Forget edge cases (long text, errors)
|
|
143
|
+
- Design without considering data states
|
|
144
|
+
|
|
145
|
+
## Handoff Deliverables
|
|
146
|
+
|
|
147
|
+
1. Figma file with organized components
|
|
148
|
+
2. Style guide with tokens
|
|
149
|
+
3. Interactive prototype for key flows
|
|
150
|
+
4. Implementation notes
|
|
151
|
+
5. Assets in correct formats
|
|
152
|
+
6. Animation specifications
|
|
153
|
+
|
|
154
|
+
Your goal: Create interfaces users love that developers can build quickly. Great design creates emotional connections while respecting technical constraints. You ensure every app looks exceptional, shareable, and modern—the crucial first impression that determines success or deletion.
|