initial commit

project_51_claude_code/1_40001_introduction_to_semi_deterministic_workflows.html

@@ -0,0 +1,91 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40001,
+  "title": "Introduction to Semi-Deterministic Workflows",
+  "next_button_title": "Let's get started!"
+}
+-->
+
+<h5>What You Will Build</h5>
+<p>In this course, you will create a simple task manager application using Claude Code and a semi-deterministic workflow approach. This workflow combines the predictability of automated processes with the intelligence of AI-driven decision making.</p>
+
+<p>The task manager will feature:</p>
+<ul>
+<li>Add, edit, and delete tasks</li>
+<li>Mark tasks as complete</li>
+<li>Filter tasks by status</li>
+<li>Clean, modern interface</li>
+</ul>
+
+<p>But more importantly, you'll learn how to set up workflows where Claude Code handles architectural decisions while maintaining consistent coding standards.</p>
+
+<h5>Understanding Semi-Deterministic Workflows</h5>
+<p>Semi-deterministic workflows represent a powerful approach to software development that combines the best of both worlds:</p>
+
+<p><strong>Deterministic part:</strong> Pre-configured rules and automatic actions such as code formatting, testing, commits, and consistent project structure. These elements remain predictable and standardized.</p>
+
+<p><strong>Semi-deterministic part:</strong> Claude makes intelligent decisions about code structure, architecture, feature implementation, and improvements based on the current context and project needs.</p>
+
+<p>This approach allows you to maintain coding standards while leveraging AI's creativity and problem-solving capabilities for complex development decisions.</p>
+
+<h5>Installing Claude Code</h5>
+<p>Before we begin building our task manager, we need to install Claude Code CLI. Claude Code is a powerful command-line tool that brings Claude's capabilities directly into your development environment.</p>
+
+<h5>System Requirements</h5>
+<p>Make sure your system meets these requirements:</p>
+<ul>
+<li><strong>Operating Systems:</strong> macOS 10.15+, Ubuntu 20.04+/Debian 10+, or Windows 10+ (with WSL 1, WSL 2, or Git for Windows)</li>
+<li><strong>Hardware:</strong> 4GB+ RAM</li>
+<li><strong>Software:</strong> Node.js 18+</li>
+<li><strong>Network:</strong> Internet connection required for authentication and AI processing</li>
+<li><strong>Shell:</strong> Works best in Bash, Zsh or Fish</li>
+</ul>
+
+<h5>Installation Steps</h5>
+<p>Let's install Claude Code using npm. The installation is straightforward but there are important considerations for different operating systems.</p>
+
+<callout>Install Claude Code globally using npm. Run this command in your terminal:
+
+npm install -g @anthropic-ai/claude-code
+
+Important: Do NOT use `sudo npm install -g` as this can lead to permission issues and security risks.</callout>
+
+<h5>Verify Your Installation</h5>
+<p>After installation, let's verify that everything is working correctly.</p>
+
+<callout type="chat">Run this command to check your Claude Code installation:
+
+  claude doctor
+</callout>
+
+<h5>Authentication</h5>
+<p>Claude Code offers several authentication options. For this tutorial, we'll use the most common approach:</p>
+
+<callout type="chat">Navigate to your project directory and start Claude Code:
+
+cd your-project-directory
+claude
+</callout>
+
+<p>You'll be prompted to authenticate. Choose one of these options:</p>
+<ol>
+<li>Anthropic Console (requires active billing at console.anthropic.com)</li>
+<li>Claude App with Pro or Max plan</li>
+<li>Enterprise platforms (Bedrock or Vertex AI)</li>
+</ol>
+
+<ul interactive>
+  <li title="Claude Code is installed">
+  </li>
+  <li title="Claude Code authentication is successful">
+  </li>
+</ul>
+
+<img style="margin: auto; display: block; width: 800px;" src="https://ucarecdn.com/974f9e4a-5542-47db-b3af-ded1cc09b9a6/" alt="Claude Code" title="Claude Code">
+
+<h5>What's Next</h5>
+<p>Now that you have Claude Code installed and authenticated, you're ready to start building our task manager application using semi-deterministic workflows. In the next stage, we'll set up our project structure and create the foundation for our intelligent development workflow.</p>
+
+<p>This approach will demonstrate how Claude Code can make smart architectural decisions while maintaining the consistency and reliability you need in professional development.</p> 
+
+<alert>If any of these checks fail, don't proceed to the next stage. Revisit the installation and authentication steps, or consult the Claude Code documentation for troubleshooting.</alert>

project_51_claude_code/2_40002_creating_your_first_app_with_claude_code.html

@@ -0,0 +1,91 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40002,
+  "title": "Creating Your First App with Claude Code",
+  "next_button_title": "Ready to code!"
+}
+-->
+
+<h5>Time to Get Hands-On</h5>
+<p>Now that Claude Code is installed and authenticated, it's time to experience its power firsthand. In this stage, we'll create a basic task manager application structure and see how Claude Code can intelligently generate code, suggest architecture, and set up development environments.</p>
+
+<p>This hands-on practice will demonstrate the Claude Code in action - we'll provide the requirements, and Claude Code will make smart decisions about implementation details.</p>
+
+<h5>Setting Up Your Project</h5>
+<p>Let's start by creating a dedicated workspace for our task manager application. We'll set up the basic project structure manually first, then let Claude Code enhance it with intelligent suggestions.</p>
+
+<h5>Step 1: Create Project Structure</h5>
+
+<p>Let's set up the basic project structure with npm and create our initial files:</p>
+
+<callout>
+npm init -y
+mkdir src
+cd src
+touch index.html app.js style.css
+cd ..</callout>
+
+<p>This creates a basic structure with a `package.json` file and our main source files in the `src` directory.</p>
+
+<h5>Step 2: Generate Your Application Structure</h5>
+<p>Now comes the exciting part - let's start Claude Code and see how it can help us build our application:</p>
+
+<p>Here's where the magic happens. We'll give Claude Code a clear prompt about what we want to build, and it will make intelligent decisions about the implementation:</p>
+
+<callout label="Copy and paste to Claude Code">
+I'm creating a simple Task Manager web application. Help me set up the basic project structure with HTML, CSS and JavaScript. Create a package.json file with necessary development scripts, including live-server for local hosting.
+
+The task manager should include:
+- Add new tasks
+- Mark tasks as complete/incomplete
+- Delete tasks
+- Filter tasks by status (all, active, completed)
+- Clean, modern interface
+
+Please set up the complete file structure and provide the initial code for all files.
+
+Run the app after generating all the files
+</callout>
+
+<h5>What to Expect</h5>
+<p>After running this prompt, Claude Code will demonstrate several key capabilities of semi-deterministic workflows:</p>
+
+<ul>
+<li><strong>Intelligent Architecture Decisions:</strong> Claude will suggest an appropriate file structure and code organization</li>
+<li><strong>Development Environment Setup:</strong> It will configure package.json with useful scripts for development</li>
+<li><strong>Modern Web Practices:</strong> The generated code will follow current best practices for HTML, CSS, and JavaScript</li>
+<li><strong>Complete Implementation:</strong> You'll get working code that you can immediately test and run</li>
+</ul>
+
+<h5>Verification Steps</h5>
+<p>Once Claude Code finishes generating your application, let's verify everything is working correctly:</p>
+
+<callout>
+Check the project structure. Verify that there are:
+
+- Updated package.json with development scripts
+- HTML file with proper structure
+- CSS file with modern styling
+- JavaScript file with task management functionality</callout>
+
+<p>Now let's run and test the application.</p>
+
+<callout>Install dependencies and test your application:
+
+npm install
+npm start
+</callout>
+
+<img style="margin: auto; display: block; width: 800px;" src="https://ucarecdn.com/650f2dc0-06fd-41e6-8ec9-202e848e57be/" alt="Task Manager Application" title="Task Manager Application">
+
+<p>By the end of this stage, you should have:</p>
+
+<ul interactive>
+  <li title="A complete project structure with all necessary files"></li>
+  <li title="A working task manager application that runs in your browser"></li>
+</ul>
+
+<alert>If your application isn't working as expected, don't worry! In the next stage, we'll explore how to iterate and improve the application using Claude Code's debugging and enhancement capabilities.</alert>
+
+<h5>What's Next</h5>
+<p>Congratulations! You've successfully used Claude Code to generate a complete web application. In the next stage, we'll dive deeper into the semi-deterministic workflow by customizing and enhancing the application, demonstrating how Claude Code can adapt to changing requirements while maintaining code quality.</p> 

project_51_claude_code/3_40003_setting_up_deterministic_hooks.html

@@ -0,0 +1,139 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40003,
+  "title": "Setting Up Deterministic Hooks",
+  "next_button_title": "Let's automate!"
+}
+-->
+
+<h5>Automating with Deterministic Hooks</h5>
+<p>In the previous stage, you saw how Claude Code can make intelligent decisions to generate a complete application. Now, we'll focus on the deterministic part of our workflow by setting up hooks. Hooks are automated actions that run at specific points in the development process, ensuring consistency and quality without manual intervention.</p>
+
+<h5>Understanding Hooks</h5>
+<p>Hooks in Claude Code are the deterministic core of your workflow. They automatically perform specific actions at key moments:</p>
+<ul>
+    <li><strong>PreToolUse:</strong> Executes before each file change is applied. Useful for validation or backups.</li>
+    <li><strong>PostToolUse:</strong> Executes after each file change is applied. Perfect for formatting, linting, or running tests.</li>
+    <li><strong>Stop:</strong> Executes when Claude completes a task. Ideal for final actions like committing changes or sending notifications.</li>
+</ul>
+<p>By automating these routine tasks, you can focus on the creative aspects of development while maintaining a high standard of code quality.</p>
+
+<h5>Step 1: Create Hooks Configuration File</h5>
+<p>First, we need to create a directory and a file to store our hook configurations. Claude Code looks for these configurations in a <code>.claude</code> directory in your project root.</p>
+
+<callout>Create the necessary directory and file for your hooks:
+
+mkdir .claude
+touch .claude/settings.json
+</callout>
+
+<h5>Step 2: Configure Your Hooks</h5>
+<p>Now, let's instruct Claude to populate our <code>hooks.json</code> file. We will configure hooks for automatic logging of all the bash commands used by Claude Code agent.</p>
+
+<callout>
+Create a .claude/logger.py file with the follwowing content:
+
+#!/usr/bin/env python3
+"""
+Command logging hook.
+Logs all Bash commands with timestamps and descriptions.
+"""
+import json
+import sys
+from datetime import datetime
+from pathlib import Path
+
+
+def main():
+    try:
+        # Read input
+        input_data = json.load(sys.stdin)
+        tool_name = input_data.get('tool_name', '')
+
+        # Log all tool actions (not just Bash)
+        if not tool_name:
+            sys.exit(0)
+
+        # Extract tool info
+        tool_input = input_data.get('tool_input', {})
+        session_id = input_data.get('session_id', 'unknown')
+
+        # Format log entry based on tool type
+        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+
+        if tool_name == 'Bash':
+            command = tool_input.get('command', '')
+            description = tool_input.get('description', 'No description')
+            log_entry = f"[{timestamp}] [{session_id[:8]}] BASH: {command} - {description}\n"
+        else:
+            # For other tools, log the tool name and key parameters
+            key_info = str(tool_input)[:100] + '...' if len(str(tool_input)) > 100 else str(tool_input)
+            log_entry = f"[{timestamp}] [{session_id[:8]}] {tool_name.upper()}: {key_info}\n"
+
+        # Append to log file
+        log_file = Path.cwd() / 'claude-logs.txt'
+        try:
+            with open(log_file, 'a') as f:
+                f.write(log_entry)
+        except Exception as e:
+            print(f"Warning: Could not write to command log: {e}", file=sys.stderr)
+
+
+    except json.JSONDecodeError:
+        print("Error: Invalid JSON input", file=sys.stderr)
+        sys.exit(1)
+    except Exception as e:
+        # Don't fail the command due to logging errors
+        print(f"Warning: Command logging error: {e}", file=sys.stderr)
+        sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()
+
+</callout>
+
+<p>We have created a simple logger script, but in fact you can create more complex hooks in the language you like.</p>
+
+<p>How we have to configure the conditions under which the script will be executed. Let's ask an assistant to create a configuration file:</p>
+
+<callout>
+ Create a .claude/settings.json file with the following content:
+
+ {
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "python .claude/logger.py"
+          }
+        ]
+      }
+    ]
+  }
+}
+</callout>
+
+<p>In this configuration, we set up a <code>PostToolUse</code> hook that triggers our logging script after every use of the <code>Bash</code> tool. This way, every command executed by Claude will be logged with a timestamp and description.</p>
+
+<p>Now in the terminal, ask Claude Code to do some analysis of your project filesystem:</p>
+
+<callout label="Copy and paste to Claude Code">How much space does my current project occupy?</callout>
+
+<p>After Claude completes the task, check the <code>claude-logs.txt</code> file in your project root. You should see a log entry for the bash command that was executed.</p>
+
+<p>By the end of this stage, you will have a more robust and automated workflow:</p>
+
+<ul interactive>
+  <li title="A .claude/settings.json file with configuration for logging hook is created."></li>
+  <li title="Claude Code authomatically logs the bash commands"></li>
+</ul>
+
+<p>Feel free to test your custom hooks. For more information about how the Claude Hooks can be configured, refer to <a href="https://docs.anthropic.com/en/docs/claude-code/hooks">official documentation</a></p>
+
+<warning>If you notice that the hook does not work as expected, calling <code>/hooks</code> and then selecting <code>Disable all hooks</code>, and then re-enable it by calling <code>/hooks</code> again.</warning>
+
+<p>With deterministic hooks in place, your workflow is now smarter and more efficient. In the next stage, we'll explore the other side of the coin: creating semi-deterministic custom commands that empower Claude to make intelligent decisions within a structured framework.</p>

project_51_claude_code/4_40004_creating_semi_deterministic_commands.html

@@ -0,0 +1,60 @@
+<!-- Enlighter Metainfo
+{
+  "id": 40004,
+  "title": "Creating Semi-deterministic Commands",
+  "next_button_title": "Let's create commands!"
+}
+-->
+
+<h5>Creating Semi-deterministic Commands</h5>
+<p>You've successfully set up the deterministic part of your workflow with hooks. Now, it's time to build the semi-deterministic part using custom commands. Custom slash commands allow you to give Claude specific instructions and context, empowering it to make intelligent decisions within a well-defined framework.</p>
+
+<h5>Understanding Custom Commands</h5>
+<p>Custom commands are markdown files that act as templates for prompts. They allow you to create reusable, context-aware instructions for Claude. This is the core of the semi-deterministic approach: you define the rules and the goals, and Claude uses its intelligence to figure out the best way to achieve them.</p>
+
+<h5>Step 1: Create a Commands Folder</h5>
+<p>First, we need a place to store our custom commands. Claude Code looks for a <code>commands</code> directory inside the <code>.claude</code> folder.</p>
+
+<callout>Create a directory for your custom commands:
+
+mkdir .claude/commands
+</callout>
+
+<h5>Step 2: Create Custom Slash Commands</h5>
+<p>Now, let's ask Claude to create three essential commands for our web development workflow: one for adding features, one for reviewing code, and one for debugging.</p>
+
+<callout label="Copy and paste to Claude Code">
+
+Create three custom slash commands in the `.claude/commands/` directory:
+
+1.  `/add-feature.md`: A command for adding new functionality. It should analyze the current code, suggest architectural solutions, and implement the feature, including tests.
+2.  `/review-code.md`: A command for analyzing code quality. It should check for readability, performance, and security, then suggest improvements.
+3.  `/debug-issue.md`: A command for finding and fixing bugs. It should analyze the code, help reproduce the problem, and suggest a solution.
+
+Each command should be able to accept parameters through the `$ARGUMENTS` variable.
+</callout>
+
+<h5>Step 3: Create a Project Context File</h5>
+<p>To help Claude make better decisions, we should provide it with high-level context about our project. The <code>CLAUDE.md</code> file in the root of your project is the perfect place for this.</p>
+
+<callout label="Copy and paste to Claude Code">
+
+Create a `CLAUDE.md` file in my project root. This file should describe the architecture of our Task Manager application. Include:
+- A general description of the application's functionality.
+- The file structure and the purpose of each file.
+- The coding standards for this project.
+- The principles that the AI should follow when working with the code.
+</callout>
+
+<alert>The CLAUDE.md file acts as a master prompt, providing Claude with a consistent set of guidelines for all its operations on your project.</alert>
+
+<h5>Expected Results</h5>
+<p>After completing this stage, your workflow will be significantly more powerful:</p>
+
+<ul interactive>
+  <li title="A .claude/commands/ directory with three custom commands"></li>
+  <li title="A CLAUDE.md file in the project root"></li>
+</ul>
+
+<h5>What's Next</h5>
+<p>You have now established a complete semi-deterministic workflow with both automated hooks and intelligent custom commands. In the next stage, we'll put this workflow into practice by developing new features for our Task Manager application.</p>