@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/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
- * Read all markdown files from a directory recursively
6
- */
7
- export function readContextFolder(contextPath) {
8
- const files = [];
9
- if (!fs.existsSync(contextPath)) {
10
- return files;
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
- "id": "ai-agents",
862
- "label": "AI Coding Agents",
863
- "type": "person",
864
- "description": "Claude Code, Cursor, etc. that consume context",
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
- "id": "supabase",
869
- "label": "Supabase",
870
- "type": "external",
871
- "description": "Backend-as-a-Service for auth and database",
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
- "id": "clerk",
878
- "label": "Clerk",
879
- "type": "external",
880
- "description": "Authentication provider",
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
- "id": "mcp-server",
886
- "label": "MCP Server",
887
- "type": "system",
888
- "description": "Local server that syncs context to codebase",
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
- "id": "conn-app-to-supabase",
904
- "sourceId": "epiccontext",
905
- "targetId": "supabase",
906
- "label": "Stores data",
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
- "id": "conn-app-to-clerk",
912
- "sourceId": "epiccontext",
913
- "targetId": "clerk",
914
- "label": "Authenticates users",
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
- "id": "conn-app-to-mcp",
920
- "sourceId": "epiccontext",
921
- "targetId": "mcp-server",
922
- "label": "Syncs via API",
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
- "id": "conn-ai-to-mcp",
928
- "sourceId": "ai-agents",
929
- "targetId": "mcp-server",
930
- "label": "Reads context",
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
- "id": "api",
976
- "label": "API Routes",
977
- "type": "container",
978
- "description": "Server-side API endpoints",
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
- "id": "database",
984
- "label": "Database",
985
- "type": "database",
986
- "description": "Stores all application data",
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
- "id": "file-storage",
992
- "label": "File Storage",
993
- "type": "database",
994
- "description": "Stores uploaded assets",
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
- "id": "mcp-package",
1000
- "label": "MCP Package",
1001
- "type": "container",
1002
- "description": "NPM package for local sync",
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
- "id": "conn-api-to-db",
1018
- "sourceId": "api",
1019
- "targetId": "database",
1020
- "label": "Queries",
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
- "id": "conn-web-to-storage",
1026
- "sourceId": "web-app",
1027
- "targetId": "file-storage",
1028
- "label": "Uploads/Downloads",
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
- "id": "conn-mcp-to-api",
1034
- "sourceId": "mcp-package",
1035
- "targetId": "api",
1036
- "label": "Syncs context",
1037
- "communicationType": "sync",
1038
- "technology": "REST API"
1039
- }
1040
- ]
1041
- }
1042
- \\\`\`\`
1043
- <!-- /sync:data -->
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
- Implement a complete authentication system allowing users to securely access their accounts.
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
- ## Summary
1866
- Build secure user authentication with email/password and OAuth support.
113
+ ## Guide Structure
1867
114
 
1868
- ## Description
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
- ### Goals
1872
- - Enable secure user registration with email verification
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
- ### Success Criteria
1878
- - Users can create accounts and verify email
1879
- - Login works with email/password and OAuth providers
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
- ### Out of Scope
1884
- - Two-factor authentication (planned for Phase 2)
1885
- - Social login beyond Google/GitHub
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
- #### User Story Block
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
- # Email Login
139
+ ### BLOCK TYPE ENFORCEMENT
1924
140
 
1925
- Allow users to securely log in with their email and password.
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
- ## Summary
1928
- Implement email/password authentication with proper security measures.
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
- ## User Story
1931
- As a registered user, I want to log in with my email and password, so that I can access my account securely and quickly.
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
- ## Description
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
- ## Acceptance Criteria
163
+ **CRITICAL:** All content must be in ONE consistent language.
164
+ Check existing CONTEXT files to determine the project's language.
1937
165
 
1938
- ### Scenario: Successful login
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
- ### Scenario: Invalid credentials
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
- ### Scenario: Rate limiting
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
- #### Task / Agent Plan Block
180
+ ## Block Type Section → Folder Reference
1966
181
 
1967
- A Task contains the technical implementation plan. AI coding agents (Claude Code, Cursor, etc.) should create Tasks when planning work.
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
- **Required Fields:**
1970
- - \`description\` - What needs to be done
1971
- - \`status\` - planned, todo, in_progress, in_review, done, abandoned
186
+ ---
1972
187
 
1973
- **Key Fields:**
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: task
1988
- section: development
1989
- key: implement-login-api
1990
- name: Implement Login API Endpoint
192
+ type: [block_type]
193
+ section: [section_type]
194
+ key: [unique-kebab-case-key]
195
+ name: "Human Readable Name"
1991
196
  status: draft
1992
- priority: high
1993
- agent_source: claude_code
1994
- story_ref: email-login
1995
- estimated_hours: 4
197
+ created: ${today}
198
+ updated: ${today}
1996
199
  ---
1997
200
 
1998
- # Implement Login API Endpoint
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
- #### Roadmap Block
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
- #### Workflow: From User Request to Implementation
208
+ ## Which Block Type Should I Use?
2103
209
 
2104
- **1. User/Product Owner Creates Epic:**
2105
- \`\`\`
2106
- "We need user authentication for the MVP"
2107
- Create Epic: user-authentication
2108
- Set priority: high
2109
- Set dates: Q1 2025
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
- **2. User/Product Owner Breaks Down Stories:**
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
- **3. AI Agent Reads Story and Plans:**
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
- **4. AI Agent Executes and Documents:**
2129
- \`\`\`
2130
- Task: implement-login-api
2131
- Status: in_progress
2132
- [AI implements code]
2133
- → Status: done
2134
- Outcome: "Completed. Added rate limiting as discussed."
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
- #### Best Practices for AI Agents
247
+ ## Linking Blocks
2140
248
 
2141
- 1. **Read the Story First**: Before creating tasks, fully understand the user story and acceptance criteria.
249
+ Key relationships (use exact \`key\` values from target blocks):
2142
250
 
2143
- 2. **Break Down Thoughtfully**: Create tasks that are:
2144
- - Independently testable
2145
- - 2-8 hours of work each
2146
- - Clearly scoped with specific files
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
- 3. **Document Your Plan**: In \`plan_steps\`, explain:
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
- 4. **Track Codebase Context**: Note relevant:
2154
- - Existing patterns to follow
2155
- - Related code to reference
2156
- - Constraints or dependencies
262
+ ## Syncing with EpicContext
2157
263
 
2158
- 5. **Update Outcomes**: After completing a task, document:
2159
- - What was actually done
2160
- - Any deviations from the plan
2161
- - Issues encountered and how they were resolved
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
- ### Design System Blocks
2166
-
2167
- #### Storybook Link Block
272
+ ## Section Guides Reference
2168
273
 
2169
- A Storybook Link connects your EpicContext project to a deployed Storybook design system with authentication.
274
+ For detailed block schemas, examples, and guidelines, read the appropriate section guide:
2170
275
 
2171
- **Key Fields:**
2172
- - \`name\` - Display name for the Storybook
2173
- - \`url\` - Deployed Storybook URL (Vercel, Netlify, etc.)
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
- # Design System Storybook
282
+ *Core AI guide - auto-generated by EpicContext CLI*
283
+ *Generated: ${new Date().toISOString()}*
2192
284
 
2193
- Component library, design tokens, and usage guidelines.
2194
-
2195
- **URL:** https://design-system.yourcompany.vercel.app
2196
- **Repository:** https://github.com/yourcompany/design-system
2197
- **Authentication:** Enabled (EpicContext SSO)
2198
-
2199
- ## Quick Links
2200
- - [Design Tokens](https://design-system.yourcompany.vercel.app?path=/docs/tokens-colors--docs)
2201
- - [Components](https://design-system.yourcompany.vercel.app?path=/docs/components-button--docs)
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
- ## Categories
2204
- Tokens, Components, Patterns
2205
- \`\`\`
298
+ > ${info.description}
299
+ > Folder: \`CONTEXT/${info.folder}/\`
2206
300
 
2207
- **Setting Up Protected Storybook:**
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
- 1. Clone the EpicContext Storybook template:
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
- The template includes middleware that validates JWT tokens signed by EpicContext, providing SSO-style access to your design system.
306
+ ## Block Types in This Section
2221
307
 
2222
- **Template Repository:** https://github.com/epiccontext/storybook-template
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 References
314
+ ## Detailed Block Schemas
315
+
316
+ ${info.blockTypes.map(bt => `### ${bt}
2227
317
 
2228
- Some blocks can reference other blocks using reference fields in frontmatter:
318
+ **Type:** \`${bt}\`
319
+ **Section:** ${sectionKey}
320
+ **File Location:** \`${info.folder}/[name].md\`
2229
321
 
2230
- ### Single Reference (one-to-one)
322
+ **Required Frontmatter:**
2231
323
  \`\`\`yaml
2232
324
  ---
2233
- type: journey_map
2234
- section: users
2235
- key: user-onboarding
2236
- persona_ref: primary-user # References a persona block
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
- ### Multiple References (one-to-many)
2241
- \`\`\`yaml
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
- ### Common Reference Fields
2254
- | Field | Used In | References |
2255
- |-------|---------|------------|
2256
- | \`persona_ref\` | journey_map, jtbd | persona block |
2257
- | \`epic_ref\` | user_story | epic block |
2258
- | \`story_ref\` | task | user_story block |
2259
- | \`stories_ref\` | epic | user_story blocks |
2260
- | \`product_ref\` | feature, epic | product overview block |
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
- ## Important Rules
499
+ This folder contains product context documentation synced with EpicContext.
2263
500
 
2264
- 1. **Always include all 5 frontmatter fields** (type, section, key, name, status)
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
- ## Common Mistakes to Avoid
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
- title: My Document # WRONG - not recognized
2276
- description: About this # WRONG - not recognized
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
- CORRECT: Using the required frontmatter fields
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
- WRONG: Missing required fields
2292
- \`\`\`yaml
2293
- ---
2294
- type: persona
2295
- name: My Persona
2296
- # Missing: section, key, status
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
- CORRECT: All required fields present
2301
- \`\`\`yaml
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", "implementation_log", "glossary"],
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
- - **Color Palette**: Primary, secondary, and semantic colors with hex/RGB values
2332
- - **Typography**: Font families, weights, and usage guidelines
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
- - **Logos**: Logo variants for different backgrounds`,
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
- blockTypes: ["product_overview", "feature", "product_strategy_canvas", "feature_market_analysis"],
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
- - **Market Research**: Market size, trends, and opportunities
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/\`, \`research-documents/\``,
2382
- blockTypes: ["competitor", "market_research", "user_research", "research_data", "research_document"],
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", "release", "impact_effort_matrix"],
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) {