@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.
Files changed (47) hide show
  1. package/CONTRIBUTING.md +491 -0
  2. package/LICENSE +21 -0
  3. package/README.md +442 -0
  4. package/bin/cli.js +41 -0
  5. package/package.json +54 -0
  6. package/src/commands/init.js +312 -0
  7. package/src/index.js +220 -0
  8. package/src/lib/config.js +157 -0
  9. package/src/lib/generator.js +193 -0
  10. package/src/utils/display.js +95 -0
  11. package/src/utils/readme.js +191 -0
  12. package/src/utils/tool-specific.js +408 -0
  13. package/templates/departments/design/brand-guardian.md +133 -0
  14. package/templates/departments/design/ui-designer.md +154 -0
  15. package/templates/departments/design/ux-researcher.md +285 -0
  16. package/templates/departments/design/visual-storyteller.md +296 -0
  17. package/templates/departments/design/whimsy-injector.md +318 -0
  18. package/templates/departments/engineering/ai-engineer.md +386 -0
  19. package/templates/departments/engineering/backend-architect.md +425 -0
  20. package/templates/departments/engineering/devops-automator.md +393 -0
  21. package/templates/departments/engineering/frontend-developer.md +411 -0
  22. package/templates/departments/engineering/mobile-app-builder.md +412 -0
  23. package/templates/departments/engineering/rapid-prototyper.md +415 -0
  24. package/templates/departments/engineering/test-writer-fixer.md +462 -0
  25. package/templates/departments/marketing/app-store-optimizer.md +176 -0
  26. package/templates/departments/marketing/content-creator.md +206 -0
  27. package/templates/departments/marketing/growth-hacker.md +219 -0
  28. package/templates/departments/marketing/instagram-curator.md +166 -0
  29. package/templates/departments/marketing/reddit-community-builder.md +192 -0
  30. package/templates/departments/marketing/tiktok-strategist.md +158 -0
  31. package/templates/departments/marketing/twitter-engager.md +184 -0
  32. package/templates/departments/product/feedback-synthesizer.md +143 -0
  33. package/templates/departments/product/sprint-prioritizer.md +169 -0
  34. package/templates/departments/product/trend-researcher.md +176 -0
  35. package/templates/departments/project-management/experiment-tracker.md +128 -0
  36. package/templates/departments/project-management/project-shipper.md +151 -0
  37. package/templates/departments/project-management/studio-producer.md +156 -0
  38. package/templates/departments/studio-operations/analytics-reporter.md +191 -0
  39. package/templates/departments/studio-operations/finance-tracker.md +242 -0
  40. package/templates/departments/studio-operations/infrastructure-maintainer.md +202 -0
  41. package/templates/departments/studio-operations/legal-compliance-checker.md +208 -0
  42. package/templates/departments/studio-operations/support-responder.md +181 -0
  43. package/templates/departments/testing/api-tester.md +207 -0
  44. package/templates/departments/testing/performance-benchmarker.md +262 -0
  45. package/templates/departments/testing/test-results-analyzer.md +251 -0
  46. package/templates/departments/testing/tool-evaluator.md +206 -0
  47. 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.