gilles/claude-code-best-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated new settings

Browse Source
This commit is contained in:
Shayan Rais
2026-02-18 10:32:30 +05:00
parent 89de0f7ab0
commit 2ac297cca4
5 changed files with 105 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/index.html
+56 -15
View File
@@ -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? -->