@epiccontext/mcp 0.1.47 → 0.1.49
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/dist/cli/commands/push.d.ts.map +1 -1
- package/dist/cli/commands/push.js +17 -0
- package/dist/cli/commands/push.js.map +1 -1
- package/dist/cli/commands/validate.d.ts.map +1 -1
- package/dist/cli/commands/validate.js +31 -12
- package/dist/cli/commands/validate.js.map +1 -1
- package/dist/cli/files.d.ts.map +1 -1
- package/dist/cli/files.js +505 -2225
- package/dist/cli/files.js.map +1 -1
- package/dist/skills/generator.d.ts.map +1 -1
- package/dist/skills/generator.js +25 -7
- package/dist/skills/generator.js.map +1 -1
- package/dist/sync/push.d.ts +2 -0
- package/dist/sync/push.d.ts.map +1 -1
- package/dist/sync/push.js +4 -2
- package/dist/sync/push.js.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/cli/files.js
CHANGED
|
@@ -1,2313 +1,564 @@
|
|
|
1
1
|
import * as fs from "fs";
|
|
2
2
|
import * as path from "path";
|
|
3
3
|
import { getStorybookTemplateFiles } from "../templates/storybook.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
function walkDir(dir, relativeTo) {
|
|
13
|
-
const entries = fs.readdirSync(dir, { withFileTypes: true });
|
|
14
|
-
for (const entry of entries) {
|
|
15
|
-
const fullPath = path.join(dir, entry.name);
|
|
16
|
-
const relativePath = path.relative(relativeTo, fullPath);
|
|
17
|
-
if (entry.isDirectory()) {
|
|
18
|
-
// Skip hidden directories and node_modules
|
|
19
|
-
if (!entry.name.startsWith(".") && entry.name !== "node_modules") {
|
|
20
|
-
walkDir(fullPath, relativeTo);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
else if (entry.isFile() && entry.name.endsWith(".md")) {
|
|
24
|
-
// Skip README and AI-GUIDE
|
|
25
|
-
const lowerName = entry.name.toLowerCase();
|
|
26
|
-
if (lowerName !== "readme.md" && lowerName !== "ai-guide.md") {
|
|
27
|
-
const content = fs.readFileSync(fullPath, "utf-8");
|
|
28
|
-
files.push({
|
|
29
|
-
path: relativePath,
|
|
30
|
-
content,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
walkDir(contextPath, contextPath);
|
|
37
|
-
return files;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Write files to the context folder
|
|
41
|
-
* By default, skips files where local version is newer than cloud version
|
|
42
|
-
*/
|
|
43
|
-
export function writeContextFolder(contextPath, files, options = {}) {
|
|
44
|
-
let written = 0;
|
|
45
|
-
let skipped = 0;
|
|
46
|
-
const skippedPaths = [];
|
|
47
|
-
for (const file of files) {
|
|
48
|
-
const fullPath = path.join(contextPath, file.path);
|
|
49
|
-
const dir = path.dirname(fullPath);
|
|
50
|
-
// Create directory if needed
|
|
51
|
-
if (!fs.existsSync(dir)) {
|
|
52
|
-
fs.mkdirSync(dir, { recursive: true });
|
|
53
|
-
}
|
|
54
|
-
// Always overwrite AI-GUIDE.md (it's server-generated and should be authoritative)
|
|
55
|
-
// This ensures users get the latest block type definitions on every pull
|
|
56
|
-
const isAIGuide = file.path.toLowerCase() === "ai-guide.md";
|
|
57
|
-
// Check if local file is newer than cloud version (unless force is set or it's AI-GUIDE.md)
|
|
58
|
-
if (!options.force && !isAIGuide && file.updatedAt && fs.existsSync(fullPath)) {
|
|
59
|
-
const localMtime = getFileModTime(fullPath);
|
|
60
|
-
const cloudMtime = new Date(file.updatedAt);
|
|
61
|
-
if (localMtime && localMtime > cloudMtime) {
|
|
62
|
-
// Local file is newer, skip overwriting
|
|
63
|
-
skipped++;
|
|
64
|
-
skippedPaths.push(file.path);
|
|
65
|
-
continue;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
// Write file
|
|
69
|
-
try {
|
|
70
|
-
fs.writeFileSync(fullPath, file.content, "utf-8");
|
|
71
|
-
written++;
|
|
72
|
-
}
|
|
73
|
-
catch (error) {
|
|
74
|
-
console.error(`Failed to write ${file.path}:`, error);
|
|
75
|
-
skipped++;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
return { written, skipped, skippedPaths };
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Delete local files that don't exist in the cloud
|
|
82
|
-
* Used during pull to remove files that were deleted in the UI
|
|
83
|
-
*/
|
|
84
|
-
export function deleteOrphanedLocalFiles(contextPath, cloudFiles) {
|
|
85
|
-
// Build a set of all cloud file paths (normalized)
|
|
86
|
-
const cloudPaths = new Set();
|
|
87
|
-
for (const file of cloudFiles) {
|
|
88
|
-
cloudPaths.add(file.path);
|
|
89
|
-
}
|
|
90
|
-
// Get all local markdown files
|
|
91
|
-
const localFiles = readContextFolder(contextPath);
|
|
92
|
-
const deleted = [];
|
|
93
|
-
for (const localFile of localFiles) {
|
|
94
|
-
// If local file doesn't exist in cloud, delete it
|
|
95
|
-
if (!cloudPaths.has(localFile.path)) {
|
|
96
|
-
const fullPath = path.join(contextPath, localFile.path);
|
|
97
|
-
try {
|
|
98
|
-
fs.unlinkSync(fullPath);
|
|
99
|
-
deleted.push(localFile.path);
|
|
100
|
-
}
|
|
101
|
-
catch (error) {
|
|
102
|
-
console.error(`Failed to delete ${localFile.path}:`, error);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
return { deleted: deleted.length, deletedPaths: deleted };
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Ensure the context folder exists with basic structure
|
|
110
|
-
*/
|
|
111
|
-
export function ensureContextFolder(contextPath) {
|
|
112
|
-
if (!fs.existsSync(contextPath)) {
|
|
113
|
-
fs.mkdirSync(contextPath, { recursive: true });
|
|
114
|
-
}
|
|
115
|
-
// Create default section folders
|
|
116
|
-
// Note: folder names use hyphens, but section types in the app use underscores
|
|
117
|
-
const defaultSections = [
|
|
118
|
-
"constitution",
|
|
119
|
-
"brand",
|
|
120
|
-
"product",
|
|
121
|
-
"business-strategy",
|
|
122
|
-
"users",
|
|
123
|
-
"research",
|
|
124
|
-
"technical",
|
|
125
|
-
"design-system",
|
|
126
|
-
"information-architecture",
|
|
127
|
-
"metrics",
|
|
128
|
-
"decisions",
|
|
129
|
-
"development",
|
|
130
|
-
"marketing",
|
|
131
|
-
];
|
|
132
|
-
for (const section of defaultSections) {
|
|
133
|
-
const sectionPath = path.join(contextPath, section);
|
|
134
|
-
if (!fs.existsSync(sectionPath)) {
|
|
135
|
-
fs.mkdirSync(sectionPath, { recursive: true });
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
// Create README.md
|
|
139
|
-
const readmePath = path.join(contextPath, "README.md");
|
|
140
|
-
if (!fs.existsSync(readmePath)) {
|
|
141
|
-
const readme = `# CONTEXT
|
|
142
|
-
|
|
143
|
-
This folder contains product context documentation synced with EpicContext.
|
|
144
|
-
|
|
145
|
-
## IMPORTANT: File Format
|
|
146
|
-
|
|
147
|
-
**All markdown files MUST have YAML frontmatter with these required fields:**
|
|
148
|
-
|
|
149
|
-
\`\`\`yaml
|
|
150
|
-
---
|
|
151
|
-
type: persona # Block type (persona, feature, decision, etc.)
|
|
152
|
-
section: brand # Section name (must match folder name)
|
|
153
|
-
key: unique-key # Unique identifier (use kebab-case)
|
|
154
|
-
name: Display Name # Human-readable name
|
|
155
|
-
status: draft # Status: draft, complete, or empty
|
|
156
|
-
---
|
|
157
|
-
\`\`\`
|
|
158
|
-
|
|
159
|
-
See \`AI-GUIDE.md\` for detailed format instructions.
|
|
160
|
-
|
|
161
|
-
## Structure
|
|
162
|
-
|
|
163
|
-
Each folder represents a section of your product documentation:
|
|
164
|
-
|
|
165
|
-
- \`constitution/\` - Non-negotiable rules and principles
|
|
166
|
-
- \`brand/\` - Identity, voice, and visual system
|
|
167
|
-
- \`product/\` - Vision, features, and roadmap
|
|
168
|
-
- \`business-strategy/\` - Strategic planning and business models
|
|
169
|
-
- \`users/\` - Personas, jobs to be done, and user journeys
|
|
170
|
-
- \`research/\` - Market and competitor analysis
|
|
171
|
-
- \`technical/\` - Stack, architecture, and constraints
|
|
172
|
-
- \`design-system/\` - Links to Storybook and Figma
|
|
173
|
-
- \`information-architecture/\` - Site structure and taxonomies
|
|
174
|
-
- \`metrics/\` - KPIs and analytics
|
|
175
|
-
- \`decisions/\` - Architecture decision records
|
|
176
|
-
- \`development/\` - Epics, stories, tasks, and roadmaps
|
|
177
|
-
- \`marketing/\` - Marketing campaigns and SEO content strategy
|
|
178
|
-
|
|
179
|
-
## Syncing
|
|
180
|
-
|
|
181
|
-
This folder is synced with your EpicContext project using the MCP server.
|
|
182
|
-
|
|
183
|
-
To sync changes:
|
|
184
|
-
\`\`\`bash
|
|
185
|
-
epicontext sync
|
|
186
|
-
\`\`\`
|
|
187
|
-
|
|
188
|
-
To watch for changes and auto-sync:
|
|
189
|
-
\`\`\`bash
|
|
190
|
-
epicontext watch
|
|
191
|
-
\`\`\`
|
|
192
|
-
`;
|
|
193
|
-
fs.writeFileSync(readmePath, readme, "utf-8");
|
|
194
|
-
}
|
|
195
|
-
// Create AI-GUIDE.md with detailed format instructions
|
|
196
|
-
const aiGuidePath = path.join(contextPath, "AI-GUIDE.md");
|
|
197
|
-
if (!fs.existsSync(aiGuidePath)) {
|
|
198
|
-
const aiGuide = `# AI Agent Guide for EpicContext
|
|
199
|
-
|
|
200
|
-
This file contains instructions for AI agents (Claude, Cursor, etc.) on how to create and edit documentation files in this CONTEXT folder.
|
|
201
|
-
|
|
202
|
-
## CRITICAL: Required YAML Frontmatter
|
|
203
|
-
|
|
204
|
-
Every markdown file in this folder **MUST** have YAML frontmatter with these required fields:
|
|
205
|
-
|
|
206
|
-
\`\`\`yaml
|
|
207
|
-
---
|
|
208
|
-
type: persona # REQUIRED: Block type (see list below)
|
|
209
|
-
section: brand # REQUIRED: Section name (must match folder name)
|
|
210
|
-
key: my-unique-key # REQUIRED: Unique identifier within section (use kebab-case)
|
|
211
|
-
name: My Display Name # REQUIRED: Human-readable display name
|
|
212
|
-
status: draft # REQUIRED: One of: draft, complete, empty
|
|
213
|
-
---
|
|
214
|
-
|
|
215
|
-
Your content goes here after the frontmatter...
|
|
216
|
-
\`\`\`
|
|
217
|
-
|
|
218
|
-
## Block Types by Section
|
|
219
|
-
|
|
220
|
-
**Note:** Every section also supports \`section_guide\` blocks for section-specific AI instructions.
|
|
221
|
-
|
|
222
|
-
### constitution/
|
|
223
|
-
- \`constraint\` - Technical, business, or resource constraints
|
|
224
|
-
- \`implementation_log\` - Implementation tracking for AI agents
|
|
225
|
-
- \`ai_rules\` - Rules and guidelines for AI agents
|
|
226
|
-
- \`context_guide\` - Guide for using this context
|
|
227
|
-
- \`glossary\` - Domain-specific terminology and definitions
|
|
228
|
-
|
|
229
|
-
### brand/
|
|
230
|
-
- \`brand_positioning\` - Golden Circle (WHY/HOW/WHAT) + Positioning Statement
|
|
231
|
-
- \`brand_color_palette\` - Visual color palette with hex, RGB, and usage
|
|
232
|
-
- \`brand_typography\` - Font families with preview at all sizes
|
|
233
|
-
- \`brand_iconography\` - Icon library selection and style guide
|
|
234
|
-
- \`tone_of_voice\` - Voice archetype, tone attributes, vocabulary
|
|
235
|
-
- \`messaging_framework\` - Elevator pitch, value props, CTAs
|
|
236
|
-
- \`logo\` - Logo assets with multiple background versions
|
|
237
|
-
- \`brand_assets\` - Photography, illustrations, patterns, graphics
|
|
238
|
-
|
|
239
|
-
### product/
|
|
240
|
-
- \`product_overview\` - Vision, overview, strategy
|
|
241
|
-
- \`feature\` - Feature definitions
|
|
242
|
-
- \`feature_market_analysis\` - Feature competitive analysis
|
|
243
|
-
- \`product_strategy_canvas\` - Product strategy canvas
|
|
244
|
-
|
|
245
|
-
### business-strategy/
|
|
246
|
-
- \`ogsm\` - Objectives, Goals, Strategies, Measures framework
|
|
247
|
-
- \`obeya_board\` - Visual management board
|
|
248
|
-
- \`swot_analysis\` - SWOT analysis matrix
|
|
249
|
-
- \`business_model_canvas\` - Business model canvas
|
|
250
|
-
- \`porters_five_forces\` - Porter's Five Forces analysis
|
|
251
|
-
- \`strategic_group_map\` - Strategic group mapping
|
|
252
|
-
|
|
253
|
-
### users/
|
|
254
|
-
- \`persona\` - User personas
|
|
255
|
-
- \`jtbd\` - Jobs to be done
|
|
256
|
-
- \`journey_map\` - User journey maps
|
|
257
|
-
|
|
258
|
-
### research/
|
|
259
|
-
- \`competitor\` - Competitor analysis
|
|
260
|
-
- \`market_research\` - Market research and insights
|
|
261
|
-
- \`user_research\` - User research findings
|
|
262
|
-
- \`research_data\` - Tabular research data with charts and analysis
|
|
263
|
-
- \`research_document\` - Long-form research documents with insights
|
|
264
|
-
|
|
265
|
-
### technical/
|
|
266
|
-
- \`tech_stack\` - Technology stack (frontend, backend, infrastructure)
|
|
267
|
-
- \`architecture_diagram\` - C4 model system architecture diagrams
|
|
268
|
-
- \`integration\` - Third-party integrations
|
|
269
|
-
- \`constraint\` - Technical constraints
|
|
270
|
-
- \`dev_setup\` - Local development setup and prerequisites
|
|
271
|
-
- \`api_endpoint\` - Individual API endpoint documentation
|
|
272
|
-
- \`api_spec\` - Complete API specification (collection of endpoints in one file)
|
|
273
|
-
- \`data_model\` - Individual database model/entity
|
|
274
|
-
- \`data_schema\` - Complete database schema (collection of models in one file)
|
|
275
|
-
- \`environment\` - Deployment environment configuration
|
|
276
|
-
- \`testing_strategy\` - Testing philosophy and standards
|
|
277
|
-
- \`cost_calculator\` - Infrastructure and operational costs breakdown
|
|
278
|
-
|
|
279
|
-
### design-system/
|
|
280
|
-
- \`storybook_link\` - Link to hosted Storybook with authentication
|
|
281
|
-
- \`figma_embed\` - Link to Figma design files
|
|
282
|
-
|
|
283
|
-
### information-architecture/
|
|
284
|
-
- \`ia_tree\` - Information architecture tree (page hierarchy with links)
|
|
285
|
-
- \`taxonomy\` - Hierarchical classification systems (content types, categories)
|
|
286
|
-
|
|
287
|
-
### metrics/
|
|
288
|
-
- \`metric\` - Unified metrics (north_star, kpi, supporting, input types via metric_type field)
|
|
289
|
-
- \`analytics_event\` - Analytics event definitions
|
|
290
|
-
|
|
291
|
-
### decisions/
|
|
292
|
-
- \`decision\` - Architecture Decision Records (ADRs)
|
|
293
|
-
|
|
294
|
-
### development/
|
|
295
|
-
- \`epic\` - Large initiatives that group user stories
|
|
296
|
-
- \`user_story\` - User-facing features with acceptance criteria
|
|
297
|
-
- \`task\` - Technical implementation tasks / AI agent plans
|
|
298
|
-
- \`roadmap\` - Timeline view of epics and milestones
|
|
299
|
-
- \`impact_effort_matrix\` - Prioritization matrix
|
|
300
|
-
- \`release\` - Release planning
|
|
301
|
-
|
|
302
|
-
### marketing/
|
|
303
|
-
- \`marketing_campaign\` - Paid advertising campaigns (Meta, Google, LinkedIn, TikTok) with creative assets
|
|
304
|
-
- \`seo_content\` - SEO content strategy and optimization plans
|
|
305
|
-
|
|
306
|
-
## Example Files
|
|
307
|
-
|
|
308
|
-
### Tone of Voice Block
|
|
309
|
-
\`\`\`markdown
|
|
310
|
-
---
|
|
311
|
-
type: tone_of_voice
|
|
312
|
-
section: brand
|
|
313
|
-
key: brand-voice
|
|
314
|
-
name: Brand Voice
|
|
315
|
-
status: draft
|
|
316
|
-
---
|
|
317
|
-
|
|
318
|
-
# Brand Voice
|
|
319
|
-
|
|
320
|
-
## Brand Personality
|
|
321
|
-
Professional, helpful, clear, innovative
|
|
322
|
-
|
|
323
|
-
**Archetype:** The Sage
|
|
324
|
-
|
|
325
|
-
## We Are...
|
|
326
|
-
- Clear and concise
|
|
327
|
-
- Helpful and supportive
|
|
328
|
-
- Professional yet approachable
|
|
329
|
-
|
|
330
|
-
## We Are NOT...
|
|
331
|
-
- Overly casual or slangy
|
|
332
|
-
- Condescending or preachy
|
|
333
|
-
\`\`\`
|
|
334
|
-
|
|
335
|
-
### Persona Block
|
|
336
|
-
\`\`\`markdown
|
|
337
|
-
---
|
|
338
|
-
type: persona
|
|
339
|
-
section: users
|
|
340
|
-
key: primary-user
|
|
341
|
-
name: Primary User Persona
|
|
342
|
-
status: draft
|
|
343
|
-
role: Product Manager
|
|
344
|
-
tech_comfort: advanced
|
|
345
|
-
is_primary: true
|
|
346
|
-
---
|
|
347
|
-
|
|
348
|
-
# Sarah - Product Manager
|
|
349
|
-
|
|
350
|
-
> "I need tools that help me stay organized without adding overhead."
|
|
351
|
-
|
|
352
|
-
**Role:** Product Manager
|
|
353
|
-
**Primary Persona:** true
|
|
354
|
-
**Tech Comfort:** advanced
|
|
355
|
-
|
|
356
|
-
## Profile
|
|
357
|
-
|
|
358
|
-
**Age:** 28-35
|
|
359
|
-
**Education:** Bachelor's
|
|
360
|
-
**Location:** San Francisco
|
|
361
|
-
**Gender:** Female
|
|
362
|
-
**Occupation:** Product Manager
|
|
363
|
-
**Relationship Status:**
|
|
364
|
-
|
|
365
|
-
**Personality Traits:** Organized, Data-driven, Collaborative
|
|
366
|
-
|
|
367
|
-
## Motivations
|
|
368
|
-
|
|
369
|
-
Values efficiency and wants to ensure the team works from a single source of truth.
|
|
370
|
-
|
|
371
|
-
## Goals
|
|
372
|
-
|
|
373
|
-
- Ship features faster
|
|
374
|
-
- Keep stakeholders informed
|
|
375
|
-
- Reduce context switching
|
|
376
|
-
|
|
377
|
-
## Pain Points
|
|
378
|
-
|
|
379
|
-
- Too many disconnected tools
|
|
380
|
-
- Context switching overhead
|
|
381
|
-
- Hard to keep documentation up to date
|
|
382
|
-
|
|
383
|
-
## Behaviors
|
|
384
|
-
|
|
385
|
-
- Uses multiple productivity tools daily
|
|
386
|
-
- Prefers async communication
|
|
387
|
-
- Documents decisions thoroughly
|
|
388
|
-
|
|
389
|
-
### Tools
|
|
390
|
-
Notion, Slack, Figma, Linear
|
|
391
|
-
|
|
392
|
-
## Jobs to Be Done
|
|
393
|
-
|
|
394
|
-
- When I plan a sprint, I want to see all relevant context, so I can make informed prioritization decisions
|
|
395
|
-
\`\`\`
|
|
396
|
-
|
|
397
|
-
### Decision Block (ADR)
|
|
398
|
-
\`\`\`markdown
|
|
399
|
-
---
|
|
400
|
-
type: decision
|
|
401
|
-
section: decisions
|
|
402
|
-
key: database-choice
|
|
403
|
-
name: Database Technology Choice
|
|
404
|
-
status: complete
|
|
405
|
-
---
|
|
406
|
-
|
|
407
|
-
# ADR-001: Database Technology Choice
|
|
408
|
-
|
|
409
|
-
**Date:** 2024-01-15
|
|
410
|
-
**Status:** Accepted
|
|
411
|
-
|
|
412
|
-
### Context
|
|
413
|
-
We need to choose a database for our application...
|
|
414
|
-
|
|
415
|
-
### Decision
|
|
416
|
-
We will use PostgreSQL with Supabase...
|
|
417
|
-
|
|
418
|
-
### Rationale
|
|
419
|
-
PostgreSQL offers the best balance of features...
|
|
420
|
-
|
|
421
|
-
### Consequences
|
|
422
|
-
- Need to set up Supabase project
|
|
423
|
-
- Team needs PostgreSQL knowledge
|
|
424
|
-
\`\`\`
|
|
425
|
-
|
|
426
|
-
### Feature Block
|
|
427
|
-
\`\`\`markdown
|
|
428
|
-
---
|
|
429
|
-
type: feature
|
|
430
|
-
section: product
|
|
431
|
-
key: user-auth
|
|
432
|
-
name: User Authentication
|
|
433
|
-
status: draft
|
|
434
|
-
---
|
|
435
|
-
|
|
436
|
-
# User Authentication
|
|
437
|
-
|
|
438
|
-
Enable users to create accounts and sign in securely.
|
|
439
|
-
|
|
440
|
-
**Priority:** Must Have
|
|
441
|
-
**Status:** Planned
|
|
442
|
-
|
|
443
|
-
### User Story
|
|
444
|
-
As a user, I want to create an account so that I can save my preferences.
|
|
445
|
-
|
|
446
|
-
### Acceptance Criteria
|
|
447
|
-
- Users can sign up with email
|
|
448
|
-
- Users can sign in with password
|
|
449
|
-
- Password reset flow works
|
|
450
|
-
\`\`\`
|
|
451
|
-
|
|
452
|
-
### Journey Map Block (with Block Reference)
|
|
453
|
-
\`\`\`markdown
|
|
454
|
-
---
|
|
455
|
-
type: journey_map
|
|
456
|
-
section: users
|
|
457
|
-
key: user-onboarding
|
|
458
|
-
name: User Onboarding Journey
|
|
459
|
-
status: draft
|
|
460
|
-
persona_ref: primary-user
|
|
461
|
-
---
|
|
462
|
-
|
|
463
|
-
# User Onboarding Journey
|
|
464
|
-
|
|
465
|
-
A journey map showing how new users get started with our product.
|
|
466
|
-
|
|
467
|
-
## Phases
|
|
468
|
-
1. Discovery
|
|
469
|
-
2. Sign Up
|
|
470
|
-
3. First Use
|
|
471
|
-
|
|
472
|
-
## Steps
|
|
473
|
-
|
|
474
|
-
### Step 1: Landing Page
|
|
475
|
-
**Phase:** Discovery
|
|
476
|
-
**Actions:**
|
|
477
|
-
- User visits homepage
|
|
478
|
-
- Reads value proposition
|
|
479
|
-
|
|
480
|
-
**Experience:**
|
|
481
|
-
- gain: Clear messaging (impact: 2)
|
|
482
|
-
- pain: Too much information (impact: -1)
|
|
483
|
-
|
|
484
|
-
**Insights:**
|
|
485
|
-
- Users want quick overview
|
|
486
|
-
\`\`\`
|
|
487
|
-
|
|
488
|
-
### Information Architecture Block (ia_tree)
|
|
489
|
-
|
|
490
|
-
IA tree blocks document the application's page hierarchy, navigation structure, and connections between pages. They use embedded JSON in a \`sync:data\` block with a \`tree\` (hierarchy) and \`links\` (connections) structure.
|
|
491
|
-
|
|
492
|
-
#### Purpose
|
|
493
|
-
- Map out the complete site/app structure visually
|
|
494
|
-
- Show parent-child relationships between pages
|
|
495
|
-
- Document modals, sections, and components within pages
|
|
496
|
-
- **Define connections/links between pages and components**
|
|
497
|
-
- Track page types with visual differentiation
|
|
498
|
-
|
|
499
|
-
#### Data Structure
|
|
500
|
-
|
|
501
|
-
The sync:data block contains two top-level properties:
|
|
502
|
-
|
|
503
|
-
\`\`\`json
|
|
504
|
-
{
|
|
505
|
-
"tree": { ... }, // The page/node hierarchy (IATreeNode)
|
|
506
|
-
"links": [ ... ] // Connections between nodes (IALink[])
|
|
507
|
-
}
|
|
508
|
-
\`\`\`
|
|
509
|
-
|
|
510
|
-
#### Node Structure (IATreeNode)
|
|
511
|
-
|
|
512
|
-
| Property | Required | Description |
|
|
513
|
-
|----------|----------|-------------|
|
|
514
|
-
| \`id\` | Yes | Unique identifier (use kebab-case, e.g., "user-settings") |
|
|
515
|
-
| \`label\` | Yes | Display name shown in the UI |
|
|
516
|
-
| \`type\` | Yes | Node type: \`page\`, \`modal\`, \`external\`, or \`node\` |
|
|
517
|
-
| \`url\` | No | Route path for navigable pages (e.g., "/dashboard") |
|
|
518
|
-
| \`description\` | No | Brief description of the page/section purpose |
|
|
519
|
-
| \`position\` | Yes | Visual position: \`{ "x": number, "y": number }\` |
|
|
520
|
-
| \`children\` | No | Array of child nodes |
|
|
521
|
-
| \`subNodes\` | No | Sections/components within this page |
|
|
522
|
-
| \`isNew\` | No | Flag to show "NEW" badge on the node |
|
|
523
|
-
|
|
524
|
-
#### Node Types (Visual Shapes)
|
|
525
|
-
|
|
526
|
-
| Type | Visual | Description |
|
|
527
|
-
|------|--------|-------------|
|
|
528
|
-
| \`page\` | Square (sharp corners) | A routable page/screen |
|
|
529
|
-
| \`modal\` | Rounded (large radius) | Modal/dialog overlay |
|
|
530
|
-
| \`external\` | Dashed border | External link |
|
|
531
|
-
| \`node\` | Rounded corners | Generic structural node |
|
|
532
|
-
|
|
533
|
-
#### Sub-Node Types (Content Areas Within Nodes)
|
|
534
|
-
|
|
535
|
-
| Type | Description |
|
|
536
|
-
|------|-------------|
|
|
537
|
-
| \`section\` | A major content section |
|
|
538
|
-
| \`component\` | A reusable UI component |
|
|
539
|
-
| \`widget\` | Interactive widget/feature |
|
|
540
|
-
|
|
541
|
-
Sub-nodes appear inside their parent node and can be the source of links to other nodes.
|
|
542
|
-
|
|
543
|
-
#### Link Structure (IALink)
|
|
544
|
-
|
|
545
|
-
Links define relationships and navigation paths between nodes. **IMPORTANT:** You MUST include the \`links\` array to show connections.
|
|
546
|
-
|
|
547
|
-
| Property | Required | Description |
|
|
548
|
-
|----------|----------|-------------|
|
|
549
|
-
| \`id\` | Yes | Unique ID for the link (e.g., "link-login-to-dashboard") |
|
|
550
|
-
| \`sourceId\` | Yes | ID of the source node |
|
|
551
|
-
| \`targetId\` | Yes | ID of the target node |
|
|
552
|
-
| \`sourceSubNodeId\` | No | If link starts from a sub-node, its ID |
|
|
553
|
-
| \`type\` | Yes | Link type (see below) |
|
|
554
|
-
| \`label\` | No | Description of the connection |
|
|
555
|
-
|
|
556
|
-
#### Link Types
|
|
557
|
-
|
|
558
|
-
| Type | Color | Style | Use Case |
|
|
559
|
-
|------|-------|-------|----------|
|
|
560
|
-
| \`action\` | Green (#22c55e) | Solid | User action that navigates (clicks, taps) |
|
|
561
|
-
| \`related\` | Purple (#8b5cf6) | Solid | Related content connection |
|
|
562
|
-
| \`parent\` | Blue (#3b82f6) | Solid | Parent-child hierarchy |
|
|
563
|
-
| \`references\` | Amber (#f59e0b) | Dashed | Content reference/link |
|
|
564
|
-
|
|
565
|
-
#### Connection Types
|
|
566
|
-
|
|
567
|
-
**1. Node → Node Connection:**
|
|
568
|
-
\`\`\`json
|
|
569
|
-
{
|
|
570
|
-
"id": "link-home-to-settings",
|
|
571
|
-
"sourceId": "home-page",
|
|
572
|
-
"targetId": "settings-modal",
|
|
573
|
-
"type": "action",
|
|
574
|
-
"label": "Opens settings"
|
|
575
|
-
}
|
|
576
|
-
\`\`\`
|
|
577
|
-
|
|
578
|
-
**2. Sub-Node → Node Connection:**
|
|
579
|
-
\`\`\`json
|
|
580
|
-
{
|
|
581
|
-
"id": "link-cta-to-signup",
|
|
582
|
-
"sourceId": "home-page",
|
|
583
|
-
"sourceSubNodeId": "hero-cta-button",
|
|
584
|
-
"targetId": "signup-page",
|
|
585
|
-
"type": "action",
|
|
586
|
-
"label": "Sign up CTA click"
|
|
587
|
-
}
|
|
588
|
-
\`\`\`
|
|
589
|
-
|
|
590
|
-
#### Complete Example
|
|
591
|
-
|
|
592
|
-
\`\`\`markdown
|
|
593
|
-
---
|
|
594
|
-
type: ia_tree
|
|
595
|
-
section: information-architecture
|
|
596
|
-
key: app-structure
|
|
597
|
-
name: Application Structure
|
|
598
|
-
status: draft
|
|
599
|
-
---
|
|
600
|
-
|
|
601
|
-
# Application Structure
|
|
602
|
-
|
|
603
|
-
Complete information architecture showing pages, modals, and navigation flows.
|
|
604
|
-
|
|
605
|
-
<!-- sync:data -->
|
|
606
|
-
\\\`\`\`json
|
|
607
|
-
{
|
|
608
|
-
"tree": {
|
|
609
|
-
"id": "app-root",
|
|
610
|
-
"label": "Application",
|
|
611
|
-
"type": "node",
|
|
612
|
-
"description": "Root application node",
|
|
613
|
-
"position": { "x": 50, "y": 50 },
|
|
614
|
-
"children": [
|
|
615
|
-
{
|
|
616
|
-
"id": "login",
|
|
617
|
-
"label": "Login",
|
|
618
|
-
"type": "page",
|
|
619
|
-
"url": "/login",
|
|
620
|
-
"position": { "x": 50, "y": 200 },
|
|
621
|
-
"subNodes": [
|
|
622
|
-
{ "id": "login-form", "name": "Login Form", "type": "component" },
|
|
623
|
-
{ "id": "forgot-link", "name": "Forgot Password Link", "type": "component" }
|
|
624
|
-
]
|
|
625
|
-
},
|
|
626
|
-
{
|
|
627
|
-
"id": "dashboard",
|
|
628
|
-
"label": "Dashboard",
|
|
629
|
-
"type": "page",
|
|
630
|
-
"url": "/dashboard",
|
|
631
|
-
"description": "Main workspace",
|
|
632
|
-
"position": { "x": 400, "y": 200 },
|
|
633
|
-
"subNodes": [
|
|
634
|
-
{ "id": "project-grid", "name": "Project Grid", "type": "section" },
|
|
635
|
-
{ "id": "create-btn", "name": "Create Project Button", "type": "component" }
|
|
636
|
-
]
|
|
637
|
-
},
|
|
638
|
-
{
|
|
639
|
-
"id": "new-project",
|
|
640
|
-
"label": "New Project",
|
|
641
|
-
"type": "modal",
|
|
642
|
-
"description": "Create project dialog",
|
|
643
|
-
"position": { "x": 750, "y": 200 }
|
|
644
|
-
}
|
|
645
|
-
]
|
|
646
|
-
},
|
|
647
|
-
"links": [
|
|
648
|
-
{
|
|
649
|
-
"id": "link-login-form-to-dashboard",
|
|
650
|
-
"sourceId": "login",
|
|
651
|
-
"sourceSubNodeId": "login-form",
|
|
652
|
-
"targetId": "dashboard",
|
|
653
|
-
"type": "action",
|
|
654
|
-
"label": "Successful login"
|
|
655
|
-
},
|
|
656
|
-
{
|
|
657
|
-
"id": "link-forgot-to-reset",
|
|
658
|
-
"sourceId": "login",
|
|
659
|
-
"sourceSubNodeId": "forgot-link",
|
|
660
|
-
"targetId": "password-reset",
|
|
661
|
-
"type": "action",
|
|
662
|
-
"label": "Forgot password flow"
|
|
663
|
-
},
|
|
664
|
-
{
|
|
665
|
-
"id": "link-create-btn-to-modal",
|
|
666
|
-
"sourceId": "dashboard",
|
|
667
|
-
"sourceSubNodeId": "create-btn",
|
|
668
|
-
"targetId": "new-project",
|
|
669
|
-
"type": "action",
|
|
670
|
-
"label": "Opens create dialog"
|
|
671
|
-
},
|
|
672
|
-
{
|
|
673
|
-
"id": "link-modal-to-dashboard",
|
|
674
|
-
"sourceId": "new-project",
|
|
675
|
-
"targetId": "dashboard",
|
|
676
|
-
"type": "action",
|
|
677
|
-
"label": "After creation, returns to dashboard"
|
|
678
|
-
}
|
|
679
|
-
]
|
|
680
|
-
}
|
|
681
|
-
\\\`\`\`
|
|
682
|
-
<!-- /sync:data -->
|
|
683
|
-
\`\`\`
|
|
684
|
-
|
|
685
|
-
#### Best Practices
|
|
686
|
-
|
|
687
|
-
1. **Always include positions for nodes:**
|
|
688
|
-
Space nodes ~300-400px apart horizontally, ~150-200px vertically to avoid overlap.
|
|
689
|
-
|
|
690
|
-
2. **Create meaningful connections:**
|
|
691
|
-
- Every sub-node that leads somewhere should have a link
|
|
692
|
-
- Data flows should show input → processing → output
|
|
693
|
-
- User journeys should connect in logical sequence
|
|
694
|
-
|
|
695
|
-
3. **Use descriptive IDs:**
|
|
696
|
-
- Node IDs: \`home-page\`, \`settings-modal\`, \`auth-flow\`
|
|
697
|
-
- Sub-node IDs: \`nav-menu\`, \`hero-cta\`, \`project-list\`
|
|
698
|
-
- Link IDs: \`link-nav-to-dashboard\`, \`link-cta-to-signup\`
|
|
699
|
-
|
|
700
|
-
4. **Group related nodes visually:**
|
|
701
|
-
- Authentication pages together (x: 50-300)
|
|
702
|
-
- Dashboard pages together (x: 400-700)
|
|
703
|
-
- Settings/admin together (x: 800-1100)
|
|
704
|
-
|
|
705
|
-
5. **Choose appropriate link types:**
|
|
706
|
-
- \`action\`: User clicks/taps to navigate
|
|
707
|
-
- \`related\`: Content is related but not direct navigation
|
|
708
|
-
- \`parent\`: Hierarchical relationship
|
|
709
|
-
- \`references\`: One content references another
|
|
710
|
-
|
|
711
|
-
#### Common Mistakes
|
|
712
|
-
|
|
713
|
-
WRONG: Missing links array
|
|
714
|
-
\`\`\`json
|
|
715
|
-
{ "tree": { "id": "root", ... } }
|
|
716
|
-
\`\`\`
|
|
717
|
-
|
|
718
|
-
CORRECT: Always include links (even if empty)
|
|
719
|
-
\`\`\`json
|
|
720
|
-
{ "tree": { "id": "root", ... }, "links": [] }
|
|
721
|
-
\`\`\`
|
|
722
|
-
|
|
723
|
-
WRONG: Missing position for nodes
|
|
724
|
-
\`\`\`json
|
|
725
|
-
{ "id": "dashboard", "label": "Dashboard", "type": "page" }
|
|
726
|
-
\`\`\`
|
|
727
|
-
|
|
728
|
-
CORRECT: Always include position
|
|
729
|
-
\`\`\`json
|
|
730
|
-
{ "id": "dashboard", "label": "Dashboard", "type": "page", "position": { "x": 400, "y": 200 } }
|
|
731
|
-
\`\`\`
|
|
732
|
-
|
|
733
|
-
WRONG: Link without type
|
|
734
|
-
\`\`\`json
|
|
735
|
-
{ "id": "link-1", "sourceId": "a", "targetId": "b" }
|
|
736
|
-
\`\`\`
|
|
737
|
-
|
|
738
|
-
CORRECT: Always specify link type
|
|
739
|
-
\`\`\`json
|
|
740
|
-
{ "id": "link-1", "sourceId": "a", "targetId": "b", "type": "action" }
|
|
741
|
-
\`\`\`
|
|
742
|
-
|
|
743
|
-
### Architecture Diagram Block (C4 Model)
|
|
744
|
-
|
|
745
|
-
Architecture diagram blocks document system architecture visually using the C4 model (Context, Container, Component). They use embedded JSON in a \`sync:data\` block with \`elements\` and \`connections\`.
|
|
746
|
-
|
|
747
|
-
#### Purpose
|
|
748
|
-
- Visualize system architecture at different abstraction levels
|
|
749
|
-
- Show how systems, containers, and components interact
|
|
750
|
-
- Document communication patterns and technologies
|
|
751
|
-
- Provide clear diagrams for different audiences (technical, leadership)
|
|
752
|
-
|
|
753
|
-
#### C4 Model Levels
|
|
754
|
-
|
|
755
|
-
| Level | Purpose | Shows | Audience |
|
|
756
|
-
|-------|---------|-------|----------|
|
|
757
|
-
| **Context** | Big picture | Systems + external actors | Everyone |
|
|
758
|
-
| **Container** | Applications & data stores | Apps, databases, services within your system | Technical + Leadership |
|
|
759
|
-
| **Component** | Inside a container | Components, modules, classes | Developers, Architects |
|
|
760
|
-
|
|
761
|
-
#### Data Structure
|
|
762
|
-
|
|
763
|
-
The sync:data block contains:
|
|
764
|
-
|
|
765
|
-
\`\`\`json
|
|
766
|
-
{
|
|
767
|
-
"elements": [ ... ], // Systems, containers, components, people
|
|
768
|
-
"connections": [ ... ], // Communication paths between elements
|
|
769
|
-
"legend": [ ... ] // Optional color legend
|
|
770
|
-
}
|
|
771
|
-
\`\`\`
|
|
772
|
-
|
|
773
|
-
#### Element Structure (ArchitectureElement)
|
|
774
|
-
|
|
775
|
-
| Property | Required | Description |
|
|
776
|
-
|----------|----------|-------------|
|
|
777
|
-
| \`id\` | Yes | Unique identifier (kebab-case, e.g., "web-app") |
|
|
778
|
-
| \`label\` | Yes | Display name shown in the diagram |
|
|
779
|
-
| \`type\` | Yes | Element type (see types below) |
|
|
780
|
-
| \`description\` | No | Brief description of what this element does |
|
|
781
|
-
| \`technology\` | No | Technology stack (e.g., "React", "Node.js", "PostgreSQL") |
|
|
782
|
-
| \`isExternal\` | No | True if outside your system boundary |
|
|
783
|
-
| \`position\` | Yes | Visual position: \`{ "x": number, "y": number }\` |
|
|
784
|
-
| \`color\` | No | Override default color (hex code) |
|
|
785
|
-
| \`icon\` | No | Lucide icon name for visual representation |
|
|
786
|
-
|
|
787
|
-
#### Element Types
|
|
788
|
-
|
|
789
|
-
| Type | Default Color | Description | Visual |
|
|
790
|
-
|------|--------------|-------------|--------|
|
|
791
|
-
| \`system\` | #438DD5 (blue) | Software system (yours or external) | Large box |
|
|
792
|
-
| \`container\` | #438DD5 (blue) | Application, service, database | Medium box |
|
|
793
|
-
| \`component\` | #85BBF0 (light blue) | Module, class, or logical component | Small box |
|
|
794
|
-
| \`person\` | #08427B (dark blue) | User, actor, or role | Person shape |
|
|
795
|
-
| \`database\` | #438DD5 (blue) | Data store (SQL, NoSQL, file) | Cylinder |
|
|
796
|
-
| \`queue\` | #438DD5 (blue) | Message queue, event stream | Rounded box |
|
|
797
|
-
| \`external\` | #999999 (gray) | External system you don't control | Dashed box |
|
|
798
|
-
|
|
799
|
-
#### Connection Structure (ArchitectureConnection)
|
|
800
|
-
|
|
801
|
-
| Property | Required | Description |
|
|
802
|
-
|----------|----------|-------------|
|
|
803
|
-
| \`id\` | Yes | Unique ID (e.g., "conn-web-to-api") |
|
|
804
|
-
| \`sourceId\` | Yes | ID of the source element |
|
|
805
|
-
| \`targetId\` | Yes | ID of the target element |
|
|
806
|
-
| \`label\` | No | Description of what flows (e.g., "REST API", "Events") |
|
|
807
|
-
| \`communicationType\` | No | Type of communication (see below) |
|
|
808
|
-
| \`technology\` | No | Protocol or technology (e.g., "HTTPS", "gRPC", "WebSocket") |
|
|
809
|
-
| \`description\` | No | Additional details about the connection |
|
|
810
|
-
|
|
811
|
-
#### Communication Types
|
|
812
|
-
|
|
813
|
-
| Type | Arrow Style | Description |
|
|
814
|
-
|------|-------------|-------------|
|
|
815
|
-
| \`sync\` | Solid → | Synchronous request/response |
|
|
816
|
-
| \`async\` | Dashed → | Asynchronous messaging |
|
|
817
|
-
| \`read\` | Solid → (read) | Data read operation |
|
|
818
|
-
| \`write\` | Solid → (write) | Data write operation |
|
|
819
|
-
| \`bidirectional\` | ↔ | Two-way communication |
|
|
820
|
-
|
|
821
|
-
#### Complete Example
|
|
822
|
-
|
|
823
|
-
\`\`\`markdown
|
|
824
|
-
---
|
|
825
|
-
type: architecture_diagram
|
|
826
|
-
section: technical
|
|
827
|
-
key: system-context
|
|
828
|
-
name: System Context Diagram
|
|
829
|
-
status: draft
|
|
830
|
-
level: context
|
|
831
|
-
audience: non-technical
|
|
832
|
-
---
|
|
833
|
-
|
|
834
|
-
# System Context Diagram
|
|
835
|
-
|
|
836
|
-
High-level overview of how our application fits into the broader ecosystem.
|
|
837
|
-
|
|
838
|
-
## Description
|
|
839
|
-
This diagram shows our EpicContext application and how it interacts with external users and systems.
|
|
840
|
-
|
|
841
|
-
<!-- sync:data -->
|
|
842
|
-
\\\`\`\`json
|
|
843
|
-
{
|
|
844
|
-
"elements": [
|
|
845
|
-
{
|
|
846
|
-
"id": "user",
|
|
847
|
-
"label": "Product Team",
|
|
848
|
-
"type": "person",
|
|
849
|
-
"description": "Uses EpicContext to manage product documentation",
|
|
850
|
-
"position": { "x": 400, "y": 50 }
|
|
851
|
-
},
|
|
852
|
-
{
|
|
853
|
-
"id": "epiccontext",
|
|
854
|
-
"label": "EpicContext",
|
|
855
|
-
"type": "system",
|
|
856
|
-
"description": "SaaS platform for managing design context documentation",
|
|
857
|
-
"technology": "Next.js, Supabase",
|
|
858
|
-
"position": { "x": 400, "y": 250 }
|
|
4
|
+
// Section metadata for modular AI guides
|
|
5
|
+
// Note: "section_guide" is allowed in ALL sections but is a generic/admin type
|
|
6
|
+
const SECTION_INFO = {
|
|
7
|
+
constitution: {
|
|
8
|
+
name: "Constitution",
|
|
9
|
+
description: "Non-negotiable rules for all work",
|
|
10
|
+
folder: "constitution",
|
|
11
|
+
blockTypes: ["ai_rules", "context_guide", "constraint", "glossary", "section_guide"],
|
|
859
12
|
},
|
|
860
|
-
{
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
"position": { "x": 700, "y": 50 }
|
|
13
|
+
brand: {
|
|
14
|
+
name: "Brand",
|
|
15
|
+
description: "Identity, voice, and visual expression",
|
|
16
|
+
folder: "brand",
|
|
17
|
+
blockTypes: ["brand_positioning", "brand_visual_identity", "brand_moodboard", "tone_of_voice", "messaging_framework", "section_guide"],
|
|
866
18
|
},
|
|
867
|
-
{
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
"technology": "PostgreSQL",
|
|
873
|
-
"isExternal": true,
|
|
874
|
-
"position": { "x": 400, "y": 450 }
|
|
19
|
+
product: {
|
|
20
|
+
name: "Product",
|
|
21
|
+
description: "Vision, features, and roadmap",
|
|
22
|
+
folder: "product",
|
|
23
|
+
blockTypes: ["product_overview", "feature", "product_strategy_canvas", "feature_market_analysis", "glossary", "section_guide"],
|
|
875
24
|
},
|
|
876
|
-
{
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
"isExternal": true,
|
|
882
|
-
"position": { "x": 150, "y": 250 }
|
|
25
|
+
users: {
|
|
26
|
+
name: "Users & Journeys",
|
|
27
|
+
description: "Personas, jobs to be done, and user journeys",
|
|
28
|
+
folder: "users",
|
|
29
|
+
blockTypes: ["persona", "jtbd", "journey_map", "section_guide"],
|
|
883
30
|
},
|
|
884
|
-
{
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
"technology": "Node.js",
|
|
890
|
-
"position": { "x": 700, "y": 250 }
|
|
891
|
-
}
|
|
892
|
-
],
|
|
893
|
-
"connections": [
|
|
894
|
-
{
|
|
895
|
-
"id": "conn-user-to-app",
|
|
896
|
-
"sourceId": "user",
|
|
897
|
-
"targetId": "epiccontext",
|
|
898
|
-
"label": "Manages documentation",
|
|
899
|
-
"communicationType": "sync",
|
|
900
|
-
"technology": "HTTPS"
|
|
31
|
+
research: {
|
|
32
|
+
name: "Research",
|
|
33
|
+
description: "Market, competitors, and insights",
|
|
34
|
+
folder: "research",
|
|
35
|
+
blockTypes: ["competitor", "user_research", "research_data", "section_guide"],
|
|
901
36
|
},
|
|
902
|
-
{
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
"communicationType": "sync",
|
|
908
|
-
"technology": "PostgreSQL/REST"
|
|
37
|
+
technical: {
|
|
38
|
+
name: "Technical",
|
|
39
|
+
description: "Stack, architecture, and constraints",
|
|
40
|
+
folder: "technical",
|
|
41
|
+
blockTypes: ["tech_stack", "architecture_diagram", "integration", "constraint", "dev_setup", "api_endpoint", "api_spec", "data_model", "data_schema", "environment", "testing_strategy", "cost_calculator", "section_guide"],
|
|
909
42
|
},
|
|
910
|
-
{
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
"communicationType": "sync",
|
|
916
|
-
"technology": "HTTPS"
|
|
43
|
+
"design-system": {
|
|
44
|
+
name: "Design System",
|
|
45
|
+
description: "Components, tokens, and implementation patterns",
|
|
46
|
+
folder: "design-system",
|
|
47
|
+
blockTypes: ["storybook_link", "figma_embed", "section_guide"],
|
|
917
48
|
},
|
|
918
|
-
{
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
"communicationType": "sync",
|
|
924
|
-
"technology": "REST API"
|
|
49
|
+
"information-architecture": {
|
|
50
|
+
name: "Information Architecture",
|
|
51
|
+
description: "Site structure and navigation hierarchy",
|
|
52
|
+
folder: "information-architecture",
|
|
53
|
+
blockTypes: ["ia_tree", "taxonomy", "section_guide"],
|
|
925
54
|
},
|
|
926
|
-
{
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
"communicationType": "read",
|
|
932
|
-
"technology": "MCP Protocol"
|
|
933
|
-
}
|
|
934
|
-
],
|
|
935
|
-
"legend": [
|
|
936
|
-
{ "color": "#08427B", "label": "Person/User" },
|
|
937
|
-
{ "color": "#438DD5", "label": "Our System" },
|
|
938
|
-
{ "color": "#999999", "label": "External System" }
|
|
939
|
-
]
|
|
940
|
-
}
|
|
941
|
-
\\\`\`\`
|
|
942
|
-
<!-- /sync:data -->
|
|
943
|
-
\`\`\`
|
|
944
|
-
|
|
945
|
-
#### Container Level Example
|
|
946
|
-
|
|
947
|
-
\`\`\`markdown
|
|
948
|
-
---
|
|
949
|
-
type: architecture_diagram
|
|
950
|
-
section: technical
|
|
951
|
-
key: container-diagram
|
|
952
|
-
name: Container Diagram
|
|
953
|
-
status: draft
|
|
954
|
-
level: container
|
|
955
|
-
audience: technical
|
|
956
|
-
---
|
|
957
|
-
|
|
958
|
-
# Container Diagram
|
|
959
|
-
|
|
960
|
-
Applications and data stores that make up EpicContext.
|
|
961
|
-
|
|
962
|
-
<!-- sync:data -->
|
|
963
|
-
\\\`\`\`json
|
|
964
|
-
{
|
|
965
|
-
"elements": [
|
|
966
|
-
{
|
|
967
|
-
"id": "web-app",
|
|
968
|
-
"label": "Web Application",
|
|
969
|
-
"type": "container",
|
|
970
|
-
"description": "SPA for managing context",
|
|
971
|
-
"technology": "Next.js 14, React, TypeScript",
|
|
972
|
-
"position": { "x": 200, "y": 100 }
|
|
55
|
+
metrics: {
|
|
56
|
+
name: "Metrics",
|
|
57
|
+
description: "KPIs and analytics",
|
|
58
|
+
folder: "metrics",
|
|
59
|
+
blockTypes: ["metric", "north_star", "kpi", "analytics_event", "section_guide"],
|
|
973
60
|
},
|
|
974
|
-
{
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
"technology": "Next.js API Routes",
|
|
980
|
-
"position": { "x": 500, "y": 100 }
|
|
61
|
+
decisions: {
|
|
62
|
+
name: "Decisions",
|
|
63
|
+
description: "What we decided and why",
|
|
64
|
+
folder: "decisions",
|
|
65
|
+
blockTypes: ["decision", "section_guide"],
|
|
981
66
|
},
|
|
982
|
-
{
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
"technology": "PostgreSQL (Supabase)",
|
|
988
|
-
"position": { "x": 500, "y": 300 }
|
|
67
|
+
development: {
|
|
68
|
+
name: "Development",
|
|
69
|
+
description: "Epics, user stories, tasks, roadmap, and prioritization",
|
|
70
|
+
folder: "development",
|
|
71
|
+
blockTypes: ["epic", "user_story", "task", "roadmap", "impact_effort_matrix", "kanban_board", "section_guide"],
|
|
989
72
|
},
|
|
990
|
-
{
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
"technology": "Supabase Storage",
|
|
996
|
-
"position": { "x": 200, "y": 300 }
|
|
73
|
+
"business-strategy": {
|
|
74
|
+
name: "Business & Strategy",
|
|
75
|
+
description: "Strategic planning frameworks and business models",
|
|
76
|
+
folder: "business-strategy",
|
|
77
|
+
blockTypes: ["ogsm", "business_model_canvas", "swot_analysis", "porters_five_forces", "strategic_group_map", "obeya_board", "section_guide"],
|
|
997
78
|
},
|
|
998
|
-
{
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
"technology": "Node.js, TypeScript",
|
|
1004
|
-
"position": { "x": 750, "y": 200 }
|
|
1005
|
-
}
|
|
1006
|
-
],
|
|
1007
|
-
"connections": [
|
|
1008
|
-
{
|
|
1009
|
-
"id": "conn-web-to-api",
|
|
1010
|
-
"sourceId": "web-app",
|
|
1011
|
-
"targetId": "api",
|
|
1012
|
-
"label": "API calls",
|
|
1013
|
-
"communicationType": "sync",
|
|
1014
|
-
"technology": "HTTPS/JSON"
|
|
79
|
+
marketing: {
|
|
80
|
+
name: "Marketing",
|
|
81
|
+
description: "Marketing campaigns, ads, and content strategy",
|
|
82
|
+
folder: "marketing",
|
|
83
|
+
blockTypes: ["marketing_campaign", "seo_content", "section_guide"],
|
|
1015
84
|
},
|
|
1016
|
-
{
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
"communicationType": "bidirectional",
|
|
1022
|
-
"technology": "Supabase Client"
|
|
85
|
+
environments: {
|
|
86
|
+
name: "Environments",
|
|
87
|
+
description: "Environment links, deployments, and release notes",
|
|
88
|
+
folder: "environments",
|
|
89
|
+
blockTypes: ["environment_link", "release_note", "section_guide"],
|
|
1023
90
|
},
|
|
1024
|
-
{
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
"communicationType": "bidirectional",
|
|
1030
|
-
"technology": "Supabase Storage API"
|
|
91
|
+
reports: {
|
|
92
|
+
name: "Reports",
|
|
93
|
+
description: "Business cases, pain point analysis, and user sentiment reports",
|
|
94
|
+
folder: "reports",
|
|
95
|
+
blockTypes: ["business_case", "pain_points_report", "user_sentiment_report", "section_guide"],
|
|
1031
96
|
},
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
\`\`\`
|
|
1045
|
-
|
|
1046
|
-
#### Best Practices
|
|
1047
|
-
|
|
1048
|
-
1. **Choose the right level:**
|
|
1049
|
-
- Start with Context for stakeholder communication
|
|
1050
|
-
- Use Container for development planning
|
|
1051
|
-
- Use Component for detailed design of complex containers
|
|
1052
|
-
|
|
1053
|
-
2. **Position elements logically:**
|
|
1054
|
-
- Users/actors at top
|
|
1055
|
-
- Your system in the middle
|
|
1056
|
-
- External dependencies at bottom or sides
|
|
1057
|
-
- Space elements ~200-300px apart
|
|
1058
|
-
|
|
1059
|
-
3. **Label connections clearly:**
|
|
1060
|
-
- Use verbs: "Reads data", "Sends events", "Authenticates"
|
|
1061
|
-
- Include technology when relevant: "REST API", "gRPC", "WebSocket"
|
|
1062
|
-
- Keep labels concise but informative
|
|
1063
|
-
|
|
1064
|
-
4. **Use consistent colors:**
|
|
1065
|
-
- Blue (#438DD5) for your internal systems
|
|
1066
|
-
- Gray (#999999) for external systems
|
|
1067
|
-
- Dark blue (#08427B) for people/users
|
|
1068
|
-
- Add legend for custom colors
|
|
1069
|
-
|
|
1070
|
-
5. **Include technology details:**
|
|
1071
|
-
- For Container level: framework, language, runtime
|
|
1072
|
-
- For connections: protocol, message format
|
|
1073
|
-
- Helps developers understand the stack
|
|
1074
|
-
|
|
1075
|
-
6. **Keep diagrams focused:**
|
|
1076
|
-
- Context: 3-6 systems maximum
|
|
1077
|
-
- Container: 5-10 containers maximum
|
|
1078
|
-
- Component: 5-15 components maximum
|
|
1079
|
-
- Create multiple diagrams if needed
|
|
1080
|
-
|
|
1081
|
-
#### Common Mistakes
|
|
1082
|
-
|
|
1083
|
-
WRONG: Missing positions
|
|
1084
|
-
\`\`\`json
|
|
1085
|
-
{ "id": "api", "label": "API", "type": "container" }
|
|
1086
|
-
\`\`\`
|
|
1087
|
-
|
|
1088
|
-
CORRECT: Always include positions
|
|
1089
|
-
\`\`\`json
|
|
1090
|
-
{ "id": "api", "label": "API", "type": "container", "position": { "x": 400, "y": 200 } }
|
|
1091
|
-
\`\`\`
|
|
1092
|
-
|
|
1093
|
-
WRONG: Vague connection labels
|
|
1094
|
-
\`\`\`json
|
|
1095
|
-
{ "id": "conn-1", "sourceId": "a", "targetId": "b", "label": "uses" }
|
|
1096
|
-
\`\`\`
|
|
1097
|
-
|
|
1098
|
-
CORRECT: Specific, actionable labels
|
|
1099
|
-
\`\`\`json
|
|
1100
|
-
{ "id": "conn-1", "sourceId": "a", "targetId": "b", "label": "Fetches user data", "technology": "REST API" }
|
|
1101
|
-
\`\`\`
|
|
1102
|
-
|
|
1103
|
-
WRONG: Too many elements on one diagram
|
|
1104
|
-
Create separate diagrams for different aspects or zoom levels.
|
|
1105
|
-
|
|
1106
|
-
CORRECT: Focused diagrams
|
|
1107
|
-
- One Context diagram for the big picture
|
|
1108
|
-
- Separate Container diagrams per major system
|
|
1109
|
-
- Component diagrams only for complex containers
|
|
1110
|
-
|
|
1111
|
-
### Brand Section Blocks
|
|
1112
|
-
|
|
1113
|
-
The brand section uses specialized visual block types that store complex data. These blocks use embedded JSON in \`sync:data\` blocks for reliable import/export.
|
|
1114
|
-
|
|
1115
|
-
#### Brand Positioning Block
|
|
1116
|
-
|
|
1117
|
-
Documents strategic brand positioning using the Golden Circle (WHY/HOW/WHAT) and Positioning Statement frameworks.
|
|
1118
|
-
|
|
1119
|
-
**Fields:**
|
|
1120
|
-
- \`brand_name\` - Your brand name
|
|
1121
|
-
- \`tagline\` - Brand slogan/tagline
|
|
1122
|
-
- \`positioning_statement\` - Structured positioning statement
|
|
1123
|
-
- \`why_purpose\` - WHY: Why does the brand exist?
|
|
1124
|
-
- \`how_approach\` - HOW: How do you deliver on your WHY?
|
|
1125
|
-
- \`what_offering\` - WHAT: What products/services do you offer?
|
|
1126
|
-
|
|
1127
|
-
**Example:**
|
|
1128
|
-
\`\`\`markdown
|
|
1129
|
-
---
|
|
1130
|
-
type: brand_positioning
|
|
1131
|
-
section: brand
|
|
1132
|
-
key: main-positioning
|
|
1133
|
-
name: Brand Positioning
|
|
1134
|
-
status: complete
|
|
1135
|
-
---
|
|
1136
|
-
|
|
1137
|
-
# Brand Positioning
|
|
1138
|
-
|
|
1139
|
-
Our strategic brand positioning defines why we exist and how we communicate value.
|
|
1140
|
-
|
|
1141
|
-
## Brand Identity
|
|
1142
|
-
|
|
1143
|
-
**Brand Name:** EpicContext
|
|
1144
|
-
**Tagline:** Context for AI, Clarity for Teams
|
|
1145
|
-
|
|
1146
|
-
## Positioning Statement
|
|
1147
|
-
|
|
1148
|
-
For **product teams who use AI coding agents**,
|
|
1149
|
-
**EpicContext** is the **context management platform**
|
|
1150
|
-
that **gives AI agents complete product understanding**
|
|
1151
|
-
unlike **scattered docs and chat conversations**,
|
|
1152
|
-
because **we structure context in AI-native formats**.
|
|
1153
|
-
|
|
1154
|
-
## Golden Circle (WHY → HOW → WHAT)
|
|
1155
|
-
|
|
1156
|
-
### WHY - The Purpose
|
|
1157
|
-
We believe AI coding agents can build better software when they truly understand the product context. We exist to bridge the gap between human knowledge and AI capability.
|
|
1158
|
-
|
|
1159
|
-
### HOW - The Unique Approach
|
|
1160
|
-
By providing structured, versioned context documentation that syncs directly to codebases and AI tools, with visual editors that make documentation effortless.
|
|
1161
|
-
|
|
1162
|
-
### WHAT - The Products/Services
|
|
1163
|
-
A SaaS platform with block-based editors for brand, product, users, and technical context, plus MCP integration for Claude and other AI agents.
|
|
1164
|
-
|
|
1165
|
-
<!-- sync:data -->
|
|
1166
|
-
\\\`\`\`json
|
|
1167
|
-
{
|
|
1168
|
-
"brand_name": "EpicContext",
|
|
1169
|
-
"tagline": "Context for AI, Clarity for Teams",
|
|
1170
|
-
"positioning_statement": {
|
|
1171
|
-
"target_market": "product teams who use AI coding agents",
|
|
1172
|
-
"category": "context management platform",
|
|
1173
|
-
"unique_benefit": "gives AI agents complete product understanding",
|
|
1174
|
-
"competitors": "scattered docs and chat conversations",
|
|
1175
|
-
"reason_to_believe": "we structure context in AI-native formats"
|
|
1176
|
-
},
|
|
1177
|
-
"why_purpose": "We believe AI coding agents can build better software when they truly understand the product context. We exist to bridge the gap between human knowledge and AI capability.",
|
|
1178
|
-
"how_approach": "By providing structured, versioned context documentation that syncs directly to codebases and AI tools, with visual editors that make documentation effortless.",
|
|
1179
|
-
"what_offering": "A SaaS platform with block-based editors for brand, product, users, and technical context, plus MCP integration for Claude and other AI agents."
|
|
1180
|
-
}
|
|
1181
|
-
\\\`\`\`
|
|
1182
|
-
<!-- /sync:data -->
|
|
1183
|
-
\`\`\`
|
|
1184
|
-
|
|
1185
|
-
---
|
|
1186
|
-
|
|
1187
|
-
#### Brand Color Palette Block
|
|
1188
|
-
|
|
1189
|
-
Visual color palette with multiple color definitions including hex, RGB, CMYK, and Pantone values.
|
|
1190
|
-
|
|
1191
|
-
**Structure:**
|
|
1192
|
-
\`\`\`json
|
|
1193
|
-
{
|
|
1194
|
-
"description": "Overview of the color palette",
|
|
1195
|
-
"palette": {
|
|
1196
|
-
"colors": [
|
|
1197
|
-
{
|
|
1198
|
-
"id": "unique-id",
|
|
1199
|
-
"name": "Color Name",
|
|
1200
|
-
"hex": "#RRGGBB",
|
|
1201
|
-
"rgb": "R, G, B",
|
|
1202
|
-
"cmyk": "C, M, Y, K",
|
|
1203
|
-
"pantone": "Pantone Code",
|
|
1204
|
-
"category": "primary|secondary|neutral|accent|semantic",
|
|
1205
|
-
"usage": "When to use this color"
|
|
1206
|
-
}
|
|
1207
|
-
]
|
|
1208
|
-
},
|
|
1209
|
-
"usage_guidelines": "General color usage guidelines"
|
|
1210
|
-
}
|
|
1211
|
-
\`\`\`
|
|
1212
|
-
|
|
1213
|
-
**Example:**
|
|
1214
|
-
\`\`\`markdown
|
|
1215
|
-
---
|
|
1216
|
-
type: brand_color_palette
|
|
1217
|
-
section: brand
|
|
1218
|
-
key: primary-colors
|
|
1219
|
-
name: Primary Brand Colors
|
|
1220
|
-
status: complete
|
|
1221
|
-
---
|
|
1222
|
-
|
|
1223
|
-
# Primary Brand Colors
|
|
1224
|
-
|
|
1225
|
-
Our primary color palette establishes brand recognition and visual hierarchy.
|
|
1226
|
-
|
|
1227
|
-
## Colors
|
|
1228
|
-
|
|
1229
|
-
### EpicContext Blue
|
|
1230
|
-
- HEX: #3B82F6
|
|
1231
|
-
- RGB: 59, 130, 246
|
|
1232
|
-
- Usage: Primary actions, links, brand elements
|
|
1233
|
-
|
|
1234
|
-
### Success Green
|
|
1235
|
-
- HEX: #22C55E
|
|
1236
|
-
- RGB: 34, 197, 94
|
|
1237
|
-
- Usage: Success states, positive actions
|
|
1238
|
-
|
|
1239
|
-
### Dark Gray
|
|
1240
|
-
- HEX: #1F2937
|
|
1241
|
-
- RGB: 31, 41, 55
|
|
1242
|
-
- Usage: Primary text, headings
|
|
1243
|
-
|
|
1244
|
-
## Usage Guidelines
|
|
1245
|
-
Use EpicContext Blue for primary CTAs and brand elements. Reserve Success Green for positive feedback only.
|
|
1246
|
-
|
|
1247
|
-
<!-- sync:data -->
|
|
1248
|
-
\\\`\`\`json
|
|
1249
|
-
{
|
|
1250
|
-
"description": "Our primary color palette establishes brand recognition and visual hierarchy.",
|
|
1251
|
-
"palette": {
|
|
1252
|
-
"colors": [
|
|
1253
|
-
{
|
|
1254
|
-
"id": "brand-blue",
|
|
1255
|
-
"name": "EpicContext Blue",
|
|
1256
|
-
"hex": "#3B82F6",
|
|
1257
|
-
"rgb": "59, 130, 246",
|
|
1258
|
-
"category": "primary",
|
|
1259
|
-
"usage": "Primary actions, links, brand elements"
|
|
1260
|
-
},
|
|
1261
|
-
{
|
|
1262
|
-
"id": "success-green",
|
|
1263
|
-
"name": "Success Green",
|
|
1264
|
-
"hex": "#22C55E",
|
|
1265
|
-
"rgb": "34, 197, 94",
|
|
1266
|
-
"category": "semantic",
|
|
1267
|
-
"usage": "Success states, positive actions"
|
|
1268
|
-
},
|
|
1269
|
-
{
|
|
1270
|
-
"id": "dark-gray",
|
|
1271
|
-
"name": "Dark Gray",
|
|
1272
|
-
"hex": "#1F2937",
|
|
1273
|
-
"rgb": "31, 41, 55",
|
|
1274
|
-
"category": "neutral",
|
|
1275
|
-
"usage": "Primary text, headings"
|
|
1276
|
-
}
|
|
1277
|
-
]
|
|
1278
|
-
},
|
|
1279
|
-
"usage_guidelines": "Use EpicContext Blue for primary CTAs and brand elements. Reserve Success Green for positive feedback only."
|
|
1280
|
-
}
|
|
1281
|
-
\\\`\`\`
|
|
1282
|
-
<!-- /sync:data -->
|
|
1283
|
-
\`\`\`
|
|
1284
|
-
|
|
1285
|
-
---
|
|
1286
|
-
|
|
1287
|
-
#### Brand Typography Block
|
|
1288
|
-
|
|
1289
|
-
Typography system with font family, weights, and preview sizes.
|
|
1290
|
-
|
|
1291
|
-
**Structure:**
|
|
1292
|
-
\`\`\`json
|
|
1293
|
-
{
|
|
1294
|
-
"description": "Overview of typography choices",
|
|
1295
|
-
"typography": {
|
|
1296
|
-
"fontFamily": "Font Name",
|
|
1297
|
-
"fontRole": "primary|secondary|display|code",
|
|
1298
|
-
"fontSource": "google|adobe|system|custom",
|
|
1299
|
-
"fontSourceUrl": "URL to font",
|
|
1300
|
-
"weights": ["400", "500", "600", "700"],
|
|
1301
|
-
"styles": ["normal", "italic"],
|
|
1302
|
-
"usage": "When to use this font"
|
|
1303
|
-
}
|
|
1304
|
-
}
|
|
1305
|
-
\`\`\`
|
|
1306
|
-
|
|
1307
|
-
**Example:**
|
|
1308
|
-
\`\`\`markdown
|
|
1309
|
-
---
|
|
1310
|
-
type: brand_typography
|
|
1311
|
-
section: brand
|
|
1312
|
-
key: primary-typography
|
|
1313
|
-
name: Primary Typography
|
|
1314
|
-
status: complete
|
|
1315
|
-
---
|
|
1316
|
-
|
|
1317
|
-
# Primary Typography
|
|
1318
|
-
|
|
1319
|
-
Our typography system uses Inter for its excellent readability and modern aesthetic.
|
|
1320
|
-
|
|
1321
|
-
## Font
|
|
1322
|
-
|
|
1323
|
-
**Family:** Inter
|
|
1324
|
-
**Role:** Primary (headings and body)
|
|
1325
|
-
**Source:** Google Fonts
|
|
1326
|
-
|
|
1327
|
-
### Weights
|
|
1328
|
-
- 400 (Regular)
|
|
1329
|
-
- 500 (Medium)
|
|
1330
|
-
- 600 (SemiBold)
|
|
1331
|
-
- 700 (Bold)
|
|
1332
|
-
|
|
1333
|
-
### Usage
|
|
1334
|
-
Use Inter for all UI text, headings, and body copy. Use 600 weight for emphasis, 700 for headings.
|
|
1335
|
-
|
|
1336
|
-
<!-- sync:data -->
|
|
1337
|
-
\\\`\`\`json
|
|
1338
|
-
{
|
|
1339
|
-
"description": "Our typography system uses Inter for its excellent readability and modern aesthetic.",
|
|
1340
|
-
"typography": {
|
|
1341
|
-
"fontFamily": "Inter",
|
|
1342
|
-
"fontRole": "primary",
|
|
1343
|
-
"fontSource": "google",
|
|
1344
|
-
"fontSourceUrl": "https://fonts.google.com/specimen/Inter",
|
|
1345
|
-
"weights": ["400", "500", "600", "700"],
|
|
1346
|
-
"styles": ["normal"],
|
|
1347
|
-
"usage": "Use Inter for all UI text, headings, and body copy. Use 600 weight for emphasis, 700 for headings."
|
|
1348
|
-
}
|
|
1349
|
-
}
|
|
1350
|
-
\\\`\`\`
|
|
1351
|
-
<!-- /sync:data -->
|
|
1352
|
-
\`\`\`
|
|
1353
|
-
|
|
1354
|
-
---
|
|
1355
|
-
|
|
1356
|
-
#### Brand Iconography Block
|
|
1357
|
-
|
|
1358
|
-
Icon library selection with style settings and curated icon list.
|
|
1359
|
-
|
|
1360
|
-
**Structure:**
|
|
1361
|
-
\`\`\`json
|
|
1362
|
-
{
|
|
1363
|
-
"description": "Overview of iconography style",
|
|
1364
|
-
"iconography": {
|
|
1365
|
-
"library": "lucide|heroicons|phosphor|feather|custom",
|
|
1366
|
-
"style": "outline|solid|duotone",
|
|
1367
|
-
"strokeWidth": 2,
|
|
1368
|
-
"defaultSize": 24,
|
|
1369
|
-
"cornerStyle": "rounded|sharp",
|
|
1370
|
-
"selectedIcons": ["icon-name-1", "icon-name-2"],
|
|
1371
|
-
"usage": "How to use icons"
|
|
1372
|
-
}
|
|
1373
|
-
}
|
|
1374
|
-
\`\`\`
|
|
1375
|
-
|
|
1376
|
-
**Example:**
|
|
1377
|
-
\`\`\`markdown
|
|
1378
|
-
---
|
|
1379
|
-
type: brand_iconography
|
|
1380
|
-
section: brand
|
|
1381
|
-
key: icon-system
|
|
1382
|
-
name: Icon System
|
|
1383
|
-
status: complete
|
|
1384
|
-
---
|
|
1385
|
-
|
|
1386
|
-
# Icon System
|
|
1387
|
-
|
|
1388
|
-
We use Lucide icons with consistent styling across all interfaces.
|
|
1389
|
-
|
|
1390
|
-
## Icon Library
|
|
1391
|
-
|
|
1392
|
-
**Library:** Lucide
|
|
1393
|
-
**Style:** Outline
|
|
1394
|
-
**Stroke Width:** 2px
|
|
1395
|
-
**Default Size:** 24px
|
|
1396
|
-
|
|
1397
|
-
### Selected Brand Icons
|
|
1398
|
-
- Home, Search, Settings
|
|
1399
|
-
- User, Users, Bell
|
|
1400
|
-
- File, Folder, Upload
|
|
1401
|
-
|
|
1402
|
-
### Usage Guidelines
|
|
1403
|
-
Always use outline style. Maintain 2px stroke width. Use 24px for standard UI, 20px for compact areas.
|
|
1404
|
-
|
|
1405
|
-
<!-- sync:data -->
|
|
1406
|
-
\\\`\`\`json
|
|
1407
|
-
{
|
|
1408
|
-
"description": "We use Lucide icons with consistent styling across all interfaces.",
|
|
1409
|
-
"iconography": {
|
|
1410
|
-
"library": "lucide",
|
|
1411
|
-
"style": "outline",
|
|
1412
|
-
"strokeWidth": 2,
|
|
1413
|
-
"defaultSize": 24,
|
|
1414
|
-
"cornerStyle": "rounded",
|
|
1415
|
-
"selectedIcons": ["home", "search", "settings", "user", "users", "bell", "file", "folder", "upload"],
|
|
1416
|
-
"usage": "Always use outline style. Maintain 2px stroke width. Use 24px for standard UI, 20px for compact areas."
|
|
1417
|
-
}
|
|
1418
|
-
}
|
|
1419
|
-
\\\`\`\`
|
|
1420
|
-
<!-- /sync:data -->
|
|
1421
|
-
\`\`\`
|
|
1422
|
-
|
|
1423
|
-
---
|
|
1424
|
-
|
|
1425
|
-
#### Logo Block
|
|
1426
|
-
|
|
1427
|
-
Logo assets with multiple background versions and usage guidelines.
|
|
1428
|
-
|
|
1429
|
-
**Structure:**
|
|
1430
|
-
\`\`\`json
|
|
1431
|
-
{
|
|
1432
|
-
"description": "Overview of this logo variant",
|
|
1433
|
-
"logo": {
|
|
1434
|
-
"logoType": "primary|secondary|wordmark|icon|monochrome",
|
|
1435
|
-
"versions": [
|
|
1436
|
-
{
|
|
1437
|
-
"id": "version-id",
|
|
1438
|
-
"url": "https://storage.example.com/logo.svg",
|
|
1439
|
-
"backgroundColor": "#FFFFFF",
|
|
1440
|
-
"backgroundName": "Light Background"
|
|
1441
|
-
}
|
|
1442
|
-
],
|
|
1443
|
-
"primaryColor": "#3B82F6",
|
|
1444
|
-
"secondaryColor": "#1F2937",
|
|
1445
|
-
"minimumSize": "32px",
|
|
1446
|
-
"clearSpace": "1x logo height",
|
|
1447
|
-
"usageGuidelines": "When and how to use this logo",
|
|
1448
|
-
"donts": "What to avoid"
|
|
1449
|
-
}
|
|
1450
|
-
}
|
|
1451
|
-
\`\`\`
|
|
1452
|
-
|
|
1453
|
-
**Example:**
|
|
1454
|
-
\`\`\`markdown
|
|
1455
|
-
---
|
|
1456
|
-
type: logo
|
|
1457
|
-
section: brand
|
|
1458
|
-
key: primary-logo
|
|
1459
|
-
name: Primary Logo
|
|
1460
|
-
status: complete
|
|
1461
|
-
---
|
|
1462
|
-
|
|
1463
|
-
# Primary Logo
|
|
1464
|
-
|
|
1465
|
-
Our primary logo for use across all brand touchpoints.
|
|
1466
|
-
|
|
1467
|
-
## Description
|
|
1468
|
-
The primary EpicContext logo combines the mark with the wordmark for maximum brand recognition.
|
|
1469
|
-
|
|
1470
|
-
## Logo Versions
|
|
1471
|
-
|
|
1472
|
-
### Light Background (#FFFFFF)
|
|
1473
|
-
[Logo image on white background]
|
|
1474
|
-
|
|
1475
|
-
### Dark Background (#1A1A1A)
|
|
1476
|
-
[Logo image on dark background]
|
|
1477
|
-
|
|
1478
|
-
## Logo Colors
|
|
1479
|
-
- Primary: #3B82F6
|
|
1480
|
-
- Secondary: #1F2937
|
|
1481
|
-
|
|
1482
|
-
## Sizing
|
|
1483
|
-
- Minimum Size: 32px height
|
|
1484
|
-
- Clear Space: 1x logo height around all sides
|
|
1485
|
-
|
|
1486
|
-
## Usage Guidelines
|
|
1487
|
-
Use the full logo on marketing materials, website headers, and official documents. Use the icon only where space is limited.
|
|
1488
|
-
|
|
1489
|
-
## Don't
|
|
1490
|
-
- Don't stretch or distort the logo
|
|
1491
|
-
- Don't change the colors
|
|
1492
|
-
- Don't place on busy backgrounds
|
|
1493
|
-
- Don't add effects or shadows
|
|
1494
|
-
|
|
1495
|
-
<!-- sync:data -->
|
|
1496
|
-
\\\`\`\`json
|
|
1497
|
-
{
|
|
1498
|
-
"description": "The primary EpicContext logo combines the mark with the wordmark for maximum brand recognition.",
|
|
1499
|
-
"logo": {
|
|
1500
|
-
"logoType": "primary",
|
|
1501
|
-
"versions": [
|
|
1502
|
-
{
|
|
1503
|
-
"id": "light",
|
|
1504
|
-
"url": "",
|
|
1505
|
-
"backgroundColor": "#FFFFFF",
|
|
1506
|
-
"backgroundName": "Light Background"
|
|
1507
|
-
},
|
|
1508
|
-
{
|
|
1509
|
-
"id": "dark",
|
|
1510
|
-
"url": "",
|
|
1511
|
-
"backgroundColor": "#1A1A1A",
|
|
1512
|
-
"backgroundName": "Dark Background"
|
|
1513
|
-
}
|
|
1514
|
-
],
|
|
1515
|
-
"primaryColor": "#3B82F6",
|
|
1516
|
-
"secondaryColor": "#1F2937",
|
|
1517
|
-
"minimumSize": "32px",
|
|
1518
|
-
"clearSpace": "1x logo height",
|
|
1519
|
-
"usageGuidelines": "Use the full logo on marketing materials, website headers, and official documents. Use the icon only where space is limited.",
|
|
1520
|
-
"donts": "Don't stretch or distort the logo. Don't change the colors. Don't place on busy backgrounds. Don't add effects or shadows."
|
|
1521
|
-
}
|
|
1522
|
-
}
|
|
1523
|
-
\\\`\`\`
|
|
1524
|
-
<!-- /sync:data -->
|
|
1525
|
-
\`\`\`
|
|
1526
|
-
|
|
1527
|
-
---
|
|
1528
|
-
|
|
1529
|
-
#### Brand Assets Block
|
|
1530
|
-
|
|
1531
|
-
Visual assets library for photography, illustrations, patterns, and other brand graphics.
|
|
1532
|
-
|
|
1533
|
-
**Structure:**
|
|
1534
|
-
\`\`\`json
|
|
1535
|
-
{
|
|
1536
|
-
"name": "Collection Name",
|
|
1537
|
-
"description": "Overview of this asset collection",
|
|
1538
|
-
"assets": {
|
|
1539
|
-
"assets": [
|
|
1540
|
-
{
|
|
1541
|
-
"id": "unique-id",
|
|
1542
|
-
"category": "photography|illustration|pattern|texture|icon|graphic|template|background|other",
|
|
1543
|
-
"url": "https://storage.example.com/asset.jpg",
|
|
1544
|
-
"name": "Asset Name",
|
|
1545
|
-
"backgroundColor": "#F5F5F5",
|
|
1546
|
-
"description": "Asset description"
|
|
1547
|
-
}
|
|
1548
|
-
],
|
|
1549
|
-
"sizes": [
|
|
1550
|
-
{ "name": "Full", "size": 200 },
|
|
1551
|
-
{ "name": "Large", "size": 120 },
|
|
1552
|
-
{ "name": "Medium", "size": 64 },
|
|
1553
|
-
{ "name": "Small", "size": 32 }
|
|
1554
|
-
],
|
|
1555
|
-
"dos": "Best practices for using these assets",
|
|
1556
|
-
"donts": "What to avoid",
|
|
1557
|
-
"guidelines": "General usage guidelines"
|
|
1558
|
-
}
|
|
1559
|
-
}
|
|
1560
|
-
\`\`\`
|
|
1561
|
-
|
|
1562
|
-
**Example:**
|
|
1563
|
-
\`\`\`markdown
|
|
1564
|
-
---
|
|
1565
|
-
type: brand_assets
|
|
1566
|
-
section: brand
|
|
1567
|
-
key: photography-library
|
|
1568
|
-
name: Photography Library
|
|
1569
|
-
status: draft
|
|
1570
|
-
---
|
|
1571
|
-
|
|
1572
|
-
# Photography Library
|
|
1573
|
-
|
|
1574
|
-
Our curated photography collection for marketing and product materials.
|
|
1575
|
-
|
|
1576
|
-
## Description
|
|
1577
|
-
Professional photography that reflects our brand values of clarity, professionalism, and innovation.
|
|
1578
|
-
|
|
1579
|
-
## Assets
|
|
1580
|
-
|
|
1581
|
-
### photography: Hero Image 1
|
|
1582
|
-
[Product screenshot showing the dashboard]
|
|
1583
|
-
Clean workspace photography showing our app in use.
|
|
1584
|
-
|
|
1585
|
-
### photography: Team Collaboration
|
|
1586
|
-
[Team working together]
|
|
1587
|
-
Diverse team collaborating in a modern office setting.
|
|
1588
|
-
|
|
1589
|
-
## Do's
|
|
1590
|
-
- Use high-resolution images (minimum 1200px wide)
|
|
1591
|
-
- Maintain consistent lighting and color grading
|
|
1592
|
-
- Show real product interfaces when possible
|
|
1593
|
-
- Feature diverse representation
|
|
1594
|
-
|
|
1595
|
-
## Don'ts
|
|
1596
|
-
- Don't use overly staged or stock-looking photos
|
|
1597
|
-
- Don't apply heavy filters that alter brand colors
|
|
1598
|
-
- Don't use outdated product screenshots
|
|
1599
|
-
- Don't crop faces awkwardly
|
|
1600
|
-
|
|
1601
|
-
## Guidelines
|
|
1602
|
-
All photography should feel authentic and professional. Prefer candid moments over posed shots. Ensure proper model releases for any identifiable people.
|
|
1603
|
-
|
|
1604
|
-
<!-- sync:data -->
|
|
1605
|
-
\\\`\`\`json
|
|
1606
|
-
{
|
|
1607
|
-
"name": "Photography Library",
|
|
1608
|
-
"description": "Professional photography that reflects our brand values of clarity, professionalism, and innovation.",
|
|
1609
|
-
"assets": {
|
|
1610
|
-
"assets": [
|
|
1611
|
-
{
|
|
1612
|
-
"id": "hero-1",
|
|
1613
|
-
"category": "photography",
|
|
1614
|
-
"url": "",
|
|
1615
|
-
"name": "Hero Image 1",
|
|
1616
|
-
"backgroundColor": "#F5F5F5",
|
|
1617
|
-
"description": "Clean workspace photography showing our app in use."
|
|
1618
|
-
},
|
|
1619
|
-
{
|
|
1620
|
-
"id": "team-collab",
|
|
1621
|
-
"category": "photography",
|
|
1622
|
-
"url": "",
|
|
1623
|
-
"name": "Team Collaboration",
|
|
1624
|
-
"backgroundColor": "#F5F5F5",
|
|
1625
|
-
"description": "Diverse team collaborating in a modern office setting."
|
|
1626
|
-
}
|
|
1627
|
-
],
|
|
1628
|
-
"sizes": [
|
|
1629
|
-
{ "name": "Full", "size": 200 },
|
|
1630
|
-
{ "name": "Large", "size": 120 },
|
|
1631
|
-
{ "name": "Medium", "size": 64 },
|
|
1632
|
-
{ "name": "Small", "size": 32 }
|
|
1633
|
-
],
|
|
1634
|
-
"dos": "Use high-resolution images (minimum 1200px wide). Maintain consistent lighting and color grading. Show real product interfaces when possible. Feature diverse representation.",
|
|
1635
|
-
"donts": "Don't use overly staged or stock-looking photos. Don't apply heavy filters that alter brand colors. Don't use outdated product screenshots. Don't crop faces awkwardly.",
|
|
1636
|
-
"guidelines": "All photography should feel authentic and professional. Prefer candid moments over posed shots. Ensure proper model releases for any identifiable people."
|
|
1637
|
-
}
|
|
1638
|
-
}
|
|
1639
|
-
\\\`\`\`
|
|
1640
|
-
<!-- /sync:data -->
|
|
1641
|
-
\`\`\`
|
|
1642
|
-
|
|
1643
|
-
---
|
|
1644
|
-
|
|
1645
|
-
#### Tone of Voice Block
|
|
1646
|
-
|
|
1647
|
-
Brand voice personality and communication guidelines.
|
|
1648
|
-
|
|
1649
|
-
**Fields:**
|
|
1650
|
-
- \`voice_personality\` - Brand personality traits
|
|
1651
|
-
- \`voice_archetype\` - Voice archetype (sage, hero, creator, etc.)
|
|
1652
|
-
- \`tone_attributes\` - Key tone attributes
|
|
1653
|
-
- \`we_are\` - Positive characteristics
|
|
1654
|
-
- \`we_are_not\` - What to avoid
|
|
1655
|
-
- \`writing_principles\` - Core writing principles
|
|
1656
|
-
- \`vocabulary_do\` - Words we use
|
|
1657
|
-
- \`vocabulary_dont\` - Words we avoid
|
|
1658
|
-
- \`example_good\` - Good copy example
|
|
1659
|
-
- \`example_bad\` - Bad copy example
|
|
1660
|
-
- \`grammar_style\` - Grammar and style rules
|
|
1661
|
-
|
|
1662
|
-
**Example:**
|
|
1663
|
-
\`\`\`markdown
|
|
1664
|
-
---
|
|
1665
|
-
type: tone_of_voice
|
|
1666
|
-
section: brand
|
|
1667
|
-
key: brand-voice
|
|
1668
|
-
name: Brand Voice
|
|
1669
|
-
status: complete
|
|
1670
|
-
---
|
|
1671
|
-
|
|
1672
|
-
# Brand Voice
|
|
1673
|
-
|
|
1674
|
-
## Brand Personality
|
|
1675
|
-
Professional, helpful, clear, innovative, empowering
|
|
1676
|
-
|
|
1677
|
-
**Archetype:** The Sage - Wise, knowledgeable, trusted advisor
|
|
1678
|
-
|
|
1679
|
-
## Tone Attributes
|
|
1680
|
-
Confident but not arrogant. Helpful but not patronizing. Technical but accessible. Enthusiastic but measured.
|
|
1681
|
-
|
|
1682
|
-
## We Are...
|
|
1683
|
-
- Clear and concise
|
|
1684
|
-
- Helpful and supportive
|
|
1685
|
-
- Confident and knowledgeable
|
|
1686
|
-
- Professional yet approachable
|
|
1687
|
-
|
|
1688
|
-
## We Are NOT...
|
|
1689
|
-
- Overly casual or slangy
|
|
1690
|
-
- Condescending or preachy
|
|
1691
|
-
- Robotic or cold
|
|
1692
|
-
- Vague or ambiguous
|
|
1693
|
-
|
|
1694
|
-
## Writing Principles
|
|
1695
|
-
1. Lead with the benefit
|
|
1696
|
-
2. Use active voice
|
|
1697
|
-
3. Be specific, not generic
|
|
1698
|
-
4. Respect the reader's time
|
|
1699
|
-
|
|
1700
|
-
## Vocabulary
|
|
1701
|
-
|
|
1702
|
-
**Words We Use:**
|
|
1703
|
-
Context, clarity, empower, streamline, intelligent, seamless, structured
|
|
1704
|
-
|
|
1705
|
-
**Words We Avoid:**
|
|
1706
|
-
Revolutionary, best-in-class, synergy, leverage (as verb), utilize (use "use")
|
|
1707
|
-
|
|
1708
|
-
## Examples
|
|
1709
|
-
|
|
1710
|
-
**Good Example:**
|
|
1711
|
-
"Save hours every week by giving AI agents the context they need. No more explaining your product from scratch."
|
|
1712
|
-
|
|
1713
|
-
**Bad Example:**
|
|
1714
|
-
"Our revolutionary AI-powered solution leverages cutting-edge technology to synergize your workflow paradigms."
|
|
1715
|
-
|
|
1716
|
-
## Grammar & Style
|
|
1717
|
-
- Use sentence case for headings
|
|
1718
|
-
- Oxford comma always
|
|
1719
|
-
- Numbers under 10 spelled out
|
|
1720
|
-
- Contractions are fine (we're, you'll)
|
|
1721
|
-
\`\`\`
|
|
1722
|
-
|
|
1723
|
-
---
|
|
1724
|
-
|
|
1725
|
-
#### Messaging Framework Block
|
|
1726
|
-
|
|
1727
|
-
External communication: elevator pitch, value props, and CTAs.
|
|
1728
|
-
|
|
1729
|
-
**Fields:**
|
|
1730
|
-
- \`core_message\` - The single most important message
|
|
1731
|
-
- \`elevator_pitch\` - 30-second explanation
|
|
1732
|
-
- \`value_prop_1/2/3\` - Key value propositions
|
|
1733
|
-
- \`proof_points\` - Evidence and social proof
|
|
1734
|
-
- \`audience_specific\` - Audience-tailored messaging
|
|
1735
|
-
- \`call_to_action\` - Primary CTA
|
|
1736
|
-
- \`secondary_ctas\` - Alternative CTAs
|
|
1737
|
-
- \`boilerplate\` - Company description
|
|
1738
|
-
|
|
1739
|
-
**Example:**
|
|
1740
|
-
\`\`\`markdown
|
|
1741
|
-
---
|
|
1742
|
-
type: messaging_framework
|
|
1743
|
-
section: brand
|
|
1744
|
-
key: core-messaging
|
|
1745
|
-
name: Core Messaging Framework
|
|
1746
|
-
status: complete
|
|
1747
|
-
---
|
|
1748
|
-
|
|
1749
|
-
# Core Messaging Framework
|
|
1750
|
-
|
|
1751
|
-
## Core Message
|
|
1752
|
-
AI coding agents build better software when they understand your product context.
|
|
1753
|
-
|
|
1754
|
-
## Elevator Pitch
|
|
1755
|
-
EpicContext helps product teams give AI coding agents the context they need to build features that actually match your vision. Instead of explaining your product in every chat, create structured documentation that AI agents can reference automatically.
|
|
1756
|
-
|
|
1757
|
-
## Value Propositions
|
|
1758
|
-
|
|
1759
|
-
### 1. Save Time
|
|
1760
|
-
Stop re-explaining your product in every AI conversation. Document once, reference forever.
|
|
1761
|
-
|
|
1762
|
-
### 2. Better AI Output
|
|
1763
|
-
AI agents with context produce code that matches your patterns, follows your conventions, and understands your users.
|
|
1764
|
-
|
|
1765
|
-
### 3. Team Alignment
|
|
1766
|
-
Keep everyone on the same page with a single source of truth for product context.
|
|
1767
|
-
|
|
1768
|
-
## Proof Points
|
|
1769
|
-
- Teams save 5+ hours per week on context documentation
|
|
1770
|
-
- 90% reduction in AI misunderstandings
|
|
1771
|
-
- "Finally, AI that understands our product" - CTO, TechCorp
|
|
1772
|
-
|
|
1773
|
-
## Audience-Specific Messaging
|
|
1774
|
-
|
|
1775
|
-
**For Developers:**
|
|
1776
|
-
Write better prompts with less effort. EpicContext gives your AI assistant the background it needs.
|
|
1777
|
-
|
|
1778
|
-
**For Product Managers:**
|
|
1779
|
-
Ensure AI-built features match your vision. Document requirements once, reference them in every AI interaction.
|
|
1780
|
-
|
|
1781
|
-
## Calls to Action
|
|
1782
|
-
|
|
1783
|
-
**Primary:** Start Free Trial
|
|
1784
|
-
|
|
1785
|
-
**Secondary:** Watch Demo, Read Case Studies, Join Waitlist
|
|
1786
|
-
|
|
1787
|
-
## Boilerplate
|
|
1788
|
-
EpicContext is the leading context management platform for product teams using AI coding agents. We help teams document and share product context in formats AI agents can understand, resulting in better code and faster development cycles.
|
|
1789
|
-
\`\`\`
|
|
1790
|
-
|
|
1791
|
-
---
|
|
1792
|
-
|
|
1793
|
-
#### Best Practices for Brand Blocks
|
|
1794
|
-
|
|
1795
|
-
1. **Use specialized block types**: Never use \`text\` for brand content. Each type has specific fields and visual editors.
|
|
1796
|
-
|
|
1797
|
-
2. **Include sync:data blocks**: For blocks with complex visual data (colors, typography, icons, logos, assets), always include the \`<!-- sync:data -->\` block with full JSON for reliable import/export.
|
|
1798
|
-
|
|
1799
|
-
3. **Be comprehensive**: Fill all relevant fields. Thin brand documentation leads to inconsistent AI-generated content.
|
|
1800
|
-
|
|
1801
|
-
4. **Keep it updated**: Brand guidelines change. Update status to \`draft\` when editing, \`complete\` when finalized.
|
|
1802
|
-
|
|
1803
|
-
5. **Cross-reference**: Messaging should align with positioning. Colors should be referenced in usage guidelines.
|
|
1804
|
-
|
|
1805
|
-
---
|
|
1806
|
-
|
|
1807
|
-
### Development Section Blocks (Epic → Story → Task)
|
|
1808
|
-
|
|
1809
|
-
The development section uses a hierarchical structure to plan and track work. This creates a clear flow from high-level initiatives down to specific implementation tasks.
|
|
1810
|
-
|
|
1811
|
-
#### Hierarchy Flow
|
|
1812
|
-
|
|
1813
|
-
\`\`\`
|
|
1814
|
-
Epic (Large initiative)
|
|
1815
|
-
└── User Story (User-facing feature)
|
|
1816
|
-
└── Task / Agent Plan (Technical implementation)
|
|
1817
|
-
\`\`\`
|
|
1818
|
-
|
|
1819
|
-
**How AI/Developers Should Use This:**
|
|
1820
|
-
1. **Product Owner/User** creates Epics for major initiatives
|
|
1821
|
-
2. **Product Owner/User** breaks Epics into User Stories
|
|
1822
|
-
3. **AI Agent/Developer** reads Stories and creates Tasks with implementation plans
|
|
1823
|
-
4. **AI Agent/Developer** executes Tasks and updates outcomes
|
|
1824
|
-
|
|
1825
|
-
---
|
|
1826
|
-
|
|
1827
|
-
#### Epic Block
|
|
1828
|
-
|
|
1829
|
-
An Epic represents a large body of work that delivers significant value. It groups related User Stories.
|
|
1830
|
-
|
|
1831
|
-
**Required Fields:**
|
|
1832
|
-
- \`summary\` - One-line description
|
|
1833
|
-
- \`status\` - todo, in_progress, done
|
|
1834
|
-
|
|
1835
|
-
**Key Fields:**
|
|
1836
|
-
- \`description\` - Detailed explanation
|
|
1837
|
-
- \`priority\` - highest, high, medium, low, lowest
|
|
1838
|
-
- \`story_refs\` - Links to child User Stories
|
|
1839
|
-
- \`impact_score\` / \`effort_score\` - 1-5 scale for prioritization
|
|
1840
|
-
- \`start_date\` / \`due_date\` - Timeline
|
|
1841
|
-
- \`labels\` - Comma-separated tags
|
|
1842
|
-
|
|
1843
|
-
**Example:**
|
|
1844
|
-
\`\`\`markdown
|
|
1845
|
-
---
|
|
1846
|
-
type: epic
|
|
1847
|
-
section: development
|
|
1848
|
-
key: user-authentication
|
|
1849
|
-
name: User Authentication System
|
|
1850
|
-
status: draft
|
|
1851
|
-
priority: high
|
|
1852
|
-
start_date: 2025-01-15
|
|
1853
|
-
due_date: 2025-02-28
|
|
1854
|
-
labels: security, mvp, phase-1
|
|
1855
|
-
story_refs:
|
|
1856
|
-
- email-login
|
|
1857
|
-
- oauth-integration
|
|
1858
|
-
- password-reset
|
|
1859
|
-
---
|
|
1860
|
-
|
|
1861
|
-
# User Authentication System
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* Generate the CORE AI guide (slim version without detailed schemas)
|
|
100
|
+
* This is ~250 lines instead of ~1900 lines
|
|
101
|
+
*/
|
|
102
|
+
function generateCoreAIGuide() {
|
|
103
|
+
const today = new Date().toISOString().split("T")[0];
|
|
104
|
+
const allBlockTypes = Object.values(SECTION_INFO)
|
|
105
|
+
.flatMap(s => s.blockTypes)
|
|
106
|
+
.filter((v, i, a) => a.indexOf(v) === i) // unique
|
|
107
|
+
.sort();
|
|
108
|
+
return `# AI Agent Guide for CONTEXT Folder
|
|
1862
109
|
|
|
1863
|
-
|
|
110
|
+
> **For Claude Code, Cursor, and other AI coding agents**
|
|
111
|
+
> This guide explains how to create and structure content in this CONTEXT folder.
|
|
1864
112
|
|
|
1865
|
-
##
|
|
1866
|
-
Build secure user authentication with email/password and OAuth support.
|
|
113
|
+
## Guide Structure
|
|
1867
114
|
|
|
1868
|
-
|
|
1869
|
-
This epic covers all authentication-related features including registration, login, logout, password management, and third-party OAuth integration. The goal is to provide a frictionless yet secure authentication experience.
|
|
115
|
+
This guide is **modular** to reduce context loading:
|
|
1870
116
|
|
|
1871
|
-
|
|
1872
|
-
-
|
|
1873
|
-
- Support login via email/password and OAuth (Google, GitHub)
|
|
1874
|
-
- Implement password reset flow with secure tokens
|
|
1875
|
-
- Add session management with JWT
|
|
117
|
+
- **This file (AI-GUIDE.md)**: Core rules, block type list, navigation (~250 lines)
|
|
118
|
+
- **Section guides (.ai-guides/)**: Detailed schemas for each section (~200-400 lines each)
|
|
1876
119
|
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
- Password reset emails arrive within 30 seconds
|
|
1881
|
-
- Sessions expire after 24 hours of inactivity
|
|
120
|
+
**Load only what you need:**
|
|
121
|
+
1. Always read this core guide first
|
|
122
|
+
2. Then read the section guide for the section you're working on
|
|
1882
123
|
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
-
|
|
124
|
+
\`\`\`
|
|
125
|
+
CONTEXT/
|
|
126
|
+
├── AI-GUIDE.md ← You are here (core rules)
|
|
127
|
+
├── .ai-guides/
|
|
128
|
+
│ ├── brand-guide.md ← Brand section schemas
|
|
129
|
+
│ ├── development-guide.md ← Development section schemas
|
|
130
|
+
│ ├── product-guide.md ← Product section schemas
|
|
131
|
+
│ ├── users-guide.md ← Users section schemas
|
|
132
|
+
│ └── ... ← Other section guides
|
|
1886
133
|
\`\`\`
|
|
1887
134
|
|
|
1888
135
|
---
|
|
1889
136
|
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
A User Story describes a feature from the user's perspective. It belongs to an Epic and can have Tasks.
|
|
1893
|
-
|
|
1894
|
-
**Required Fields:**
|
|
1895
|
-
- \`summary\` - Brief description
|
|
1896
|
-
- \`status\` - todo, in_progress, in_review, done
|
|
1897
|
-
|
|
1898
|
-
**Key Fields:**
|
|
1899
|
-
- \`user_story\` - "As a [role], I want [goal], so that [benefit]" format
|
|
1900
|
-
- \`acceptance_criteria\` - Testable conditions (Given/When/Then)
|
|
1901
|
-
- \`epic_ref\` - Link to parent Epic
|
|
1902
|
-
- \`story_points\` - 1, 2, 3, 5, 8, 13, 21 (Fibonacci)
|
|
1903
|
-
- \`priority\` - highest, high, medium, low, lowest
|
|
1904
|
-
- \`impact_score\` / \`effort_score\` - 1-5 scale
|
|
1905
|
-
- \`sprint\` - Sprint assignment
|
|
1906
|
-
|
|
1907
|
-
**Example:**
|
|
1908
|
-
\`\`\`markdown
|
|
1909
|
-
---
|
|
1910
|
-
type: user_story
|
|
1911
|
-
section: development
|
|
1912
|
-
key: email-login
|
|
1913
|
-
name: Email Login
|
|
1914
|
-
status: draft
|
|
1915
|
-
priority: high
|
|
1916
|
-
story_points: 5
|
|
1917
|
-
impact_score: 5
|
|
1918
|
-
effort_score: 3
|
|
1919
|
-
epic_ref: user-authentication
|
|
1920
|
-
sprint: Sprint 1
|
|
1921
|
-
---
|
|
137
|
+
## CRITICAL RULES - READ FIRST
|
|
1922
138
|
|
|
1923
|
-
|
|
139
|
+
### BLOCK TYPE ENFORCEMENT
|
|
1924
140
|
|
|
1925
|
-
|
|
141
|
+
**ONLY use block types from the Valid Block Types list below.** Using undefined types will:
|
|
142
|
+
- Show "No schema defined" in the UI
|
|
143
|
+
- Lose all content when synced
|
|
144
|
+
- Break import/export
|
|
1926
145
|
|
|
1927
|
-
|
|
1928
|
-
|
|
146
|
+
### DO:
|
|
147
|
+
- **ONLY use block types listed in this guide**
|
|
148
|
+
- Create **ONE FILE PER BLOCK** (one user story = one file)
|
|
149
|
+
- Use the **exact folder structure** shown below
|
|
150
|
+
- Include **YAML frontmatter** with type, section, key, name, status
|
|
151
|
+
- Use **kebab-case** for keys and filenames
|
|
152
|
+
- **Read the section guide** for detailed schemas before creating blocks
|
|
1929
153
|
|
|
1930
|
-
|
|
1931
|
-
|
|
154
|
+
### DO NOT:
|
|
155
|
+
- ❌ **Invent new block types** - if it's not in this guide, it doesn't exist
|
|
156
|
+
- ❌ Create a single large file with multiple items
|
|
157
|
+
- ❌ Put files in wrong folders
|
|
158
|
+
- ❌ Use generic markdown without frontmatter
|
|
159
|
+
- ❌ Skip reading the section guide for detailed schemas
|
|
1932
160
|
|
|
1933
|
-
|
|
1934
|
-
Users need a fast and secure way to access their accounts. The login form should validate input, show helpful error messages, and redirect to the dashboard on success.
|
|
161
|
+
### LANGUAGE CONSISTENCY
|
|
1935
162
|
|
|
1936
|
-
|
|
163
|
+
**CRITICAL:** All content must be in ONE consistent language.
|
|
164
|
+
Check existing CONTEXT files to determine the project's language.
|
|
1937
165
|
|
|
1938
|
-
|
|
1939
|
-
- Given I am on the login page
|
|
1940
|
-
- When I enter a valid email and correct password
|
|
1941
|
-
- Then I am redirected to the dashboard
|
|
1942
|
-
- And I see a welcome message with my name
|
|
166
|
+
---
|
|
1943
167
|
|
|
1944
|
-
|
|
1945
|
-
- Given I am on the login page
|
|
1946
|
-
- When I enter an invalid email or wrong password
|
|
1947
|
-
- Then I see an error message "Invalid email or password"
|
|
1948
|
-
- And I remain on the login page
|
|
1949
|
-
- And the password field is cleared
|
|
168
|
+
## Valid Block Types (Quick Reference)
|
|
1950
169
|
|
|
1951
|
-
|
|
1952
|
-
- Given I have failed login 5 times in 5 minutes
|
|
1953
|
-
- When I try to login again
|
|
1954
|
-
- Then I see "Too many attempts. Please try again in 15 minutes"
|
|
170
|
+
These are the ONLY valid values for \`type:\` in frontmatter:
|
|
1955
171
|
|
|
1956
|
-
## Technical Notes
|
|
1957
|
-
- Use bcrypt for password hashing (cost factor 12)
|
|
1958
|
-
- Implement rate limiting: 5 attempts per 5 minutes per IP
|
|
1959
|
-
- Generate JWT with 24h expiry
|
|
1960
|
-
- Store refresh token in httpOnly cookie
|
|
1961
172
|
\`\`\`
|
|
173
|
+
${allBlockTypes.join(", ")}
|
|
174
|
+
\`\`\`
|
|
175
|
+
|
|
176
|
+
**For detailed schemas, see the section guide in \`.ai-guides/\`**
|
|
1962
177
|
|
|
1963
178
|
---
|
|
1964
179
|
|
|
1965
|
-
|
|
180
|
+
## Block Type → Section → Folder Reference
|
|
1966
181
|
|
|
1967
|
-
|
|
182
|
+
| Block Type | Section | Folder | Guide |
|
|
183
|
+
|------------|---------|--------|-------|
|
|
184
|
+
${Object.entries(SECTION_INFO).flatMap(([key, info]) => info.blockTypes.map(bt => `| \`${bt}\` | ${info.name} | \`${info.folder}/\` | \`.ai-guides/${info.folder}-guide.md\` |`)).join("\n")}
|
|
1968
185
|
|
|
1969
|
-
|
|
1970
|
-
- \`description\` - What needs to be done
|
|
1971
|
-
- \`status\` - planned, todo, in_progress, in_review, done, abandoned
|
|
186
|
+
---
|
|
1972
187
|
|
|
1973
|
-
|
|
1974
|
-
- \`story_ref\` - Link to parent User Story
|
|
1975
|
-
- \`plan_steps\` - Step-by-step implementation plan
|
|
1976
|
-
- \`agent_source\` - manual, claude_code, cursor, copilot, windsurf, aider, other_ai
|
|
1977
|
-
- \`files_affected\` - List of files to create/modify
|
|
1978
|
-
- \`codebase_context\` - Relevant architecture notes
|
|
1979
|
-
- \`technical_notes\` - Implementation details
|
|
1980
|
-
- \`dependencies\` - Prerequisites or packages needed
|
|
1981
|
-
- \`estimated_hours\` - Time estimate
|
|
1982
|
-
- \`outcome\` - Results after completion
|
|
188
|
+
## Universal File Template
|
|
1983
189
|
|
|
1984
|
-
**Example (AI Agent Plan):**
|
|
1985
190
|
\`\`\`markdown
|
|
1986
191
|
---
|
|
1987
|
-
type:
|
|
1988
|
-
section:
|
|
1989
|
-
key:
|
|
1990
|
-
name:
|
|
192
|
+
type: [block_type]
|
|
193
|
+
section: [section_type]
|
|
194
|
+
key: [unique-kebab-case-key]
|
|
195
|
+
name: "Human Readable Name"
|
|
1991
196
|
status: draft
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
story_ref: email-login
|
|
1995
|
-
estimated_hours: 4
|
|
197
|
+
created: ${today}
|
|
198
|
+
updated: ${today}
|
|
1996
199
|
---
|
|
1997
200
|
|
|
1998
|
-
#
|
|
1999
|
-
|
|
2000
|
-
Create the POST /api/auth/login endpoint that validates credentials and returns JWT tokens.
|
|
2001
|
-
|
|
2002
|
-
## Description
|
|
2003
|
-
Implement the login API endpoint with proper validation, rate limiting, and token generation.
|
|
2004
|
-
|
|
2005
|
-
## Implementation Plan
|
|
2006
|
-
|
|
2007
|
-
### Step 1: Create Login Route Handler
|
|
2008
|
-
Create \`app/api/auth/login/route.ts\` with POST handler:
|
|
2009
|
-
- Accept email and password in request body
|
|
2010
|
-
- Validate input format using zod schema
|
|
2011
|
-
- Return 400 for invalid input with specific error messages
|
|
2012
|
-
|
|
2013
|
-
### Step 2: Implement User Lookup
|
|
2014
|
-
Query the users table by email:
|
|
2015
|
-
- Use Supabase client with service role for server-side
|
|
2016
|
-
- Return generic "Invalid credentials" to prevent email enumeration
|
|
2017
|
-
- Handle case-insensitive email matching
|
|
2018
|
-
|
|
2019
|
-
### Step 3: Password Verification
|
|
2020
|
-
Compare provided password with stored hash:
|
|
2021
|
-
- Use bcrypt.compare() for timing-safe comparison
|
|
2022
|
-
- Log failed attempts for security monitoring
|
|
2023
|
-
- Increment rate limit counter on failure
|
|
2024
|
-
|
|
2025
|
-
### Step 4: Generate JWT Tokens
|
|
2026
|
-
On successful authentication:
|
|
2027
|
-
- Generate access token (24h expiry) with user ID and email
|
|
2028
|
-
- Generate refresh token (7d expiry) stored in httpOnly cookie
|
|
2029
|
-
- Include minimal claims to reduce token size
|
|
2030
|
-
|
|
2031
|
-
### Step 5: Implement Rate Limiting
|
|
2032
|
-
Add rate limiting middleware:
|
|
2033
|
-
- Use Redis or in-memory store for attempt tracking
|
|
2034
|
-
- Key by IP address + email combination
|
|
2035
|
-
- Block after 5 failed attempts for 15 minutes
|
|
2036
|
-
- Return 429 with Retry-After header
|
|
2037
|
-
|
|
2038
|
-
### Step 6: Add Tests
|
|
2039
|
-
Create \`app/api/auth/login/route.test.ts\`:
|
|
2040
|
-
- Test successful login returns tokens
|
|
2041
|
-
- Test invalid email format returns 400
|
|
2042
|
-
- Test wrong password returns 401
|
|
2043
|
-
- Test rate limiting blocks after 5 attempts
|
|
2044
|
-
|
|
2045
|
-
## Files Affected
|
|
2046
|
-
- \`app/api/auth/login/route.ts\` (create)
|
|
2047
|
-
- \`lib/auth/jwt.ts\` (create)
|
|
2048
|
-
- \`lib/auth/password.ts\` (create)
|
|
2049
|
-
- \`lib/middleware/rate-limit.ts\` (create)
|
|
2050
|
-
- \`app/api/auth/login/route.test.ts\` (create)
|
|
2051
|
-
|
|
2052
|
-
## Codebase Context
|
|
2053
|
-
- Using Next.js 14 App Router
|
|
2054
|
-
- Supabase for database and auth
|
|
2055
|
-
- JWT library: jose
|
|
2056
|
-
- Password hashing: bcrypt
|
|
2057
|
-
- Validation: zod
|
|
2058
|
-
|
|
2059
|
-
## Dependencies
|
|
2060
|
-
- jose (JWT handling)
|
|
2061
|
-
- bcrypt (password hashing)
|
|
2062
|
-
- zod (validation)
|
|
2063
|
-
|
|
2064
|
-
## Technical Notes
|
|
2065
|
-
- Follow existing API patterns in \`app/api/\` folder
|
|
2066
|
-
- Use \`@/lib/supabase/server\` for database access
|
|
2067
|
-
- Error responses should match the ErrorResponse type in \`types/api.ts\`
|
|
2068
|
-
\`\`\`
|
|
2069
|
-
|
|
2070
|
-
---
|
|
201
|
+
# Title
|
|
2071
202
|
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
A Roadmap provides a timeline view of Epics across time periods (quarters, months, sprints).
|
|
2075
|
-
|
|
2076
|
-
**Key Fields:**
|
|
2077
|
-
- \`description\` - Purpose of this roadmap
|
|
2078
|
-
- \`timeline\` - Visual timeline data with columns and epic placements
|
|
2079
|
-
- \`notes\` - Additional context, risks, assumptions
|
|
2080
|
-
|
|
2081
|
-
**Timeline Structure:**
|
|
2082
|
-
\`\`\`json
|
|
2083
|
-
{
|
|
2084
|
-
"columns": [
|
|
2085
|
-
{ "id": "q1-2025", "name": "Q1 2025", "period": "quarter" },
|
|
2086
|
-
{ "id": "q2-2025", "name": "Q2 2025", "period": "quarter" }
|
|
2087
|
-
],
|
|
2088
|
-
"items": [
|
|
2089
|
-
{
|
|
2090
|
-
"epicRef": "user-authentication",
|
|
2091
|
-
"startColumn": "q1-2025",
|
|
2092
|
-
"spanColumns": 1,
|
|
2093
|
-
"row": 0
|
|
2094
|
-
}
|
|
2095
|
-
],
|
|
2096
|
-
"settings": { "defaultPeriod": "quarter" }
|
|
2097
|
-
}
|
|
203
|
+
[Content following the block type schema from section guide]
|
|
2098
204
|
\`\`\`
|
|
2099
205
|
|
|
2100
206
|
---
|
|
2101
207
|
|
|
2102
|
-
|
|
208
|
+
## Which Block Type Should I Use?
|
|
2103
209
|
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
210
|
+
| What You're Documenting | Block Type | Folder |
|
|
211
|
+
|------------------------|------------|--------|
|
|
212
|
+
| User persona | \`persona\` | \`users/personas/\` |
|
|
213
|
+
| Job to be done | \`jtbd\` | \`users/jobs-to-be-done/\` |
|
|
214
|
+
| User journey | \`journey_map\` | \`users/journey-maps/\` |
|
|
215
|
+
| Product vision | \`product_overview\` | \`product/\` |
|
|
216
|
+
| Feature | \`feature\` | \`product/features/\` |
|
|
217
|
+
| Large initiative (weeks) | \`epic\` | \`development/epics/\` |
|
|
218
|
+
| User story (days) | \`user_story\` | \`development/stories/\` |
|
|
219
|
+
| Technical task (hours) | \`task\` | \`development/tasks/\` |
|
|
220
|
+
| Brand positioning | \`brand_positioning\` | \`brand/\` |
|
|
221
|
+
| Visual identity | \`brand_visual_identity\` | \`brand/\` |
|
|
222
|
+
| Tone of voice | \`tone_of_voice\` | \`brand/\` |
|
|
223
|
+
| Architecture decision | \`decision\` | \`decisions/\` |
|
|
224
|
+
| Technical constraint | \`constraint\` | \`technical/\` |
|
|
225
|
+
| External service | \`integration\` | \`technical/integrations/\` |
|
|
226
|
+
| Competitor analysis | \`competitor\` | \`research/competitors/\` |
|
|
227
|
+
| Site structure | \`ia_tree\` | \`information-architecture/\` |
|
|
228
|
+
| Metric/KPI | \`metric\` | \`metrics/\` |
|
|
2111
229
|
|
|
2112
|
-
|
|
2113
|
-
\`\`\`
|
|
2114
|
-
Epic: user-authentication
|
|
2115
|
-
→ Story: email-login (5 points)
|
|
2116
|
-
→ Story: oauth-integration (8 points)
|
|
2117
|
-
→ Story: password-reset (3 points)
|
|
2118
|
-
\`\`\`
|
|
230
|
+
---
|
|
2119
231
|
|
|
2120
|
-
|
|
2121
|
-
\`\`\`
|
|
2122
|
-
AI reads: email-login story
|
|
2123
|
-
→ Creates Task: implement-login-api (4 hours)
|
|
2124
|
-
→ Creates Task: build-login-form (3 hours)
|
|
2125
|
-
→ Creates Task: add-login-tests (2 hours)
|
|
2126
|
-
\`\`\`
|
|
232
|
+
## Context Navigation
|
|
2127
233
|
|
|
2128
|
-
**
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
234
|
+
**Read enough to answer these questions, then stop:**
|
|
235
|
+
1. What should I build? (from task/story)
|
|
236
|
+
2. Who am I building it for? (from persona)
|
|
237
|
+
3. What constraints apply? (from constitution/technical)
|
|
238
|
+
4. How should it look/behave? (from brand/design system)
|
|
239
|
+
|
|
240
|
+
**Link Priority:**
|
|
241
|
+
- **ALWAYS READ:** \`constitution/\`, parent refs (\`story_ref\`, \`epic_ref\`)
|
|
242
|
+
- **IF RELEVANT:** \`personas_ref\`, \`decisions_ref\`, \`integrations_ref\`
|
|
243
|
+
- **SKIP UNLESS NEEDED:** Sibling blocks, metrics, competitors
|
|
2136
244
|
|
|
2137
245
|
---
|
|
2138
246
|
|
|
2139
|
-
|
|
247
|
+
## Linking Blocks
|
|
2140
248
|
|
|
2141
|
-
|
|
249
|
+
Key relationships (use exact \`key\` values from target blocks):
|
|
2142
250
|
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
251
|
+
| From | Field | To | Required? |
|
|
252
|
+
|------|-------|---|-----------|
|
|
253
|
+
| \`user_story\` | \`epic_ref\` | \`epic\` | **Yes** |
|
|
254
|
+
| \`task\` | \`story_ref\` | \`user_story\` | **Yes** |
|
|
255
|
+
| \`journey_map\` | \`persona_ref\` | \`persona\` | **Yes** |
|
|
256
|
+
| \`jtbd\` | \`persona_ref\` | \`persona\` | No |
|
|
257
|
+
| \`feature\` | \`personas_ref\` | \`persona\` | No |
|
|
258
|
+
| \`epic\` | \`product_ref\` | \`product_overview\` | No |
|
|
2147
259
|
|
|
2148
|
-
|
|
2149
|
-
- What you'll do in each step
|
|
2150
|
-
- Why you're making certain choices
|
|
2151
|
-
- What files you'll touch
|
|
260
|
+
---
|
|
2152
261
|
|
|
2153
|
-
|
|
2154
|
-
- Existing patterns to follow
|
|
2155
|
-
- Related code to reference
|
|
2156
|
-
- Constraints or dependencies
|
|
262
|
+
## Syncing with EpicContext
|
|
2157
263
|
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
264
|
+
\`\`\`bash
|
|
265
|
+
npx @epiccontext/mcp push # Push local changes to cloud
|
|
266
|
+
npx @epiccontext/mcp pull # Pull cloud changes to local
|
|
267
|
+
npx @epiccontext/mcp status # Check sync status
|
|
268
|
+
\`\`\`
|
|
2162
269
|
|
|
2163
270
|
---
|
|
2164
271
|
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
#### Storybook Link Block
|
|
272
|
+
## Section Guides Reference
|
|
2168
273
|
|
|
2169
|
-
|
|
274
|
+
For detailed block schemas, examples, and guidelines, read the appropriate section guide:
|
|
2170
275
|
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
- \`description\` - What's documented in this Storybook
|
|
2175
|
-
- \`requires_auth\` - Enable EpicContext authentication
|
|
2176
|
-
- \`auth_secret\` - Shared secret for token validation
|
|
2177
|
-
- \`tokens_path\` - URL path to design tokens docs
|
|
2178
|
-
- \`components_path\` - URL path to component docs
|
|
2179
|
-
- \`repo_url\` - Git repository URL (optional)
|
|
276
|
+
| Section | Guide File | Block Types |
|
|
277
|
+
|---------|-----------|-------------|
|
|
278
|
+
${Object.entries(SECTION_INFO).map(([key, info]) => `| ${info.name} | \`.ai-guides/${info.folder}-guide.md\` | ${info.blockTypes.length} types |`).join("\n")}
|
|
2180
279
|
|
|
2181
|
-
**Example:**
|
|
2182
|
-
\`\`\`markdown
|
|
2183
|
-
---
|
|
2184
|
-
type: storybook_link
|
|
2185
|
-
section: design-system
|
|
2186
|
-
key: main-storybook
|
|
2187
|
-
name: Design System Storybook
|
|
2188
|
-
status: complete
|
|
2189
280
|
---
|
|
2190
281
|
|
|
2191
|
-
|
|
282
|
+
*Core AI guide - auto-generated by EpicContext CLI*
|
|
283
|
+
*Generated: ${new Date().toISOString()}*
|
|
2192
284
|
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
285
|
+
**Next step:** Read the section guide for the section you're working on.
|
|
286
|
+
`;
|
|
287
|
+
}
|
|
288
|
+
/**
|
|
289
|
+
* Generate a section-specific guide
|
|
290
|
+
*/
|
|
291
|
+
function generateSectionGuide(sectionKey) {
|
|
292
|
+
const info = SECTION_INFO[sectionKey];
|
|
293
|
+
if (!info)
|
|
294
|
+
return null;
|
|
295
|
+
const today = new Date().toISOString().split("T")[0];
|
|
296
|
+
return `# ${info.name} Section Guide
|
|
2202
297
|
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
\`\`\`
|
|
298
|
+
> ${info.description}
|
|
299
|
+
> Folder: \`CONTEXT/${info.folder}/\`
|
|
2206
300
|
|
|
2207
|
-
|
|
301
|
+
This guide contains detailed schemas and examples for this section.
|
|
302
|
+
For core rules and navigation, see \`CONTEXT/AI-GUIDE.md\`.
|
|
2208
303
|
|
|
2209
|
-
|
|
2210
|
-
\`\`\`bash
|
|
2211
|
-
npx degit epiccontext/storybook-template my-design-system
|
|
2212
|
-
cd my-design-system && npm install
|
|
2213
|
-
\`\`\`
|
|
2214
|
-
2. Deploy to Vercel: \`npx vercel\`
|
|
2215
|
-
3. In EpicContext, create a Storybook Link block and click "Generate Secret"
|
|
2216
|
-
4. Add \`EPICCONTEXT_STORYBOOK_SECRET\` to Vercel environment variables
|
|
2217
|
-
5. Add your Storybook URL to the block
|
|
2218
|
-
6. Team members can access via "Open Storybook" in EpicContext UI
|
|
304
|
+
---
|
|
2219
305
|
|
|
2220
|
-
|
|
306
|
+
## Block Types in This Section
|
|
2221
307
|
|
|
2222
|
-
|
|
308
|
+
| Block Type | Description | File Location |
|
|
309
|
+
|------------|-------------|---------------|
|
|
310
|
+
${info.blockTypes.map(bt => `| \`${bt}\` | See schema below | \`${info.folder}/\` |`).join("\n")}
|
|
2223
311
|
|
|
2224
312
|
---
|
|
2225
313
|
|
|
2226
|
-
## Block
|
|
314
|
+
## Detailed Block Schemas
|
|
315
|
+
|
|
316
|
+
${info.blockTypes.map(bt => `### ${bt}
|
|
2227
317
|
|
|
2228
|
-
|
|
318
|
+
**Type:** \`${bt}\`
|
|
319
|
+
**Section:** ${sectionKey}
|
|
320
|
+
**File Location:** \`${info.folder}/[name].md\`
|
|
2229
321
|
|
|
2230
|
-
|
|
322
|
+
**Required Frontmatter:**
|
|
2231
323
|
\`\`\`yaml
|
|
2232
324
|
---
|
|
2233
|
-
type:
|
|
2234
|
-
section:
|
|
2235
|
-
key:
|
|
2236
|
-
|
|
325
|
+
type: ${bt}
|
|
326
|
+
section: ${sectionKey}
|
|
327
|
+
key: example-${bt.replace(/_/g, "-")}
|
|
328
|
+
name: "Example ${bt.split("_").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}"
|
|
329
|
+
status: draft
|
|
330
|
+
created: ${today}
|
|
331
|
+
updated: ${today}
|
|
2237
332
|
---
|
|
2238
333
|
\`\`\`
|
|
2239
334
|
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
---
|
|
2243
|
-
type: epic
|
|
2244
|
-
section: development
|
|
2245
|
-
key: authentication-epic
|
|
2246
|
-
stories_ref: # References multiple user_story blocks
|
|
2247
|
-
- login-story
|
|
2248
|
-
- signup-story
|
|
2249
|
-
- password-reset-story
|
|
335
|
+
**Content:** Follow the standard block structure with appropriate headings for this block type.
|
|
336
|
+
|
|
2250
337
|
---
|
|
2251
|
-
|
|
338
|
+
`).join("\n")}
|
|
2252
339
|
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
340
|
+
*Section guide for ${info.name} - auto-generated by EpicContext CLI*
|
|
341
|
+
*Generated: ${new Date().toISOString()}*
|
|
342
|
+
`;
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* Generate all section guides in the .ai-guides folder
|
|
346
|
+
*/
|
|
347
|
+
function generateSectionGuides(aiGuidesDir) {
|
|
348
|
+
for (const [sectionKey, info] of Object.entries(SECTION_INFO)) {
|
|
349
|
+
const guideContent = generateSectionGuide(sectionKey);
|
|
350
|
+
if (guideContent) {
|
|
351
|
+
const guidePath = path.join(aiGuidesDir, `${info.folder}-guide.md`);
|
|
352
|
+
if (!fs.existsSync(guidePath)) {
|
|
353
|
+
fs.writeFileSync(guidePath, guideContent, "utf-8");
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
/**
|
|
359
|
+
* Read all markdown files from a directory recursively
|
|
360
|
+
*/
|
|
361
|
+
export function readContextFolder(contextPath) {
|
|
362
|
+
const files = [];
|
|
363
|
+
if (!fs.existsSync(contextPath)) {
|
|
364
|
+
return files;
|
|
365
|
+
}
|
|
366
|
+
function walkDir(dir, relativeTo) {
|
|
367
|
+
const entries = fs.readdirSync(dir, { withFileTypes: true });
|
|
368
|
+
for (const entry of entries) {
|
|
369
|
+
const fullPath = path.join(dir, entry.name);
|
|
370
|
+
const relativePath = path.relative(relativeTo, fullPath);
|
|
371
|
+
if (entry.isDirectory()) {
|
|
372
|
+
// Skip hidden directories and node_modules
|
|
373
|
+
if (!entry.name.startsWith(".") && entry.name !== "node_modules") {
|
|
374
|
+
walkDir(fullPath, relativeTo);
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
else if (entry.isFile() && entry.name.endsWith(".md")) {
|
|
378
|
+
// Skip README and AI-GUIDE
|
|
379
|
+
const lowerName = entry.name.toLowerCase();
|
|
380
|
+
if (lowerName !== "readme.md" && lowerName !== "ai-guide.md") {
|
|
381
|
+
const content = fs.readFileSync(fullPath, "utf-8");
|
|
382
|
+
files.push({
|
|
383
|
+
path: relativePath,
|
|
384
|
+
content,
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
walkDir(contextPath, contextPath);
|
|
391
|
+
return files;
|
|
392
|
+
}
|
|
393
|
+
/**
|
|
394
|
+
* Write files to the context folder
|
|
395
|
+
* By default, skips files where local version is newer than cloud version
|
|
396
|
+
*/
|
|
397
|
+
export function writeContextFolder(contextPath, files, options = {}) {
|
|
398
|
+
let written = 0;
|
|
399
|
+
let skipped = 0;
|
|
400
|
+
const skippedPaths = [];
|
|
401
|
+
for (const file of files) {
|
|
402
|
+
const fullPath = path.join(contextPath, file.path);
|
|
403
|
+
const dir = path.dirname(fullPath);
|
|
404
|
+
// Create directory if needed
|
|
405
|
+
if (!fs.existsSync(dir)) {
|
|
406
|
+
fs.mkdirSync(dir, { recursive: true });
|
|
407
|
+
}
|
|
408
|
+
// Always overwrite AI-GUIDE.md (it's server-generated and should be authoritative)
|
|
409
|
+
// This ensures users get the latest block type definitions on every pull
|
|
410
|
+
const isAIGuide = file.path.toLowerCase() === "ai-guide.md";
|
|
411
|
+
// Check if local file is newer than cloud version (unless force is set or it's AI-GUIDE.md)
|
|
412
|
+
if (!options.force && !isAIGuide && file.updatedAt && fs.existsSync(fullPath)) {
|
|
413
|
+
const localMtime = getFileModTime(fullPath);
|
|
414
|
+
const cloudMtime = new Date(file.updatedAt);
|
|
415
|
+
if (localMtime && localMtime > cloudMtime) {
|
|
416
|
+
// Local file is newer, skip overwriting
|
|
417
|
+
skipped++;
|
|
418
|
+
skippedPaths.push(file.path);
|
|
419
|
+
continue;
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
// Write file
|
|
423
|
+
try {
|
|
424
|
+
fs.writeFileSync(fullPath, file.content, "utf-8");
|
|
425
|
+
written++;
|
|
426
|
+
}
|
|
427
|
+
catch (error) {
|
|
428
|
+
console.error(`Failed to write ${file.path}:`, error);
|
|
429
|
+
skipped++;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
return { written, skipped, skippedPaths };
|
|
433
|
+
}
|
|
434
|
+
/**
|
|
435
|
+
* Delete local files that don't exist in the cloud
|
|
436
|
+
* Used during pull to remove files that were deleted in the UI
|
|
437
|
+
*/
|
|
438
|
+
export function deleteOrphanedLocalFiles(contextPath, cloudFiles) {
|
|
439
|
+
// Build a set of all cloud file paths (normalized)
|
|
440
|
+
const cloudPaths = new Set();
|
|
441
|
+
for (const file of cloudFiles) {
|
|
442
|
+
cloudPaths.add(file.path);
|
|
443
|
+
}
|
|
444
|
+
// Get all local markdown files
|
|
445
|
+
const localFiles = readContextFolder(contextPath);
|
|
446
|
+
const deleted = [];
|
|
447
|
+
for (const localFile of localFiles) {
|
|
448
|
+
// If local file doesn't exist in cloud, delete it
|
|
449
|
+
if (!cloudPaths.has(localFile.path)) {
|
|
450
|
+
const fullPath = path.join(contextPath, localFile.path);
|
|
451
|
+
try {
|
|
452
|
+
fs.unlinkSync(fullPath);
|
|
453
|
+
deleted.push(localFile.path);
|
|
454
|
+
}
|
|
455
|
+
catch (error) {
|
|
456
|
+
console.error(`Failed to delete ${localFile.path}:`, error);
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
return { deleted: deleted.length, deletedPaths: deleted };
|
|
461
|
+
}
|
|
462
|
+
/**
|
|
463
|
+
* Ensure the context folder exists with basic structure
|
|
464
|
+
*/
|
|
465
|
+
export function ensureContextFolder(contextPath) {
|
|
466
|
+
if (!fs.existsSync(contextPath)) {
|
|
467
|
+
fs.mkdirSync(contextPath, { recursive: true });
|
|
468
|
+
}
|
|
469
|
+
// Create default section folders
|
|
470
|
+
// Note: folder names use hyphens, but section types in the app use underscores
|
|
471
|
+
const defaultSections = [
|
|
472
|
+
"constitution",
|
|
473
|
+
"brand",
|
|
474
|
+
"product",
|
|
475
|
+
"business-strategy",
|
|
476
|
+
"users",
|
|
477
|
+
"research",
|
|
478
|
+
"technical",
|
|
479
|
+
"design-system",
|
|
480
|
+
"information-architecture",
|
|
481
|
+
"metrics",
|
|
482
|
+
"decisions",
|
|
483
|
+
"development",
|
|
484
|
+
"marketing",
|
|
485
|
+
"environments",
|
|
486
|
+
"reports",
|
|
487
|
+
];
|
|
488
|
+
for (const section of defaultSections) {
|
|
489
|
+
const sectionPath = path.join(contextPath, section);
|
|
490
|
+
if (!fs.existsSync(sectionPath)) {
|
|
491
|
+
fs.mkdirSync(sectionPath, { recursive: true });
|
|
492
|
+
}
|
|
493
|
+
}
|
|
494
|
+
// Create README.md
|
|
495
|
+
const readmePath = path.join(contextPath, "README.md");
|
|
496
|
+
if (!fs.existsSync(readmePath)) {
|
|
497
|
+
const readme = `# CONTEXT
|
|
2261
498
|
|
|
2262
|
-
|
|
499
|
+
This folder contains product context documentation synced with EpicContext.
|
|
2263
500
|
|
|
2264
|
-
|
|
2265
|
-
2. **The \`section\` field must match the folder name** (e.g., files in \`brand/\` must have \`section: brand\`)
|
|
2266
|
-
3. **The \`key\` must be unique within the section** (use kebab-case, no spaces)
|
|
2267
|
-
4. **Always use specific block types** - each section has its own block types, never use generic \`text\`
|
|
2268
|
-
5. **Set \`status: draft\` for new content** and \`status: complete\` when finalized
|
|
501
|
+
## IMPORTANT: File Format
|
|
2269
502
|
|
|
2270
|
-
|
|
503
|
+
**All markdown files MUST have YAML frontmatter with these required fields:**
|
|
2271
504
|
|
|
2272
|
-
WRONG: Using \`title\` and \`description\` instead of proper frontmatter
|
|
2273
505
|
\`\`\`yaml
|
|
2274
506
|
---
|
|
2275
|
-
|
|
2276
|
-
|
|
507
|
+
type: persona # Block type (persona, feature, decision, etc.)
|
|
508
|
+
section: brand # Section name (must match folder name)
|
|
509
|
+
key: unique-key # Unique identifier (use kebab-case)
|
|
510
|
+
name: Display Name # Human-readable name
|
|
511
|
+
status: draft # Status: draft, complete, or empty
|
|
2277
512
|
---
|
|
2278
513
|
\`\`\`
|
|
2279
514
|
|
|
2280
|
-
|
|
2281
|
-
\`\`\`yaml
|
|
2282
|
-
---
|
|
2283
|
-
type: tone_of_voice
|
|
2284
|
-
section: brand
|
|
2285
|
-
key: brand-voice
|
|
2286
|
-
name: Brand Voice
|
|
2287
|
-
status: draft
|
|
2288
|
-
---
|
|
2289
|
-
\`\`\`
|
|
515
|
+
See \`AI-GUIDE.md\` for detailed format instructions.
|
|
2290
516
|
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
517
|
+
## Structure
|
|
518
|
+
|
|
519
|
+
Each folder represents a section of your product documentation:
|
|
520
|
+
|
|
521
|
+
- \`constitution/\` - Non-negotiable rules and principles
|
|
522
|
+
- \`brand/\` - Identity, voice, and visual system
|
|
523
|
+
- \`product/\` - Vision, features, and roadmap
|
|
524
|
+
- \`business-strategy/\` - Strategic planning and business models
|
|
525
|
+
- \`users/\` - Personas, jobs to be done, and user journeys
|
|
526
|
+
- \`research/\` - Market and competitor analysis
|
|
527
|
+
- \`technical/\` - Stack, architecture, and constraints
|
|
528
|
+
- \`design-system/\` - Links to Storybook and Figma
|
|
529
|
+
- \`information-architecture/\` - Site structure and taxonomies
|
|
530
|
+
- \`metrics/\` - KPIs and analytics
|
|
531
|
+
- \`decisions/\` - Architecture decision records
|
|
532
|
+
- \`development/\` - Epics, stories, tasks, and roadmaps
|
|
533
|
+
- \`marketing/\` - Marketing campaigns and SEO content strategy
|
|
534
|
+
|
|
535
|
+
## Syncing
|
|
536
|
+
|
|
537
|
+
This folder is synced with your EpicContext project using the MCP server.
|
|
538
|
+
|
|
539
|
+
To sync changes:
|
|
540
|
+
\`\`\`bash
|
|
541
|
+
epicontext sync
|
|
2298
542
|
\`\`\`
|
|
2299
543
|
|
|
2300
|
-
|
|
2301
|
-
\`\`\`
|
|
2302
|
-
|
|
2303
|
-
type: persona
|
|
2304
|
-
section: users
|
|
2305
|
-
key: primary-user
|
|
2306
|
-
name: Primary User
|
|
2307
|
-
status: draft
|
|
2308
|
-
---
|
|
544
|
+
To watch for changes and auto-sync:
|
|
545
|
+
\`\`\`bash
|
|
546
|
+
epicontext watch
|
|
2309
547
|
\`\`\`
|
|
2310
548
|
`;
|
|
549
|
+
fs.writeFileSync(readmePath, readme, "utf-8");
|
|
550
|
+
}
|
|
551
|
+
// Create .ai-guides folder for modular section guides
|
|
552
|
+
const aiGuidesDir = path.join(contextPath, ".ai-guides");
|
|
553
|
+
if (!fs.existsSync(aiGuidesDir)) {
|
|
554
|
+
fs.mkdirSync(aiGuidesDir, { recursive: true });
|
|
555
|
+
}
|
|
556
|
+
// Generate section-specific guides
|
|
557
|
+
generateSectionGuides(aiGuidesDir);
|
|
558
|
+
// Create AI-GUIDE.md (slim core version) with detailed format instructions
|
|
559
|
+
const aiGuidePath = path.join(contextPath, "AI-GUIDE.md");
|
|
560
|
+
if (!fs.existsSync(aiGuidePath)) {
|
|
561
|
+
const aiGuide = generateCoreAIGuide();
|
|
2311
562
|
fs.writeFileSync(aiGuidePath, aiGuide, "utf-8");
|
|
2312
563
|
}
|
|
2313
564
|
// Create README.md for each section with detailed guidance
|
|
@@ -2322,19 +573,17 @@ status: draft
|
|
|
2322
573
|
- **Glossary**: Domain-specific terminology and definitions
|
|
2323
574
|
|
|
2324
575
|
This is the first section AI agents should read to understand project boundaries.`,
|
|
2325
|
-
blockTypes: ["ai_rules", "context_guide", "constraint", "
|
|
576
|
+
blockTypes: ["ai_rules", "context_guide", "constraint", "glossary", "section_guide"],
|
|
2326
577
|
},
|
|
2327
578
|
"brand": {
|
|
2328
579
|
description: "Identity, voice, and visual system",
|
|
2329
580
|
guidance: `Use this section to document:
|
|
2330
581
|
- **Brand Positioning**: Golden Circle (WHY/HOW/WHAT) and positioning statement
|
|
2331
|
-
- **
|
|
2332
|
-
- **
|
|
2333
|
-
- **Iconography**: Icon library, style, and selected icons
|
|
582
|
+
- **Visual Identity**: Colors, typography, logo, icons, assets combined (use brand_visual_identity)
|
|
583
|
+
- **Brand Moodboard**: Inspiration and reference images for brand development
|
|
2334
584
|
- **Tone of Voice**: Brand personality, voice archetype, vocabulary
|
|
2335
|
-
- **Messaging**: Elevator pitch, value propositions, CTAs
|
|
2336
|
-
|
|
2337
|
-
blockTypes: ["brand_positioning", "brand_color_palette", "brand_typography", "brand_iconography", "tone_of_voice", "messaging_framework", "logo", "brand_assets"],
|
|
585
|
+
- **Messaging**: Elevator pitch, value propositions, CTAs`,
|
|
586
|
+
blockTypes: ["brand_positioning", "brand_visual_identity", "brand_moodboard", "tone_of_voice", "messaging_framework", "section_guide"],
|
|
2338
587
|
},
|
|
2339
588
|
"product": {
|
|
2340
589
|
description: "Vision, features, and roadmap",
|
|
@@ -2342,8 +591,9 @@ This is the first section AI agents should read to understand project boundaries
|
|
|
2342
591
|
- **Product Overview**: Vision, mission, and product strategy
|
|
2343
592
|
- **Features**: Individual feature definitions with acceptance criteria
|
|
2344
593
|
- **Product Strategy Canvas**: Product-specific strategy and goals
|
|
2345
|
-
- **Feature Market Analysis**: Competitive analysis for specific features
|
|
2346
|
-
|
|
594
|
+
- **Feature Market Analysis**: Competitive analysis for specific features
|
|
595
|
+
- **Glossary**: Domain-specific terminology and definitions`,
|
|
596
|
+
blockTypes: ["product_overview", "feature", "product_strategy_canvas", "feature_market_analysis", "glossary", "section_guide"],
|
|
2347
597
|
},
|
|
2348
598
|
"business-strategy": {
|
|
2349
599
|
description: "Strategic planning frameworks and business models",
|
|
@@ -2354,7 +604,7 @@ This is the first section AI agents should read to understand project boundaries
|
|
|
2354
604
|
- **Porter's Five Forces**: Competitive forces analysis
|
|
2355
605
|
- **Strategic Group Map**: Market positioning visualization
|
|
2356
606
|
- **Obeya Board**: Visual management board`,
|
|
2357
|
-
blockTypes: ["ogsm", "business_model_canvas", "swot_analysis", "porters_five_forces", "strategic_group_map", "obeya_board"],
|
|
607
|
+
blockTypes: ["ogsm", "business_model_canvas", "swot_analysis", "porters_five_forces", "strategic_group_map", "obeya_board", "section_guide"],
|
|
2358
608
|
},
|
|
2359
609
|
"users": {
|
|
2360
610
|
description: "Personas, jobs to be done, and user journeys",
|
|
@@ -2367,19 +617,17 @@ Organize files in subfolders:
|
|
|
2367
617
|
- \`personas/\` - User persona files
|
|
2368
618
|
- \`jobs-to-be-done/\` - JTBD files
|
|
2369
619
|
- \`journey-maps/\` - Journey map files`,
|
|
2370
|
-
blockTypes: ["persona", "jtbd", "journey_map"],
|
|
620
|
+
blockTypes: ["persona", "jtbd", "journey_map", "section_guide"],
|
|
2371
621
|
},
|
|
2372
622
|
"research": {
|
|
2373
623
|
description: "Market and competitor analysis",
|
|
2374
624
|
guidance: `Use this section to document:
|
|
2375
625
|
- **Competitors**: Analysis of competing products/services
|
|
2376
|
-
- **
|
|
2377
|
-
- **User Research**: Findings from user interviews, usability tests
|
|
626
|
+
- **User Research**: Research documents with highlights and key insights
|
|
2378
627
|
- **Research Data**: Tabular research data with charts and analysis
|
|
2379
|
-
- **Research Documents**: Long-form research documents with insights
|
|
2380
628
|
|
|
2381
|
-
Organize files in subfolders: \`competitors/\`, \`data-research
|
|
2382
|
-
blockTypes: ["competitor", "
|
|
629
|
+
Organize files in subfolders: \`competitors/\`, \`data-research/\``,
|
|
630
|
+
blockTypes: ["competitor", "user_research", "research_data", "section_guide"],
|
|
2383
631
|
},
|
|
2384
632
|
"technical": {
|
|
2385
633
|
description: "Stack, architecture, and constraints",
|
|
@@ -2401,7 +649,7 @@ Organize files in subfolders:
|
|
|
2401
649
|
- \`api/\` - API endpoint files
|
|
2402
650
|
- \`models/\` - Data model files
|
|
2403
651
|
- \`environments/\` - Environment files`,
|
|
2404
|
-
blockTypes: ["tech_stack", "architecture_diagram", "integration", "constraint", "dev_setup", "api_endpoint", "api_spec", "data_model", "data_schema", "environment", "testing_strategy", "cost_calculator"],
|
|
652
|
+
blockTypes: ["tech_stack", "architecture_diagram", "integration", "constraint", "dev_setup", "api_endpoint", "api_spec", "data_model", "data_schema", "environment", "testing_strategy", "cost_calculator", "section_guide"],
|
|
2405
653
|
},
|
|
2406
654
|
"design-system": {
|
|
2407
655
|
description: "Links to Storybook and Figma design resources",
|
|
@@ -2413,7 +661,7 @@ Organize files in subfolders:
|
|
|
2413
661
|
|
|
2414
662
|
Note: This section is for linking external design tools, not for documenting
|
|
2415
663
|
components directly. Component documentation lives in Storybook.`,
|
|
2416
|
-
blockTypes: ["storybook_link", "figma_embed"],
|
|
664
|
+
blockTypes: ["storybook_link", "figma_embed", "section_guide"],
|
|
2417
665
|
},
|
|
2418
666
|
"information-architecture": {
|
|
2419
667
|
description: "Site structure and taxonomies",
|
|
@@ -2427,7 +675,7 @@ components directly. Component documentation lives in Storybook.`,
|
|
|
2427
675
|
- Hierarchical organization of content
|
|
2428
676
|
|
|
2429
677
|
These blocks use visual editors in the EpicContext app.`,
|
|
2430
|
-
blockTypes: ["ia_tree", "taxonomy"],
|
|
678
|
+
blockTypes: ["ia_tree", "taxonomy", "section_guide"],
|
|
2431
679
|
},
|
|
2432
680
|
"metrics": {
|
|
2433
681
|
description: "KPIs and analytics",
|
|
@@ -2440,7 +688,7 @@ These blocks use visual editors in the EpicContext app.`,
|
|
|
2440
688
|
- **Analytics Events**: Event tracking definitions for implementation
|
|
2441
689
|
|
|
2442
690
|
Use AARRR categories (acquisition, activation, retention, revenue, referral) for the \`category\` field.`,
|
|
2443
|
-
blockTypes: ["metric", "analytics_event"],
|
|
691
|
+
blockTypes: ["metric", "north_star", "kpi", "analytics_event", "section_guide"],
|
|
2444
692
|
},
|
|
2445
693
|
"decisions": {
|
|
2446
694
|
description: "Architecture decision records",
|
|
@@ -2453,7 +701,7 @@ Use AARRR categories (acquisition, activation, retention, revenue, referral) for
|
|
|
2453
701
|
- Consequences: What are the implications?
|
|
2454
702
|
|
|
2455
703
|
Good ADRs help future team members understand why things are built this way.`,
|
|
2456
|
-
blockTypes: ["decision"],
|
|
704
|
+
blockTypes: ["decision", "section_guide"],
|
|
2457
705
|
},
|
|
2458
706
|
"development": {
|
|
2459
707
|
description: "Epics, stories, tasks, and roadmaps",
|
|
@@ -2470,7 +718,18 @@ Organize files in subfolders:
|
|
|
2470
718
|
- \`stories/\` - User story files
|
|
2471
719
|
- \`tasks/\` - Task/implementation plan files
|
|
2472
720
|
- \`roadmaps/\` - Roadmap files`,
|
|
2473
|
-
blockTypes: ["epic", "user_story", "task", "roadmap", "
|
|
721
|
+
blockTypes: ["epic", "user_story", "task", "roadmap", "impact_effort_matrix", "kanban_board", "section_guide"],
|
|
722
|
+
},
|
|
723
|
+
"environments": {
|
|
724
|
+
description: "Environment links, deployments, and release notes",
|
|
725
|
+
guidance: `Use this section to document deployment environments and releases:
|
|
726
|
+
- **Environment Links**: Links to deployed environments (production, staging, dev)
|
|
727
|
+
- URL, status, and purpose for each environment
|
|
728
|
+
- **Release Notes**: Changelog and release documentation
|
|
729
|
+
- Version numbers, dates, and changes
|
|
730
|
+
|
|
731
|
+
Organize files as needed in the environments folder.`,
|
|
732
|
+
blockTypes: ["environment_link", "release_note", "section_guide"],
|
|
2474
733
|
},
|
|
2475
734
|
"marketing": {
|
|
2476
735
|
description: "Marketing campaigns, ads, and content strategy",
|
|
@@ -2491,7 +750,28 @@ Organize files in subfolders:
|
|
|
2491
750
|
- \`seo/\` - SEO content strategy files
|
|
2492
751
|
|
|
2493
752
|
Always link campaigns to target personas and success metrics.`,
|
|
2494
|
-
blockTypes: ["marketing_campaign", "seo_content"],
|
|
753
|
+
blockTypes: ["marketing_campaign", "seo_content", "section_guide"],
|
|
754
|
+
},
|
|
755
|
+
"reports": {
|
|
756
|
+
description: "Business cases, pain point analysis, and user sentiment reports",
|
|
757
|
+
guidance: `Use this section to create synthesis documents that analyze project context:
|
|
758
|
+
- **Business Case**: One-page business case with executive summary, market opportunity, value proposition, and recommendations
|
|
759
|
+
- Link to personas, features, and competitors for traceability
|
|
760
|
+
- Include confidence level based on data quality
|
|
761
|
+
- **Pain Points Report**: Analysis of bottlenecks across product, tech, and UX
|
|
762
|
+
- Categorize by domain (product, technical, UX, process)
|
|
763
|
+
- Include severity assessment and recommendations
|
|
764
|
+
- **User Sentiment Report**: User experience analysis with quotes and emotional journey
|
|
765
|
+
- Include positive/negative themes with supporting quotes
|
|
766
|
+
- Track satisfaction drivers and churn risks
|
|
767
|
+
|
|
768
|
+
Organize files in subfolders:
|
|
769
|
+
- \`business-cases/\` - Business case documents
|
|
770
|
+
- \`pain-points/\` - Pain points analysis reports
|
|
771
|
+
- \`sentiment/\` - User sentiment analysis reports
|
|
772
|
+
|
|
773
|
+
Reports should always reference source blocks (personas, journeys, research) for traceability.`,
|
|
774
|
+
blockTypes: ["business_case", "pain_points_report", "user_sentiment_report", "section_guide"],
|
|
2495
775
|
},
|
|
2496
776
|
};
|
|
2497
777
|
for (const section of defaultSections) {
|