DOCSEARCHbyAlgolia
Submit Docs

HendraDev Tutorial Library

website·Indexed 30 days ago

https://hendradev.vercel.app

A collection of programming references and guides, featuring a complete Git tutorial covering the three-state model, branching, merging, and history rewriting, as well as introductions to HTML and CSS. The site also includes engineering guides for optimizing Claude workflows using CLAUDE.md and SKILL.md files.

Tokens
20.5K
Snippets
83
Records
147
Agent score
72%

What's inside HendraDev

  1. Understand the benefits of using Semantic HTML

    Semantic HTML involves choosing elements that convey the meaning of the content rather than just its appearance. This provides four primary advantages:

    1. Accessibility: Screen readers use semantic landmarks (like <nav>) to help users navigate sites efficiently.
    2. SEO: Search engines use elements like <main>, <article>, and <section> to understand content hierarchy and primary purpose.
    3. Code Readability: Semantic tags are self-documenting, making the structure clear without relying on class names.
    4. Browser Support: Elements like <button> have built-in keyboard navigation and ARIA roles that generic <div> elements lack.

  2. Implement reusable workflows using Skills

    A Skill is an on-demand expertise module consisting of a folder with a SKILL.md file (containing instructions and metadata) and optional scripts. Unlike CLAUDE.md (which is always loaded), Skills are loaded only when the task matches the skill's description.

  3. Compare Claude surfaces: Chat, Cowork, and Code

    Claude provides three primary interfaces, each with different memory and skill systems. Choosing the right surface depends on the task:

    • Claude Chat (claude.ai / app): Best for quick questions, design discussions, and drafting. Uses Chat and Project Memory; supports pre-built and custom skills (uploaded as zip).
    • Claude Cowork (desktop agentic app): Best for multi-step work across a folder or repository. Shares memory with Claude Chat; supports pre-built and custom skills.
    • Claude Code (terminal / IDE agent): Best for deep, iterative coding inside a repo. Uses a separate memory system based on CLAUDE.md hierarchy and auto-memory; supports custom filesystem-based skills only.

  4. Choose the right Claude surface for the task

    Claude is available through three primary surfaces, each with different memory and skill capabilities. Choose based on the nature of the task:

    • Claude Chat (claude.ai / app): Best for quick questions, design discussions, throwaway scripts, and drafting. Uses Chat and Project memory; supports pre-built and custom skills (uploaded as zip).
    • Claude Cowork (desktop agentic app): Best for multi-step work across a folder or repository. Uses the same memory system as Claude Chat; supports pre-built and custom skills.
    • Claude Code (terminal / IDE agent): Best for deep, iterative coding inside a repo. Uses a separate memory system based on CLAUDE.md hierarchy and auto-memory; supports custom filesystem-based skills only.

  5. Use CLAUDE.md to manage memory in Claude Code

    In Claude Code, CLAUDE.md acts as a persistent system prompt that loads automatically. It is the primary way to define team conventions, architecture, and required commands. It is recommended to commit the project-level CLAUDE.md to git.
    ScopeLocationUse CaseCommit to Git?
    Managed/etc/claude-code/CLAUDE.mdOrg security/complianceN/A
    User~/.claude/CLAUDE.mdPersonal global prefsNo
    Project./CLAUDE.md or ./.claude/CLAUDE.mdTeam conventions/commandsYes
    Local./CLAUDE.local.mdPersonal per-project notesNo

  6. Understand Git's core purpose and architecture

    Git is a distributed version control system (VCS) designed for speed, data integrity, and strong support for branching and merging. Unlike centralized systems (like SVN), every developer has a complete copy of the project history on their local machine, allowing for offline work and faster performance.

  7. Manage project context with CLAUDE.md in Claude Code

    In Claude Code, CLAUDE.md acts as a persistent system prompt that loads automatically at the start of every session. It is the primary way to define team conventions, architecture, and required commands.

    The Memory Hierarchy (Concatenated):

    • Managed policy: /etc/claude-code/CLAUDE.md (Org-wide security/compliance).
    • User: ~/.claude/CLAUDE.md (Personal preferences across all projects).
    • Project: ./CLAUDE.md or .claude/CLAUDE.md (Team conventions; should be committed to git).
    • Local: ./CLAUDE.local.md (Personal per-project notes; should be gitignored).

    Loading Behavior:

    • Claude walks up the directory tree to load CLAUDE.md files.
    • Subdirectory CLAUDE.md files (e.g., packages/auth/CLAUDE.md) load on-demand only when a file in that subtree is read.
    • Root CLAUDE.md persists through /compact commands.

  8. Implement on-demand expertise using Skills

    Skills are used for "verbs" (specific procedures) rather than "nouns" (general project context). A Skill consists of a folder containing a SKILL.md file. Claude loads only the name and description at startup and reads the full content only when the task matches the skill's purpose.

  9. Understand the Git Three-State Model

    Git manages files through three primary areas to control how changes are recorded in project history:

    1. Working Directory: Where you edit, add, delete, or rename files. Changes here are local and not yet tracked for the next commit.
    2. Staging Area (Index): A preparation zone where you select specific changes to be included in the next commit. This allows for partial and focused commits.
    3. Repository: Where Git stores the full project history as a series of committed snapshots.

  11. Manage Claude Code memory using CLAUDE.md

    Claude Code uses a hierarchical CLAUDE.md system that loads automatically at the start of every session. These files act as a system prompt to define team conventions, architecture, and commands.

    File Hierarchy (Concatenated):

    • Managed Policy: /etc/claude-code/CLAUDE.md (Org-wide security/compliance).
    • User: ~/.claude/CLAUDE.md (Personal preferences across all projects).
    • Project: ./CLAUDE.md or ./.claude/CLAUDE.md (Team conventions; should be committed to git).
    • Local: ./CLAUDE.local.md (Personal per-project notes; should be gitignored).

    Loading Behavior:

    • Claude walks up the directory tree from the launch point to load CLAUDE.md files.
    • Subdirectory CLAUDE.md files (e.g., packages/auth/CLAUDE.md) load on-demand only when a file in that subtree is read.

    Content Guidelines:

    • Keep files between 80–120 lines (max 200).
    • Include: Exact build/test/lint commands, tech stack conventions, project layout, and "Human Approval Required" checklists.
    • Avoid: Personality fluff or secrets/tokens.

  12. Understand the role of Skills in Claude Cowork

    A Skill is a folder containing a SKILL.md file (instructions and metadata) and optional scripts or templates. Unlike CLAUDE.md (which is always-on background context), a skill is on-demand expertise that Claude loads only when the task matches the skill's description.

    • CLAUDE.md = "Nouns" (What/where things are; always loaded).
    • Skills = "Verbs" (How to perform a specific procedure; loaded when triggered).

    Skills are portable and can be used across Claude Chat, Claude Cowork, and Claude Code.