@epiccontext/mcp 0.1.47 → 0.1.48

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,557 @@
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", "implementation_log", "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", "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"
901
- },
902
- {
903
- "id": "conn-app-to-supabase",
904
- "sourceId": "epiccontext",
905
- "targetId": "supabase",
906
- "label": "Stores data",
907
- "communicationType": "sync",
908
- "technology": "PostgreSQL/REST"
31
+ research: {
32
+ name: "Research",
33
+ description: "Market, competitors, and insights",
34
+ folder: "research",
35
+ blockTypes: ["competitor", "user_research", "research_data", "research_document", "section_guide"],
909
36
  },
910
- {
911
- "id": "conn-app-to-clerk",
912
- "sourceId": "epiccontext",
913
- "targetId": "clerk",
914
- "label": "Authenticates users",
915
- "communicationType": "sync",
916
- "technology": "HTTPS"
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"],
917
42
  },
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"
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"],
925
48
  },
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 }
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"],
973
54
  },
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 }
55
+ metrics: {
56
+ name: "Metrics",
57
+ description: "KPIs and analytics",
58
+ folder: "metrics",
59
+ blockTypes: ["metric", "north_star", "kpi", "analytics_event", "section_guide"],
981
60
  },
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 }
61
+ decisions: {
62
+ name: "Decisions",
63
+ description: "What we decided and why",
64
+ folder: "decisions",
65
+ blockTypes: ["decision", "section_guide"],
989
66
  },
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 }
67
+ development: {
68
+ name: "Development",
69
+ description: "Epics, user stories, tasks, and roadmap",
70
+ folder: "development",
71
+ blockTypes: ["epic", "user_story", "task", "roadmap", "release", "impact_effort_matrix", "section_guide"],
997
72
  },
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"
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"],
1015
78
  },
1016
- {
1017
- "id": "conn-api-to-db",
1018
- "sourceId": "api",
1019
- "targetId": "database",
1020
- "label": "Queries",
1021
- "communicationType": "bidirectional",
1022
- "technology": "Supabase Client"
79
+ marketing: {
80
+ name: "Marketing",
81
+ description: "Marketing campaigns, ads, and content strategy",
82
+ folder: "marketing",
83
+ blockTypes: ["marketing_campaign", "seo_content", "section_guide"],
1023
84
  },
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"
85
+ reports: {
86
+ name: "Reports",
87
+ description: "Business cases, pain point analysis, and user sentiment reports",
88
+ folder: "reports",
89
+ blockTypes: ["business_case", "pain_points_report", "user_sentiment_report", "section_guide"],
1031
90
  },
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
91
+ };
92
+ /**
93
+ * Generate the CORE AI guide (slim version without detailed schemas)
94
+ * This is ~250 lines instead of ~1900 lines
95
+ */
96
+ function generateCoreAIGuide() {
97
+ const today = new Date().toISOString().split("T")[0];
98
+ const allBlockTypes = Object.values(SECTION_INFO)
99
+ .flatMap(s => s.blockTypes)
100
+ .filter((v, i, a) => a.indexOf(v) === i) // unique
101
+ .sort();
102
+ return `# AI Agent Guide for CONTEXT Folder
1862
103
 
1863
- Implement a complete authentication system allowing users to securely access their accounts.
104
+ > **For Claude Code, Cursor, and other AI coding agents**
105
+ > This guide explains how to create and structure content in this CONTEXT folder.
1864
106
 
1865
- ## Summary
1866
- Build secure user authentication with email/password and OAuth support.
107
+ ## Guide Structure
1867
108
 
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.
109
+ This guide is **modular** to reduce context loading:
1870
110
 
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
111
+ - **This file (AI-GUIDE.md)**: Core rules, block type list, navigation (~250 lines)
112
+ - **Section guides (.ai-guides/)**: Detailed schemas for each section (~200-400 lines each)
1876
113
 
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
114
+ **Load only what you need:**
115
+ 1. Always read this core guide first
116
+ 2. Then read the section guide for the section you're working on
1882
117
 
1883
- ### Out of Scope
1884
- - Two-factor authentication (planned for Phase 2)
1885
- - Social login beyond Google/GitHub
118
+ \`\`\`
119
+ CONTEXT/
120
+ ├── AI-GUIDE.md ← You are here (core rules)
121
+ ├── .ai-guides/
122
+ │ ├── brand-guide.md ← Brand section schemas
123
+ │ ├── development-guide.md ← Development section schemas
124
+ │ ├── product-guide.md ← Product section schemas
125
+ │ ├── users-guide.md ← Users section schemas
126
+ │ └── ... ← Other section guides
1886
127
  \`\`\`
1887
128
 
1888
129
  ---
1889
130
 
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
- ---
131
+ ## CRITICAL RULES - READ FIRST
1922
132
 
1923
- # Email Login
133
+ ### BLOCK TYPE ENFORCEMENT
1924
134
 
1925
- Allow users to securely log in with their email and password.
135
+ **ONLY use block types from the Valid Block Types list below.** Using undefined types will:
136
+ - Show "No schema defined" in the UI
137
+ - Lose all content when synced
138
+ - Break import/export
1926
139
 
1927
- ## Summary
1928
- Implement email/password authentication with proper security measures.
140
+ ### DO:
141
+ - **ONLY use block types listed in this guide**
142
+ - Create **ONE FILE PER BLOCK** (one user story = one file)
143
+ - Use the **exact folder structure** shown below
144
+ - Include **YAML frontmatter** with type, section, key, name, status
145
+ - Use **kebab-case** for keys and filenames
146
+ - **Read the section guide** for detailed schemas before creating blocks
1929
147
 
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.
148
+ ### DO NOT:
149
+ - **Invent new block types** - if it's not in this guide, it doesn't exist
150
+ - ❌ Create a single large file with multiple items
151
+ - ❌ Put files in wrong folders
152
+ - ❌ Use generic markdown without frontmatter
153
+ - ❌ Skip reading the section guide for detailed schemas
1932
154
 
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.
155
+ ### LANGUAGE CONSISTENCY
1935
156
 
1936
- ## Acceptance Criteria
157
+ **CRITICAL:** All content must be in ONE consistent language.
158
+ Check existing CONTEXT files to determine the project's language.
1937
159
 
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
160
+ ---
1943
161
 
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
162
+ ## Valid Block Types (Quick Reference)
1950
163
 
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"
164
+ These are the ONLY valid values for \`type:\` in frontmatter:
1955
165
 
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
166
+ \`\`\`
167
+ ${allBlockTypes.join(", ")}
1961
168
  \`\`\`
1962
169
 
170
+ **For detailed schemas, see the section guide in \`.ai-guides/\`**
171
+
1963
172
  ---
1964
173
 
1965
- #### Task / Agent Plan Block
174
+ ## Block Type Section → Folder Reference
1966
175
 
1967
- A Task contains the technical implementation plan. AI coding agents (Claude Code, Cursor, etc.) should create Tasks when planning work.
176
+ | Block Type | Section | Folder | Guide |
177
+ |------------|---------|--------|-------|
178
+ ${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
179
 
1969
- **Required Fields:**
1970
- - \`description\` - What needs to be done
1971
- - \`status\` - planned, todo, in_progress, in_review, done, abandoned
180
+ ---
1972
181
 
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
182
+ ## Universal File Template
1983
183
 
1984
- **Example (AI Agent Plan):**
1985
184
  \`\`\`markdown
1986
185
  ---
1987
- type: task
1988
- section: development
1989
- key: implement-login-api
1990
- name: Implement Login API Endpoint
186
+ type: [block_type]
187
+ section: [section_type]
188
+ key: [unique-kebab-case-key]
189
+ name: "Human Readable Name"
1991
190
  status: draft
1992
- priority: high
1993
- agent_source: claude_code
1994
- story_ref: email-login
1995
- estimated_hours: 4
191
+ created: ${today}
192
+ updated: ${today}
1996
193
  ---
1997
194
 
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
- ---
195
+ # Title
2071
196
 
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
- }
197
+ [Content following the block type schema from section guide]
2098
198
  \`\`\`
2099
199
 
2100
200
  ---
2101
201
 
2102
- #### Workflow: From User Request to Implementation
202
+ ## Which Block Type Should I Use?
2103
203
 
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
- \`\`\`
204
+ | What You're Documenting | Block Type | Folder |
205
+ |------------------------|------------|--------|
206
+ | User persona | \`persona\` | \`users/personas/\` |
207
+ | Job to be done | \`jtbd\` | \`users/jobs-to-be-done/\` |
208
+ | User journey | \`journey_map\` | \`users/journey-maps/\` |
209
+ | Product vision | \`product_overview\` | \`product/\` |
210
+ | Feature | \`feature\` | \`product/features/\` |
211
+ | Large initiative (weeks) | \`epic\` | \`development/epics/\` |
212
+ | User story (days) | \`user_story\` | \`development/stories/\` |
213
+ | Technical task (hours) | \`task\` | \`development/tasks/\` |
214
+ | Brand positioning | \`brand_positioning\` | \`brand/\` |
215
+ | Visual identity | \`brand_visual_identity\` | \`brand/\` |
216
+ | Tone of voice | \`tone_of_voice\` | \`brand/\` |
217
+ | Architecture decision | \`decision\` | \`decisions/\` |
218
+ | Technical constraint | \`constraint\` | \`technical/\` |
219
+ | External service | \`integration\` | \`technical/integrations/\` |
220
+ | Competitor analysis | \`competitor\` | \`research/competitors/\` |
221
+ | Site structure | \`ia_tree\` | \`information-architecture/\` |
222
+ | Metric/KPI | \`metric\` | \`metrics/\` |
2111
223
 
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
- \`\`\`
224
+ ---
2119
225
 
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
- \`\`\`
226
+ ## Context Navigation
2127
227
 
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
- \`\`\`
228
+ **Read enough to answer these questions, then stop:**
229
+ 1. What should I build? (from task/story)
230
+ 2. Who am I building it for? (from persona)
231
+ 3. What constraints apply? (from constitution/technical)
232
+ 4. How should it look/behave? (from brand/design system)
233
+
234
+ **Link Priority:**
235
+ - **ALWAYS READ:** \`constitution/\`, parent refs (\`story_ref\`, \`epic_ref\`)
236
+ - **IF RELEVANT:** \`personas_ref\`, \`decisions_ref\`, \`integrations_ref\`
237
+ - **SKIP UNLESS NEEDED:** Sibling blocks, metrics, competitors
2136
238
 
2137
239
  ---
2138
240
 
2139
- #### Best Practices for AI Agents
241
+ ## Linking Blocks
2140
242
 
2141
- 1. **Read the Story First**: Before creating tasks, fully understand the user story and acceptance criteria.
243
+ Key relationships (use exact \`key\` values from target blocks):
2142
244
 
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
245
+ | From | Field | To | Required? |
246
+ |------|-------|---|-----------|
247
+ | \`user_story\` | \`epic_ref\` | \`epic\` | **Yes** |
248
+ | \`task\` | \`story_ref\` | \`user_story\` | **Yes** |
249
+ | \`journey_map\` | \`persona_ref\` | \`persona\` | **Yes** |
250
+ | \`jtbd\` | \`persona_ref\` | \`persona\` | No |
251
+ | \`feature\` | \`personas_ref\` | \`persona\` | No |
252
+ | \`epic\` | \`product_ref\` | \`product_overview\` | No |
2147
253
 
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
254
+ ---
2152
255
 
2153
- 4. **Track Codebase Context**: Note relevant:
2154
- - Existing patterns to follow
2155
- - Related code to reference
2156
- - Constraints or dependencies
256
+ ## Syncing with EpicContext
2157
257
 
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
258
+ \`\`\`bash
259
+ npx @epiccontext/mcp push # Push local changes to cloud
260
+ npx @epiccontext/mcp pull # Pull cloud changes to local
261
+ npx @epiccontext/mcp status # Check sync status
262
+ \`\`\`
2162
263
 
2163
264
  ---
2164
265
 
2165
- ### Design System Blocks
266
+ ## Section Guides Reference
2166
267
 
2167
- #### Storybook Link Block
268
+ For detailed block schemas, examples, and guidelines, read the appropriate section guide:
2168
269
 
2169
- A Storybook Link connects your EpicContext project to a deployed Storybook design system with authentication.
270
+ | Section | Guide File | Block Types |
271
+ |---------|-----------|-------------|
272
+ ${Object.entries(SECTION_INFO).map(([key, info]) => `| ${info.name} | \`.ai-guides/${info.folder}-guide.md\` | ${info.blockTypes.length} types |`).join("\n")}
2170
273
 
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)
2180
-
2181
- **Example:**
2182
- \`\`\`markdown
2183
274
  ---
2184
- type: storybook_link
2185
- section: design-system
2186
- key: main-storybook
2187
- name: Design System Storybook
2188
- status: complete
2189
- ---
2190
-
2191
- # Design System Storybook
2192
275
 
2193
- Component library, design tokens, and usage guidelines.
276
+ *Core AI guide - auto-generated by EpicContext CLI*
277
+ *Generated: ${new Date().toISOString()}*
2194
278
 
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)
279
+ **Next step:** Read the section guide for the section you're working on.
280
+ `;
281
+ }
282
+ /**
283
+ * Generate a section-specific guide
284
+ */
285
+ function generateSectionGuide(sectionKey) {
286
+ const info = SECTION_INFO[sectionKey];
287
+ if (!info)
288
+ return null;
289
+ const today = new Date().toISOString().split("T")[0];
290
+ return `# ${info.name} Section Guide
2202
291
 
2203
- ## Categories
2204
- Tokens, Components, Patterns
2205
- \`\`\`
292
+ > ${info.description}
293
+ > Folder: \`CONTEXT/${info.folder}/\`
2206
294
 
2207
- **Setting Up Protected Storybook:**
295
+ This guide contains detailed schemas and examples for this section.
296
+ For core rules and navigation, see \`CONTEXT/AI-GUIDE.md\`.
2208
297
 
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
298
+ ---
2219
299
 
2220
- The template includes middleware that validates JWT tokens signed by EpicContext, providing SSO-style access to your design system.
300
+ ## Block Types in This Section
2221
301
 
2222
- **Template Repository:** https://github.com/epiccontext/storybook-template
302
+ | Block Type | Description | File Location |
303
+ |------------|-------------|---------------|
304
+ ${info.blockTypes.map(bt => `| \`${bt}\` | See schema below | \`${info.folder}/\` |`).join("\n")}
2223
305
 
2224
306
  ---
2225
307
 
2226
- ## Block References
308
+ ## Detailed Block Schemas
2227
309
 
2228
- Some blocks can reference other blocks using reference fields in frontmatter:
310
+ ${info.blockTypes.map(bt => `### ${bt}
2229
311
 
2230
- ### Single Reference (one-to-one)
312
+ **Type:** \`${bt}\`
313
+ **Section:** ${sectionKey}
314
+ **File Location:** \`${info.folder}/[name].md\`
315
+
316
+ **Required Frontmatter:**
2231
317
  \`\`\`yaml
2232
318
  ---
2233
- type: journey_map
2234
- section: users
2235
- key: user-onboarding
2236
- persona_ref: primary-user # References a persona block
319
+ type: ${bt}
320
+ section: ${sectionKey}
321
+ key: example-${bt.replace(/_/g, "-")}
322
+ name: "Example ${bt.split("_").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}"
323
+ status: draft
324
+ created: ${today}
325
+ updated: ${today}
2237
326
  ---
2238
327
  \`\`\`
2239
328
 
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
329
+ **Content:** Follow the standard block structure with appropriate headings for this block type.
330
+
2250
331
  ---
2251
- \`\`\`
332
+ `).join("\n")}
2252
333
 
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 |
334
+ *Section guide for ${info.name} - auto-generated by EpicContext CLI*
335
+ *Generated: ${new Date().toISOString()}*
336
+ `;
337
+ }
338
+ /**
339
+ * Generate all section guides in the .ai-guides folder
340
+ */
341
+ function generateSectionGuides(aiGuidesDir) {
342
+ for (const [sectionKey, info] of Object.entries(SECTION_INFO)) {
343
+ const guideContent = generateSectionGuide(sectionKey);
344
+ if (guideContent) {
345
+ const guidePath = path.join(aiGuidesDir, `${info.folder}-guide.md`);
346
+ if (!fs.existsSync(guidePath)) {
347
+ fs.writeFileSync(guidePath, guideContent, "utf-8");
348
+ }
349
+ }
350
+ }
351
+ }
352
+ /**
353
+ * Read all markdown files from a directory recursively
354
+ */
355
+ export function readContextFolder(contextPath) {
356
+ const files = [];
357
+ if (!fs.existsSync(contextPath)) {
358
+ return files;
359
+ }
360
+ function walkDir(dir, relativeTo) {
361
+ const entries = fs.readdirSync(dir, { withFileTypes: true });
362
+ for (const entry of entries) {
363
+ const fullPath = path.join(dir, entry.name);
364
+ const relativePath = path.relative(relativeTo, fullPath);
365
+ if (entry.isDirectory()) {
366
+ // Skip hidden directories and node_modules
367
+ if (!entry.name.startsWith(".") && entry.name !== "node_modules") {
368
+ walkDir(fullPath, relativeTo);
369
+ }
370
+ }
371
+ else if (entry.isFile() && entry.name.endsWith(".md")) {
372
+ // Skip README and AI-GUIDE
373
+ const lowerName = entry.name.toLowerCase();
374
+ if (lowerName !== "readme.md" && lowerName !== "ai-guide.md") {
375
+ const content = fs.readFileSync(fullPath, "utf-8");
376
+ files.push({
377
+ path: relativePath,
378
+ content,
379
+ });
380
+ }
381
+ }
382
+ }
383
+ }
384
+ walkDir(contextPath, contextPath);
385
+ return files;
386
+ }
387
+ /**
388
+ * Write files to the context folder
389
+ * By default, skips files where local version is newer than cloud version
390
+ */
391
+ export function writeContextFolder(contextPath, files, options = {}) {
392
+ let written = 0;
393
+ let skipped = 0;
394
+ const skippedPaths = [];
395
+ for (const file of files) {
396
+ const fullPath = path.join(contextPath, file.path);
397
+ const dir = path.dirname(fullPath);
398
+ // Create directory if needed
399
+ if (!fs.existsSync(dir)) {
400
+ fs.mkdirSync(dir, { recursive: true });
401
+ }
402
+ // Always overwrite AI-GUIDE.md (it's server-generated and should be authoritative)
403
+ // This ensures users get the latest block type definitions on every pull
404
+ const isAIGuide = file.path.toLowerCase() === "ai-guide.md";
405
+ // Check if local file is newer than cloud version (unless force is set or it's AI-GUIDE.md)
406
+ if (!options.force && !isAIGuide && file.updatedAt && fs.existsSync(fullPath)) {
407
+ const localMtime = getFileModTime(fullPath);
408
+ const cloudMtime = new Date(file.updatedAt);
409
+ if (localMtime && localMtime > cloudMtime) {
410
+ // Local file is newer, skip overwriting
411
+ skipped++;
412
+ skippedPaths.push(file.path);
413
+ continue;
414
+ }
415
+ }
416
+ // Write file
417
+ try {
418
+ fs.writeFileSync(fullPath, file.content, "utf-8");
419
+ written++;
420
+ }
421
+ catch (error) {
422
+ console.error(`Failed to write ${file.path}:`, error);
423
+ skipped++;
424
+ }
425
+ }
426
+ return { written, skipped, skippedPaths };
427
+ }
428
+ /**
429
+ * Delete local files that don't exist in the cloud
430
+ * Used during pull to remove files that were deleted in the UI
431
+ */
432
+ export function deleteOrphanedLocalFiles(contextPath, cloudFiles) {
433
+ // Build a set of all cloud file paths (normalized)
434
+ const cloudPaths = new Set();
435
+ for (const file of cloudFiles) {
436
+ cloudPaths.add(file.path);
437
+ }
438
+ // Get all local markdown files
439
+ const localFiles = readContextFolder(contextPath);
440
+ const deleted = [];
441
+ for (const localFile of localFiles) {
442
+ // If local file doesn't exist in cloud, delete it
443
+ if (!cloudPaths.has(localFile.path)) {
444
+ const fullPath = path.join(contextPath, localFile.path);
445
+ try {
446
+ fs.unlinkSync(fullPath);
447
+ deleted.push(localFile.path);
448
+ }
449
+ catch (error) {
450
+ console.error(`Failed to delete ${localFile.path}:`, error);
451
+ }
452
+ }
453
+ }
454
+ return { deleted: deleted.length, deletedPaths: deleted };
455
+ }
456
+ /**
457
+ * Ensure the context folder exists with basic structure
458
+ */
459
+ export function ensureContextFolder(contextPath) {
460
+ if (!fs.existsSync(contextPath)) {
461
+ fs.mkdirSync(contextPath, { recursive: true });
462
+ }
463
+ // Create default section folders
464
+ // Note: folder names use hyphens, but section types in the app use underscores
465
+ const defaultSections = [
466
+ "constitution",
467
+ "brand",
468
+ "product",
469
+ "business-strategy",
470
+ "users",
471
+ "research",
472
+ "technical",
473
+ "design-system",
474
+ "information-architecture",
475
+ "metrics",
476
+ "decisions",
477
+ "development",
478
+ "marketing",
479
+ "reports",
480
+ ];
481
+ for (const section of defaultSections) {
482
+ const sectionPath = path.join(contextPath, section);
483
+ if (!fs.existsSync(sectionPath)) {
484
+ fs.mkdirSync(sectionPath, { recursive: true });
485
+ }
486
+ }
487
+ // Create README.md
488
+ const readmePath = path.join(contextPath, "README.md");
489
+ if (!fs.existsSync(readmePath)) {
490
+ const readme = `# CONTEXT
2261
491
 
2262
- ## Important Rules
492
+ This folder contains product context documentation synced with EpicContext.
2263
493
 
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
494
+ ## IMPORTANT: File Format
2269
495
 
2270
- ## Common Mistakes to Avoid
496
+ **All markdown files MUST have YAML frontmatter with these required fields:**
2271
497
 
2272
- WRONG: Using \`title\` and \`description\` instead of proper frontmatter
2273
498
  \`\`\`yaml
2274
499
  ---
2275
- title: My Document # WRONG - not recognized
2276
- description: About this # WRONG - not recognized
500
+ type: persona # Block type (persona, feature, decision, etc.)
501
+ section: brand # Section name (must match folder name)
502
+ key: unique-key # Unique identifier (use kebab-case)
503
+ name: Display Name # Human-readable name
504
+ status: draft # Status: draft, complete, or empty
2277
505
  ---
2278
506
  \`\`\`
2279
507
 
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
- \`\`\`
508
+ See \`AI-GUIDE.md\` for detailed format instructions.
2290
509
 
2291
- WRONG: Missing required fields
2292
- \`\`\`yaml
2293
- ---
2294
- type: persona
2295
- name: My Persona
2296
- # Missing: section, key, status
2297
- ---
510
+ ## Structure
511
+
512
+ Each folder represents a section of your product documentation:
513
+
514
+ - \`constitution/\` - Non-negotiable rules and principles
515
+ - \`brand/\` - Identity, voice, and visual system
516
+ - \`product/\` - Vision, features, and roadmap
517
+ - \`business-strategy/\` - Strategic planning and business models
518
+ - \`users/\` - Personas, jobs to be done, and user journeys
519
+ - \`research/\` - Market and competitor analysis
520
+ - \`technical/\` - Stack, architecture, and constraints
521
+ - \`design-system/\` - Links to Storybook and Figma
522
+ - \`information-architecture/\` - Site structure and taxonomies
523
+ - \`metrics/\` - KPIs and analytics
524
+ - \`decisions/\` - Architecture decision records
525
+ - \`development/\` - Epics, stories, tasks, and roadmaps
526
+ - \`marketing/\` - Marketing campaigns and SEO content strategy
527
+
528
+ ## Syncing
529
+
530
+ This folder is synced with your EpicContext project using the MCP server.
531
+
532
+ To sync changes:
533
+ \`\`\`bash
534
+ epicontext sync
2298
535
  \`\`\`
2299
536
 
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
- ---
537
+ To watch for changes and auto-sync:
538
+ \`\`\`bash
539
+ epicontext watch
2309
540
  \`\`\`
2310
541
  `;
542
+ fs.writeFileSync(readmePath, readme, "utf-8");
543
+ }
544
+ // Create .ai-guides folder for modular section guides
545
+ const aiGuidesDir = path.join(contextPath, ".ai-guides");
546
+ if (!fs.existsSync(aiGuidesDir)) {
547
+ fs.mkdirSync(aiGuidesDir, { recursive: true });
548
+ }
549
+ // Generate section-specific guides
550
+ generateSectionGuides(aiGuidesDir);
551
+ // Create AI-GUIDE.md (slim core version) with detailed format instructions
552
+ const aiGuidePath = path.join(contextPath, "AI-GUIDE.md");
553
+ if (!fs.existsSync(aiGuidePath)) {
554
+ const aiGuide = generateCoreAIGuide();
2311
555
  fs.writeFileSync(aiGuidePath, aiGuide, "utf-8");
2312
556
  }
2313
557
  // Create README.md for each section with detailed guidance
@@ -2322,19 +566,17 @@ status: draft
2322
566
  - **Glossary**: Domain-specific terminology and definitions
2323
567
 
2324
568
  This is the first section AI agents should read to understand project boundaries.`,
2325
- blockTypes: ["ai_rules", "context_guide", "constraint", "implementation_log", "glossary"],
569
+ blockTypes: ["ai_rules", "context_guide", "constraint", "implementation_log", "glossary", "section_guide"],
2326
570
  },
2327
571
  "brand": {
2328
572
  description: "Identity, voice, and visual system",
2329
573
  guidance: `Use this section to document:
2330
574
  - **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
575
+ - **Visual Identity**: Colors, typography, logo, icons, assets combined (use brand_visual_identity)
576
+ - **Brand Moodboard**: Inspiration and reference images for brand development
2334
577
  - **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"],
578
+ - **Messaging**: Elevator pitch, value propositions, CTAs`,
579
+ blockTypes: ["brand_positioning", "brand_visual_identity", "brand_moodboard", "tone_of_voice", "messaging_framework", "section_guide"],
2338
580
  },
2339
581
  "product": {
2340
582
  description: "Vision, features, and roadmap",
@@ -2343,7 +585,7 @@ This is the first section AI agents should read to understand project boundaries
2343
585
  - **Features**: Individual feature definitions with acceptance criteria
2344
586
  - **Product Strategy Canvas**: Product-specific strategy and goals
2345
587
  - **Feature Market Analysis**: Competitive analysis for specific features`,
2346
- blockTypes: ["product_overview", "feature", "product_strategy_canvas", "feature_market_analysis"],
588
+ blockTypes: ["product_overview", "feature", "product_strategy_canvas", "feature_market_analysis", "section_guide"],
2347
589
  },
2348
590
  "business-strategy": {
2349
591
  description: "Strategic planning frameworks and business models",
@@ -2354,7 +596,7 @@ This is the first section AI agents should read to understand project boundaries
2354
596
  - **Porter's Five Forces**: Competitive forces analysis
2355
597
  - **Strategic Group Map**: Market positioning visualization
2356
598
  - **Obeya Board**: Visual management board`,
2357
- blockTypes: ["ogsm", "business_model_canvas", "swot_analysis", "porters_five_forces", "strategic_group_map", "obeya_board"],
599
+ blockTypes: ["ogsm", "business_model_canvas", "swot_analysis", "porters_five_forces", "strategic_group_map", "obeya_board", "section_guide"],
2358
600
  },
2359
601
  "users": {
2360
602
  description: "Personas, jobs to be done, and user journeys",
@@ -2367,19 +609,17 @@ Organize files in subfolders:
2367
609
  - \`personas/\` - User persona files
2368
610
  - \`jobs-to-be-done/\` - JTBD files
2369
611
  - \`journey-maps/\` - Journey map files`,
2370
- blockTypes: ["persona", "jtbd", "journey_map"],
612
+ blockTypes: ["persona", "jtbd", "journey_map", "section_guide"],
2371
613
  },
2372
614
  "research": {
2373
615
  description: "Market and competitor analysis",
2374
616
  guidance: `Use this section to document:
2375
617
  - **Competitors**: Analysis of competing products/services
2376
- - **Market Research**: Market size, trends, and opportunities
2377
- - **User Research**: Findings from user interviews, usability tests
618
+ - **User Research**: Research documents with highlights and key insights
2378
619
  - **Research Data**: Tabular research data with charts and analysis
2379
- - **Research Documents**: Long-form research documents with insights
2380
620
 
2381
621
  Organize files in subfolders: \`competitors/\`, \`data-research/\`, \`research-documents/\``,
2382
- blockTypes: ["competitor", "market_research", "user_research", "research_data", "research_document"],
622
+ blockTypes: ["competitor", "user_research", "research_data", "research_document", "section_guide"],
2383
623
  },
2384
624
  "technical": {
2385
625
  description: "Stack, architecture, and constraints",
@@ -2401,7 +641,7 @@ Organize files in subfolders:
2401
641
  - \`api/\` - API endpoint files
2402
642
  - \`models/\` - Data model files
2403
643
  - \`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"],
644
+ 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
645
  },
2406
646
  "design-system": {
2407
647
  description: "Links to Storybook and Figma design resources",
@@ -2413,7 +653,7 @@ Organize files in subfolders:
2413
653
 
2414
654
  Note: This section is for linking external design tools, not for documenting
2415
655
  components directly. Component documentation lives in Storybook.`,
2416
- blockTypes: ["storybook_link", "figma_embed"],
656
+ blockTypes: ["storybook_link", "figma_embed", "section_guide"],
2417
657
  },
2418
658
  "information-architecture": {
2419
659
  description: "Site structure and taxonomies",
@@ -2427,7 +667,7 @@ components directly. Component documentation lives in Storybook.`,
2427
667
  - Hierarchical organization of content
2428
668
 
2429
669
  These blocks use visual editors in the EpicContext app.`,
2430
- blockTypes: ["ia_tree", "taxonomy"],
670
+ blockTypes: ["ia_tree", "taxonomy", "section_guide"],
2431
671
  },
2432
672
  "metrics": {
2433
673
  description: "KPIs and analytics",
@@ -2440,7 +680,7 @@ These blocks use visual editors in the EpicContext app.`,
2440
680
  - **Analytics Events**: Event tracking definitions for implementation
2441
681
 
2442
682
  Use AARRR categories (acquisition, activation, retention, revenue, referral) for the \`category\` field.`,
2443
- blockTypes: ["metric", "analytics_event"],
683
+ blockTypes: ["metric", "north_star", "kpi", "analytics_event", "section_guide"],
2444
684
  },
2445
685
  "decisions": {
2446
686
  description: "Architecture decision records",
@@ -2453,7 +693,7 @@ Use AARRR categories (acquisition, activation, retention, revenue, referral) for
2453
693
  - Consequences: What are the implications?
2454
694
 
2455
695
  Good ADRs help future team members understand why things are built this way.`,
2456
- blockTypes: ["decision"],
696
+ blockTypes: ["decision", "section_guide"],
2457
697
  },
2458
698
  "development": {
2459
699
  description: "Epics, stories, tasks, and roadmaps",
@@ -2470,7 +710,7 @@ Organize files in subfolders:
2470
710
  - \`stories/\` - User story files
2471
711
  - \`tasks/\` - Task/implementation plan files
2472
712
  - \`roadmaps/\` - Roadmap files`,
2473
- blockTypes: ["epic", "user_story", "task", "roadmap", "release", "impact_effort_matrix"],
713
+ blockTypes: ["epic", "user_story", "task", "roadmap", "release", "impact_effort_matrix", "section_guide"],
2474
714
  },
2475
715
  "marketing": {
2476
716
  description: "Marketing campaigns, ads, and content strategy",
@@ -2491,7 +731,28 @@ Organize files in subfolders:
2491
731
  - \`seo/\` - SEO content strategy files
2492
732
 
2493
733
  Always link campaigns to target personas and success metrics.`,
2494
- blockTypes: ["marketing_campaign", "seo_content"],
734
+ blockTypes: ["marketing_campaign", "seo_content", "section_guide"],
735
+ },
736
+ "reports": {
737
+ description: "Business cases, pain point analysis, and user sentiment reports",
738
+ guidance: `Use this section to create synthesis documents that analyze project context:
739
+ - **Business Case**: One-page business case with executive summary, market opportunity, value proposition, and recommendations
740
+ - Link to personas, features, and competitors for traceability
741
+ - Include confidence level based on data quality
742
+ - **Pain Points Report**: Analysis of bottlenecks across product, tech, and UX
743
+ - Categorize by domain (product, technical, UX, process)
744
+ - Include severity assessment and recommendations
745
+ - **User Sentiment Report**: User experience analysis with quotes and emotional journey
746
+ - Include positive/negative themes with supporting quotes
747
+ - Track satisfaction drivers and churn risks
748
+
749
+ Organize files in subfolders:
750
+ - \`business-cases/\` - Business case documents
751
+ - \`pain-points/\` - Pain points analysis reports
752
+ - \`sentiment/\` - User sentiment analysis reports
753
+
754
+ Reports should always reference source blocks (personas, journeys, research) for traceability.`,
755
+ blockTypes: ["business_case", "pain_points_report", "user_sentiment_report", "section_guide"],
2495
756
  },
2496
757
  };
2497
758
  for (const section of defaultSections) {