updated new settings
This commit is contained in:
Shayan Rais
@@ -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
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
+56
-15
@@ -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 @@
|
||||
<h1>The Example Project: TodoApp</h1>
|
||||
<div class="trigger-box">
|
||||
<h4>Running Example</h4>
|
||||
<p>Every technique in this presentation is demonstrated on a <strong>TodoApp monorepo</strong> — a realistic full-stack project.</p>
|
||||
<p>Every technique in this presentation is demonstrated on a <strong>TodoApp monorepo</strong> — showing the transformation from a plain project to one with full Claude Code configuration.</p>
|
||||
</div>
|
||||
<div class="code-block"><span class="comment"># TodoApp Monorepo Structure</span>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<h3 style="text-align: center; color: #c62828; margin-bottom: 16px;">Before (Vibe Coding)</h3>
|
||||
<div class="code-block"><span class="comment"># Plain TodoApp</span>
|
||||
todoapp/
|
||||
<span class="key">backend/</span> <span class="comment"># FastAPI (Python)</span>
|
||||
main.py <span class="comment"># App entry + CORS</span>
|
||||
<span class="key">backend/</span>
|
||||
main.py
|
||||
routes/
|
||||
todos.py <span class="comment"># CRUD: GET/POST/PUT/DELETE /api/todos</span>
|
||||
users.py <span class="comment"># Auth: POST /api/login, /api/register</span>
|
||||
todos.py
|
||||
users.py
|
||||
models/
|
||||
todo.py <span class="comment"># SQLAlchemy: Todo model</span>
|
||||
user.py <span class="comment"># SQLAlchemy: User model</span>
|
||||
todo.py
|
||||
user.py
|
||||
tests/
|
||||
test_todos.py
|
||||
<span class="key">frontend/</span> <span class="comment"># Next.js + Tailwind</span>
|
||||
<span class="key">frontend/</span>
|
||||
components/
|
||||
TodoList.tsx <span class="comment"># Main list component</span>
|
||||
Sidebar.tsx <span class="comment"># Navigation sidebar</span>
|
||||
TodoList.tsx
|
||||
Sidebar.tsx
|
||||
pages/
|
||||
index.tsx <span class="comment"># Home page</span>
|
||||
todos.tsx <span class="comment"># Todo list page</span>
|
||||
index.tsx
|
||||
todos.tsx
|
||||
lib/
|
||||
api.ts <span class="comment"># API client (fetch wrapper)</span>
|
||||
CLAUDE.md <span class="comment"># Project instructions</span></div>
|
||||
api.ts</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="text-align: center; color: #2e7d32; margin-bottom: 16px;">After (Agentic Engineering)</h3>
|
||||
<div class="code-block"><span class="comment"># With Claude Code Best Practices</span>
|
||||
todoapp/
|
||||
<span class="claude-file">.claude/</span> <span class="claude-file comment"># Claude Code config</span>
|
||||
<span class="claude-file">agents/</span> <span class="claude-file comment"># Custom subagents</span>
|
||||
<span class="claude-file">skills/</span> <span class="claude-file comment"># Domain knowledge</span>
|
||||
<span class="claude-file">commands/</span> <span class="claude-file comment"># Slash commands</span>
|
||||
<span class="claude-file">hooks/</span> <span class="claude-file comment"># Lifecycle scripts</span>
|
||||
<span class="claude-file">rules/</span> <span class="claude-file comment"># Modular instructions</span>
|
||||
<span class="claude-file">settings.json</span> <span class="claude-file comment"># Team settings</span>
|
||||
<span class="claude-file">settings.local.json</span> <span class="claude-file comment"># Personal settings</span>
|
||||
<span class="key">backend/</span>
|
||||
main.py
|
||||
routes/
|
||||
todos.py
|
||||
users.py
|
||||
models/
|
||||
todo.py
|
||||
user.py
|
||||
tests/
|
||||
test_todos.py
|
||||
<span class="claude-file">CLAUDE.md</span> <span class="claude-file comment"># Backend instructions</span>
|
||||
<span class="key">frontend/</span>
|
||||
components/
|
||||
TodoList.tsx
|
||||
Sidebar.tsx
|
||||
pages/
|
||||
index.tsx
|
||||
todos.tsx
|
||||
lib/
|
||||
api.ts
|
||||
<span class="claude-file">CLAUDE.md</span> <span class="claude-file comment"># Frontend instructions</span>
|
||||
<span class="claude-file">.mcp.json</span> <span class="claude-file comment"># Managed MCP servers</span>
|
||||
<span class="claude-file">CLAUDE.md</span> <span class="claude-file comment"># Project instructions</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: What is Vibe Coding? -->
|
||||
|
||||
@@ -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).
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user