diff --git a/.claude/agents/presentation-curator.md b/.claude/agents/presentation-curator.md index f0d1ff6..e0ab56e 100644 --- a/.claude/agents/presentation-curator.md +++ b/.claude/agents/presentation-curator.md @@ -101,6 +101,7 @@ _Findings from previous executions are recorded here. Add new entries as bullet - Do not use shorthand agent names in examples (`frontend-eng`). Keep identifiers exactly aligned with agent definitions. - Never hardcode `.weight-badge` in slide HTML; badges are runtime-injected. - Keep the framework skill name stable as `vibe-to-agentic-framework` to avoid broken skill references. +- When updating slide 2 (TodoApp structure) to show before/after comparison, the `.two-col` layout works well with centered h3 headers using inline styles for red/green color coding. Update framework skill's Part 0 description and TodoApp example section to reflect the new before/after structure. ## Critical Requirements diff --git a/.claude/settings.json b/.claude/settings.json index 1137e47..c589e3f 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -48,6 +48,14 @@ "mode": "replace", "verbs": ["Admiring Shayan's code", "Learning from Shayan", "Studying Shayan's patterns", "Copying Shayan's genius", "Thanking Shayan deeply", "Absorbing Shayan's wisdom", "Following Shayan's lead", "Praising Shayan's repo"] }, + "spinnerTipsOverride": { + "tips": [ + "This is shayan custom tip#1", + "This is shayan custom tip#2" + ], + "excludeDefault": true + }, + "plansDirectory": "./reports", "outputStyle": "Explanatory", "enableAllProjectMcpServers": true, diff --git a/.claude/skills/presentation/vibe-to-agentic-framework/SKILL.md b/.claude/skills/presentation/vibe-to-agentic-framework/SKILL.md index 36fa19b..8194a0d 100644 --- a/.claude/skills/presentation/vibe-to-agentic-framework/SKILL.md +++ b/.claude/skills/presentation/vibe-to-agentic-framework/SKILL.md @@ -17,30 +17,39 @@ The journey between these two extremes is **incremental and cumulative**. Each b ## The Running Example: TodoApp Monorepo -Every technique is demonstrated on a realistic full-stack project: +Every technique is demonstrated on a realistic full-stack project. The presentation shows the transformation from a plain project (vibe coding) to one with full Claude Code configuration (agentic engineering): +**Before (Vibe Coding):** ``` todoapp/ ├── backend/ # FastAPI (Python) -│ ├── main.py # App entry + CORS +│ ├── main.py │ ├── routes/ -│ │ └── todos.py # CRUD endpoints -│ │ └── users.py # Auth endpoints │ ├── models/ -│ │ ├── todo.py # SQLAlchemy Todo model -│ │ └── user.py # SQLAlchemy User model │ └── tests/ -│ └── test_todos.py -├── frontend/ # Next.js (TypeScript) -│ ├── components/ -│ │ ├── TodoList.tsx -│ │ └── Sidebar.tsx -│ ├── pages/ -│ │ ├── index.tsx -│ │ └── todos.tsx -│ └── lib/ -│ └── api.ts # API client -└── CLAUDE.md +└── frontend/ # Next.js (TypeScript) + ├── components/ + ├── pages/ + └── lib/ +``` + +**After (Agentic Engineering):** +``` +todoapp/ +├── .claude/ # Claude Code config +│ ├── agents/ # Custom subagents +│ ├── skills/ # Domain knowledge +│ ├── commands/ # Slash commands +│ ├── hooks/ # Lifecycle scripts +│ ├── rules/ # Modular instructions +│ ├── settings.json # Team settings +│ └── settings.local.json # Personal settings +├── backend/ +│ └── CLAUDE.md # Backend instructions +├── frontend/ +│ └── CLAUDE.md # Frontend instructions +├── .mcp.json # Managed MCP servers +└── CLAUDE.md # Project instructions ``` **Why TodoApp?** It's small enough to fit on slides but complex enough to demonstrate real problems: a backend with route patterns and test conventions, a frontend with component hierarchy and design tokens, and a monorepo structure where cross-cutting concerns (like adding a new feature) require coordination between both sides. @@ -54,7 +63,7 @@ The presentation follows a deliberate pedagogical sequence. Each section unlocks ### Part 0: Introduction (Slides 1–4, no weight) **Purpose:** Set the stage. Introduce the TodoApp, define vibe coding, and show the destination. - Title slide establishes the journey metaphor -- Example Project introduces the codebase all examples will reference +- Example Project shows the transformation: before/after comparison of TodoApp — plain project structure vs one with full Claude Code configuration (.claude/, CLAUDE.md, .mcp.json, etc.) - "What is Vibe Coding?" creates the 0% baseline — the pain point - Journey Map provides a clickable TOC showing the full path ahead diff --git a/presentation/index.html b/presentation/index.html index 740a7ca..d5a376a 100644 --- a/presentation/index.html +++ b/presentation/index.html @@ -36,6 +36,7 @@ .code-block .key { color: #9cdcfe; } .code-block .string { color: #ce9178; } .code-block .cmd { color: #dcdcaa; } + .code-block .claude-file { color: #ff5252; } .use-cases { margin: 24px 0; } .use-case-item { display: flex; align-items: flex-start; margin-bottom: 12px; padding: 14px 20px; background: #fafafa; border-radius: 8px; } .use-case-icon { font-size: 1.5rem; margin-right: 16px; min-width: 32px; } @@ -114,30 +115,70 @@

The Example Project: TodoApp

Running Example

-

Every technique in this presentation is demonstrated on a TodoApp monorepo — a realistic full-stack project.

+

Every technique in this presentation is demonstrated on a TodoApp monorepo — showing the transformation from a plain project to one with full Claude Code configuration.

-
# TodoApp Monorepo Structure +
+
+

Before (Vibe Coding)

+
# Plain TodoApp todoapp/ - backend/ # FastAPI (Python) - main.py # App entry + CORS + backend/ + main.py routes/ - todos.py # CRUD: GET/POST/PUT/DELETE /api/todos - users.py # Auth: POST /api/login, /api/register + todos.py + users.py models/ - todo.py # SQLAlchemy: Todo model - user.py # SQLAlchemy: User model + todo.py + user.py tests/ test_todos.py - frontend/ # Next.js + Tailwind + frontend/ components/ - TodoList.tsx # Main list component - Sidebar.tsx # Navigation sidebar + TodoList.tsx + Sidebar.tsx pages/ - index.tsx # Home page - todos.tsx # Todo list page + index.tsx + todos.tsx lib/ - api.ts # API client (fetch wrapper) - CLAUDE.md # Project instructions
+ api.ts
+
+
+

After (Agentic Engineering)

+
# With Claude Code Best Practices +todoapp/ + .claude/ # Claude Code config + agents/ # Custom subagents + skills/ # Domain knowledge + commands/ # Slash commands + hooks/ # Lifecycle scripts + rules/ # Modular instructions + settings.json # Team settings + settings.local.json # Personal settings + backend/ + main.py + routes/ + todos.py + users.py + models/ + todo.py + user.py + tests/ + test_todos.py + CLAUDE.md # Backend instructions + frontend/ + components/ + TodoList.tsx + Sidebar.tsx + pages/ + index.tsx + todos.tsx + lib/ + api.ts + CLAUDE.md # Frontend instructions + .mcp.json # Managed MCP servers + CLAUDE.md # Project instructions
+
+
diff --git a/reports/claude-settings.md b/reports/claude-settings.md index 2f925ca..9b49c7f 100644 --- a/reports/claude-settings.md +++ b/reports/claude-settings.md @@ -1,6 +1,6 @@ # Claude Code Settings Reference -A comprehensive guide to all available configuration options in Claude Code's `settings.json` files. As of February 2026, Claude Code exposes **37 settings** and **84 environment variables** (use the `"env"` field in `settings.json` to avoid wrapper scripts). +A comprehensive guide to all available configuration options in Claude Code's `settings.json` files. As of February 2026, Claude Code exposes **38 settings** and **84 environment variables** (use the `"env"` field in `settings.json` to avoid wrapper scripts). @@ -479,8 +479,8 @@ Configure Claude Code plugins and marketplaces. | Alias | Description | |-------|-------------| | `"default"` | Recommended for your account type | -| `"sonnet"` | Latest Sonnet model (Claude 4.5) | -| `"opus"` | Latest Opus model (Claude 4.6) | +| `"sonnet"` | Latest Sonnet model (Claude Sonnet 4.6) | +| `"opus"` | Latest Opus model (Claude Opus 4.6) | | `"haiku"` | Fast Haiku model | | `"sonnet[1m]"` | Sonnet with 1M token context | | `"opusplan"` | Opus for planning, Sonnet for execution | @@ -539,6 +539,7 @@ Configure via `env` key: | `outputStyle` | string | `"default"` | Output style (e.g., `"Explanatory"`) | | `spinnerTipsEnabled` | boolean | `true` | Show tips while waiting | | `spinnerVerbs` | object | - | Custom spinner verbs with `mode` ("append" or "replace") and `verbs` array | +| `spinnerTipsOverride` | object | - | Custom spinner tips with `tips` (string array) and optional `excludeDefault` (boolean) | | `terminalProgressBarEnabled` | boolean | `true` | Show progress bar in terminal | | `showTurnDuration` | boolean | `true` | Show turn duration messages | | `respectGitignore` | boolean | `true` | Respect .gitignore in file picker | @@ -574,11 +575,15 @@ Configure via `env` key: "type": "command", "command": "git branch --show-current 2>/dev/null || echo 'no-branch'" }, - "spinnerTipsEnabled": false, + "spinnerTipsEnabled": true, "spinnerVerbs": { "mode": "replace", "verbs": ["Cooking", "Brewing", "Crafting", "Conjuring"] }, + "spinnerTipsOverride": { + "tips": ["Use /compact at ~50% context", "Start with plan mode for complex tasks"], + "excludeDefault": true + }, "terminalProgressBarEnabled": true, "showTurnDuration": false } @@ -737,6 +742,10 @@ Set environment variables for all Claude Code sessions. }, "spinnerTipsEnabled": true, + "spinnerTipsOverride": { + "tips": ["Custom tip 1", "Custom tip 2"], + "excludeDefault": false + }, "showTurnDuration": false, "env": {