- {/* Outline */}
+ {/* Outline: week 1 lessons */}
- Outline
+ Week 1 — {path.weeks[0]!.title}
- {OUTLINE.map((t, i) => (
+ {path.weeks[0]!.lessons.map((l, i) => (
setSection(i)}
+ key={l.id}
style={{
display: 'flex',
gap: 10,
padding: '8px 8px',
borderRadius: 6,
marginBottom: 2,
- background: section === i ? 'var(--paper-3)' : 'transparent',
+ background: i === 0 ? 'var(--paper-3)' : 'transparent',
cursor: 'pointer',
fontSize: 12.5,
- fontWeight: section === i ? 500 : 400,
+ fontWeight: i === 0 ? 500 : 400,
color: 'var(--ink)',
}}
>
@@ -96,16 +92,17 @@ export function LessonPreview({
fontFamily: 'var(--mono)',
fontSize: 11,
width: 16,
+ flexShrink: 0,
}}
>
{i + 1}
- {t}
+ {l.title}
))}
- Section 02 · Anatomy
+ Day {firstLesson.day} · {firstLesson.kind} · {firstLesson.minutes}m
- A great system prompt has{' '}
- three things.
+ {firstLesson.title}
- Most people open ChatGPT and start asking. The pros write a{' '}
- persona , define a{' '}
- process , and set{' '}
- boundaries . That's it. Three
- knobs.
+ {firstPara}
+ {secondPara && (
+
+ {secondPara}
+
+ )}
-
# persona
-
- You are a
skeptical senior PM
+
+ Exercise 1
-
# process
-
For each user input, you:
-
1. Ask one clarifying question
-
2. List 3 alternatives
-
3. Pick one with rationale
-
# boundaries
-
Never invent metrics. If unsure, say so.
+
+ {firstExercise.prompt}
+
-
- Try it now in the workbench on the right →
-
- {/* AI Guide chat */}
+ {/* AI Guide */}
- I noticed you picked{' '}
- {primaryTool} as your main tool —
- I swapped the example to fit. Spot the missing knob:
+ This is your first lesson as a{' '}
+ {role} . Your primary tool is{' '}
+ {firstLesson.tool} . The exercise
+ below is a real task — not a tutorial. Do it before reading ahead.
- {exampleForTool()}
-
-
- {['Persona', 'Process', 'Boundaries'].map((o, i) => (
-
-
- {String.fromCharCode(65 + i)}
-
- {o}
-
- ))}
+ Reviewer note: {' '}
+ {firstExercise.rubricHint}
- Continue to section 03
diff --git a/packages/core/src/__tests__/generate.test.ts b/packages/core/src/__tests__/generate.test.ts
index c9aef2f..549b15e 100644
--- a/packages/core/src/__tests__/generate.test.ts
+++ b/packages/core/src/__tests__/generate.test.ts
@@ -71,6 +71,31 @@ describe('generateLearningPath', () => {
}
});
+ it('first lesson has no prerequisites', () => {
+ const path = generateLearningPath(SAMPLE);
+ expect(path.weeks[0]!.lessons[0]!.prerequisiteIds).toHaveLength(0);
+ });
+
+ it('subsequent lessons have exactly one prerequisite', () => {
+ const path = generateLearningPath(SAMPLE);
+ const allLessons = path.weeks.flatMap((w) => w.lessons);
+ for (let i = 1; i < allLessons.length; i++) {
+ expect(allLessons[i]!.prerequisiteIds).toHaveLength(1);
+ }
+ });
+
+ it('prerequisite ids reference real lesson ids', () => {
+ const path = generateLearningPath(SAMPLE);
+ const allIds = new Set(path.weeks.flatMap((w) => w.lessons.map((l) => l.id)));
+ for (const w of path.weeks) {
+ for (const l of w.lessons) {
+ for (const pid of l.prerequisiteIds) {
+ expect(allIds.has(pid)).toBe(true);
+ }
+ }
+ }
+ });
+
it.each([
'Marketer',
'Founder',
diff --git a/packages/core/src/generate.ts b/packages/core/src/generate.ts
index 140df77..9211489 100644
--- a/packages/core/src/generate.ts
+++ b/packages/core/src/generate.ts
@@ -1073,12 +1073,25 @@ export function generateLearningPath(rawInput: LearningPathInput): LearningPath
const parsedCtx = input.companyContext ? parseCompanyContext(input.companyContext) : null;
const ctxSuffix = parsedCtx ? buildContextSuffix(parsedCtx) : '';
- const weeks = (ROLE_WEEKS[role] ?? GENERIC_WEEKS).map((w, wi) => {
+ const weekDefs = ROLE_WEEKS[role] ?? GENERIC_WEEKS;
+
+ const weeks = weekDefs.map((w, wi) => {
const tool = wi % 2 === 0 ? primaryTool : secondaryTool;
const lessons: Lesson[] = w.templates.map((template, li) => {
const dayBase = wi * 7 + li * 2 + 1;
const minutesAdjusted = Math.max(8, template.minutes + LEVEL_BIAS[input.level]);
const baseSummary = template.summary({ tool, role, goal: input.goal });
+
+ let prerequisiteIds: string[] = [];
+ if (wi === 0 && li === 0) {
+ prerequisiteIds = [];
+ } else if (li === 0) {
+ const prevTemplates = weekDefs[wi - 1]!.templates;
+ prerequisiteIds = [hashId('l', stableSeed, wi - 1, prevTemplates.length - 1)];
+ } else {
+ prerequisiteIds = [hashId('l', stableSeed, wi, li - 1)];
+ }
+
return {
id: hashId('l', stableSeed, wi, li),
day: dayBase,
@@ -1087,6 +1100,7 @@ export function generateLearningPath(rawInput: LearningPathInput): LearningPath
tool,
minutes: minutesAdjusted,
kind: template.kind,
+ prerequisiteIds,
};
});
return { index: (wi + 1) as 1 | 2 | 3 | 4, title: w.title, lessons } satisfies Week;
diff --git a/packages/react/src/LearningPath.tsx b/packages/react/src/LearningPath.tsx
index a051bdb..050bf2a 100644
--- a/packages/react/src/LearningPath.tsx
+++ b/packages/react/src/LearningPath.tsx
@@ -1,15 +1,17 @@
'use client';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
import type { LearningPathInput, Lesson } from '@learnkit-ai/schemas';
import { LessonCard } from './LessonCard';
+import type { LessonStatus } from './LessonCard';
import { useLearnKit } from './useLearnKit';
-export type LearnKitTheme = 'warm' | 'midnight' | 'technical';
+export type LearnKitTheme = 'warm' | 'midnight' | 'technical' | 'light';
export interface LearningPathProps {
input: LearningPathInput;
onLessonClick?: (lesson: Lesson) => void;
+ renderItem?: (lesson: Lesson, status: LessonStatus) => ReactNode;
theme?: LearnKitTheme;
className?: string;
style?: CSSProperties;
@@ -49,11 +51,23 @@ export const THEMES: Record