export default function ClaudeCodeGuidePage() { const highlights = [ { icon: "🧠", title: "Think in loops", text: "Claude Code is an agent loop: collect context, act, verify, repeat." }, { icon: "🧱", title: "Design six layers", text: "Context, tools, workflows, control, isolation, and verification must stay balanced." }, { icon: "✅", title: "Define done early", text: "If pass/fail is unclear, autonomy will drift. Write verification before coding." } ] const sections = [ { emoji: "1️⃣", title: "Core Mental Model", points: [ "Treat Claude Code as an engineering system, not a chatbot.", "Use this loop for every task: Context → Action → Verification.", "Most failures come from noisy context or missing checks, not model IQ.", "Keep work observable: commands, outputs, and rollback notes." ], actions: [ "Start each task with goal, scope, and constraints.", "Always end with executable verification commands." ] }, { emoji: "2️⃣", title: "Use the Right Building Block", points: [ "Tool / MCP: add a new action capability.", "Skill: add a reusable workflow with steps and stop conditions.", "Hook: enforce deterministic guardrails and audits.", "Subagent: isolate heavy exploration or parallel research." ], actions: [ "Do not solve workflow problems by adding more tools.", "Do not use hooks for complex reasoning tasks." ] }, { emoji: "3️⃣", title: "Context Engineering First", points: [ "Your context budget is not fully free; fixed overhead is real.", "Keep always-on instructions short, hard, and executable.", "Move low-frequency or heavy knowledge into on-demand skills.", "Use handoff files between sessions to avoid compression loss." ], actions: [ "Keep project contract small: build, test, boundaries, NEVER list.", "Track what must survive compression: architecture, changed files, verification status." ] }, { emoji: "4️⃣", title: "Skill Design That Actually Works", points: [ "Write skill descriptions as trigger conditions, not marketing text.", "Put long references into supporting files, not SKILL.md body.", "For side-effect workflows, require explicit invocation.", "Use clear output format and stop conditions." ], actions: [ "Create three types: checklist, workflow, domain diagnosis.", "Split one giant skill into focused single-purpose skills." ] }, { emoji: "5️⃣", title: "Hooks and Verification Closure", points: [ "Run lightweight checks after edits by file type.", "Fail fast with short output to reduce noise.", "Enforce critical rails: protected files, lint/test gates, notifications.", "Verification stack: exit codes → tests → integration checks → manual review." ], actions: [ "Document verification in your contract and skills.", "Treat 'Claude says done' as unverified until checks pass." ] }, { emoji: "6️⃣", title: "Subagents, Caching, and Cost", points: [ "Use subagents for isolation first, parallelism second.", "Constrain subagent tools and turn count to avoid drift.", "Prompt caching depends on stable static prefix content.", "Avoid random tool definition changes during a long session." ], actions: [ "Keep static system/tool content stable; send dynamic info in user turns.", "For model changes, hand off via a clean task message when needed." ] }, { emoji: "🛠️", title: "High-Value Daily Commands", points: [ "/context: inspect token shape and noise sources.", "/clear: restart when correction loops repeat.", "/compact: keep momentum while preserving key state.", "/mcp, /hooks, /permissions, /sandbox: govern control plane.", "/insight: extract recurring rules into your contract." ], actions: [ "Use commands proactively, not after quality collapse.", "Prefer small, frequent resets over long noisy sessions." ] }, { emoji: "🚀", title: "30-Minute Setup Blueprint", points: [ "Write a small project contract with build/test/run and hard constraints.", "Add path-level rules for language or directory differences.", "Create 2-3 practical skills: release-check, migration, diagnosis.", "Add 1-2 hooks for fast compile/lint checks.", "Define definition-of-done per change type (backend, API, UI)." ], actions: [ "Run one real task and record misses.", "Update contract and skills from real failures, then repeat." ] } ] const quickChecklist = [ "Project contract is short and executable.", "Rules are path-scoped, not dumped globally.", "Skills are on-demand and single-purpose.", "Hooks are deterministic and fast.", "Subagents are constrained and isolated.", "Verification commands are explicit and runnable." ] return (

Claude Code · Practical Engineering Guide

Build Stable Claude Code Workflows

A concise playbook from real usage: control context, design workflows, enforce verification, and keep autonomy reliable under constraints.

{highlights.map((item) => (

{item.icon}

{item.title}

{item.text}

))}

{sections.map((section) => (

{section.emoji} {section.title}

• {point}

Do this now

→ {action}

))}

Quick Health Checklist

{quickChecklist.map((item) => (

✅ {item}

))}

) }