# ykdojo/claude-code-tips architecture

> Architecture diagram of the GitHub repository ykdojo/claude-code-tips, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ykdojo/claude-code-tips
- Repository: https://github.com/ykdojo/claude-code-tips

## Overview

1. This repository is a documentation-and-tooling package centered on Claude Code workflows. The primary “product” is the long-form tip guide in `README.md`, with supporting articles under `content/`, reusable utilities under `scripts/`, and Claude Code automation packaged as `skills/` plus a plugin manifest.

2. The content layer is mostly markdown and HTML. `README.md` is the main entry point and table of contents for the tips. Additional standalone posts live in `content/*.md`, and a few slide/demo pages live in `content/*.html`. These are presentation assets rather than application logic.

3. `assets/` contains images and media referenced by the README and content pages. It supports the narrative and demo sections, but does not drive any runtime behavior.

4. The `scripts/` directory is the operational core. It contains shell and Node utilities for status-line rendering, context management, conversation cloning, setup, previewing colors, and generating a table of contents. These scripts are meant to be run locally inside a user’s Claude Code environment.

5. Several scripts directly support Claude Code session management: `context-bar.sh` powers the custom status line, `check-context.sh` monitors token usage and can trigger half-cloning, and `clone-conversation.sh` / `half-clone-conversation.sh` copy conversation history into new sessions. This creates a workflow boundary between “active session” and “fresh session with preserved context.”

6. The `skills/` directory packages reusable Claude Code behaviors as SKILL files. Each subfolder is a distinct workflow, such as GitHub Actions triage (`gha`), conversation cloning (`clone`, `half-clone`), handoff generation, Hacker News summarization, Reddit fetching, CLAUDE.md review, and version checking. These are invoked by Claude Code as skills or slash commands.

7. The repository also acts as a Claude Code plugin distribution. The `.claude-plugin/` manifests define the plugin metadata and marketplace packaging, and the README describes installing the `dx` plugin from this repo. In architecture terms, the plugin is the distribution boundary that bundles selected skills into a single installable unit.

8. The workflows are designed around external services and tools that Claude Code can call: Git and GitHub CLI (`gh`) for repository and PR operations, Claude Code’s own slash commands and hooks, and optionally browser automation via MCP/Playwright. Those integrations are not implemented as a web backend; they are invoked from the local agent environment.

9. The repository’s data flow is mostly one-way from documentation to tooling: the README explains the workflows, the skills and scripts implement them, and the plugin manifest exposes them for installation. In use, a user reads the guide, installs the plugin or scripts, and then Claude Code executes local shell commands or skill actions on the user’s machine.

10. `content/3d/` is a separate mini-subsystem for interactive visual examples. It includes JavaScript modules and a `build.js` script for assembling 3D demo artifacts such as bat and cube visuals. This is presentation/demo code, isolated from the Claude Code workflow tooling.

11. There is a clear boundary between “reference material” and “automation.” The markdown articles explain patterns and usage; the scripts and skills encode the repeatable parts. That separation is important for the diagram: the docs are the user-facing knowledge layer, while `scripts/` and `skills/` are the executable workflow layer.

12. Overall, the repository is best diagrammed as a knowledge hub with attached local automation: README/content at the center, media assets as support, scripts as operational utilities, skills as reusable Claude Code actions, and the plugin manifests as the distribution mechanism.

Main entry points: [`README.md`](https://github.com/ykdojo/claude-code-tips/blob/main/README.md) (README), [`.claude-plugin/plugin.json`](https://github.com/ykdojo/claude-code-tips/blob/main/.claude-plugin/plugin.json) (Plugin), [`scripts/clone-conversation.sh`](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/clone-conversation.sh) (Clone Conv), [`scripts/half-clone-conversation.sh`](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/half-clone-conversation.sh) (Half Clone)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_docs["Reference"]
  node_readme["README<br/>guide index<br/>[README.md]"]
  node_global_claude["Global Claude<br/>policy doc<br/>[GLOBAL-CLAUDE.md]"]
  node_claude_md["CLAUDE<br/>policy doc<br/>[CLAUDE.md]"]
  node_tips_new_users["New Users<br/>article"]
  node_five_tips["5 New Tips<br/>article<br/>[5-new-tips.md]"]
  node_boris_tips["Boris Tips<br/>article"]
  node_dx_submissions["DX Submissions<br/>article<br/>[dx-submissions.md]"]
  node_job_story["Job Story<br/>article"]
  node_saved_10k["Saved 10K<br/>article"]
  node_spectrum["Spectrum<br/>article"]
  node_slides_short["Short Slides<br/>presentation"]
  node_slides_long["Slides<br/>presentation"]
  node_tips_slides["Tips Slides<br/>presentation<br/>[tips-slides.html]"]
end

subgraph group_automation["Automation"]
  node_toc_gen["TOC Gen<br/>doc tool<br/>[generate-toc.js]"]
  node_context_bar["Context Bar<br/>session ui<br/>[context-bar.sh]"]
  node_check_context["Check Context<br/>token monitor<br/>[check-context.sh]"]
  node_clone_conv["Clone Conv<br/>session clone"]
  node_half_clone_conv["Half Clone<br/>session clone"]
  node_setup["Setup<br/>bootstrap script<br/>[setup.sh]"]
  node_color_preview["Color Preview<br/>preview tool<br/>[color-preview.sh]"]
  node_skill_gha["GHA<br/>skill<br/>[SKILL.md]"]
  node_skill_clone["Clone Skill<br/>[SKILL.md]"]
  node_skill_half_clone["Half Clone<br/>skill<br/>[SKILL.md]"]
  node_skill_handoff["Handoff<br/>skill<br/>[SKILL.md]"]
  node_skill_hn["HN Summarize<br/>skill<br/>[SKILL.md]"]
  node_skill_reddit["Reddit Fetch<br/>skill<br/>[SKILL.md]"]
  node_skill_review["CLAUDE.md Review<br/>skill<br/>[SKILL.md]"]
  node_skill_version["Version Check<br/>skill<br/>[SKILL.md]"]
end

subgraph group_distribution["Plugin"]
  node_plugin_json["Plugin<br/>manifest<br/>[plugin.json]"]
  node_marketplace_json["Marketplace<br/>manifest<br/>[marketplace.json]"]
end

subgraph group_media["Assets"]
  node_assets_bundle[("Assets<br/>media bundle")]
  node_content_3d["3D Demo<br/>demo subsystem"]
end

node_readme -->|"links to"| node_tips_new_users
node_readme -->|"links to"| node_five_tips
node_readme -->|"links to"| node_boris_tips
node_readme -->|"links to"| node_dx_submissions
node_readme -->|"links to"| node_job_story
node_readme -->|"links to"| node_saved_10k
node_readme -->|"links to"| node_spectrum
node_readme -->|"supports"| node_slides_short
node_readme -->|"supports"| node_slides_long
node_readme -->|"supports"| node_tips_slides
node_readme -->|"references"| node_assets_bundle
node_spectrum -->|"drives"| node_content_3d
node_context_bar -->|"feeds"| node_check_context
node_check_context -->|"triggers"| node_half_clone_conv
node_clone_conv -.->|"related"| node_half_clone_conv
node_skill_clone -->|"packages"| node_clone_conv
node_skill_half_clone -->|"packages"| node_half_clone_conv
node_skill_handoff -.->|"supports"| node_clone_conv
node_toc_gen -->|"organizes"| node_readme
node_setup -->|"installs"| node_context_bar
node_skill_gha -->|"bundled by"| node_plugin_json
node_skill_clone -->|"bundled by"| node_plugin_json
node_skill_half_clone -->|"bundled by"| node_plugin_json
node_skill_handoff -->|"bundled by"| node_plugin_json
node_skill_hn -->|"bundled by"| node_plugin_json
node_skill_reddit -->|"bundled by"| node_plugin_json
node_skill_review -->|"bundled by"| node_plugin_json
node_skill_version -->|"bundled by"| node_plugin_json
node_plugin_json -->|"described by"| node_marketplace_json
node_plugin_json -.->|"installed from"| node_readme
node_content_3d -.->|"uses"| node_assets_bundle

click node_readme "https://github.com/ykdojo/claude-code-tips/blob/main/README.md"
click node_global_claude "https://github.com/ykdojo/claude-code-tips/blob/main/GLOBAL-CLAUDE.md"
click node_claude_md "https://github.com/ykdojo/claude-code-tips/blob/main/CLAUDE.md"
click node_tips_new_users "https://github.com/ykdojo/claude-code-tips/blob/main/content/10-tips-for-newer-users.md"
click node_five_tips "https://github.com/ykdojo/claude-code-tips/blob/main/content/5-new-tips.md"
click node_boris_tips "https://github.com/ykdojo/claude-code-tips/blob/main/content/boris-claude-code-tips.md"
click node_dx_submissions "https://github.com/ykdojo/claude-code-tips/blob/main/content/dx-submissions.md"
click node_job_story "https://github.com/ykdojo/claude-code-tips/blob/main/content/how-i-got-a-job-with-claude-code.md"
click node_saved_10k "https://github.com/ykdojo/claude-code-tips/blob/main/content/how-i-saved-10k-with-claude-code.md"
click node_spectrum "https://github.com/ykdojo/claude-code-tips/blob/main/content/spectrum-of-agentic-coding.md"
click node_slides_short "https://github.com/ykdojo/claude-code-tips/blob/main/content/spectrum-slides-short.html"
click node_slides_long "https://github.com/ykdojo/claude-code-tips/blob/main/content/spectrum-slides.html"
click node_tips_slides "https://github.com/ykdojo/claude-code-tips/blob/main/content/tips-slides.html"
click node_toc_gen "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/generate-toc.js"
click node_context_bar "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/context-bar.sh"
click node_check_context "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/check-context.sh"
click node_clone_conv "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/clone-conversation.sh"
click node_half_clone_conv "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/half-clone-conversation.sh"
click node_setup "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/setup.sh"
click node_color_preview "https://github.com/ykdojo/claude-code-tips/blob/main/scripts/color-preview.sh"
click node_skill_gha "https://github.com/ykdojo/claude-code-tips/blob/main/skills/gha/SKILL.md"
click node_skill_clone "https://github.com/ykdojo/claude-code-tips/blob/main/skills/clone/SKILL.md"
click node_skill_half_clone "https://github.com/ykdojo/claude-code-tips/blob/main/skills/half-clone/SKILL.md"
click node_skill_handoff "https://github.com/ykdojo/claude-code-tips/blob/main/skills/handoff/SKILL.md"
click node_skill_hn "https://github.com/ykdojo/claude-code-tips/blob/main/skills/hn-summarize/SKILL.md"
click node_skill_reddit "https://github.com/ykdojo/claude-code-tips/blob/main/skills/reddit-fetch/SKILL.md"
click node_skill_review "https://github.com/ykdojo/claude-code-tips/blob/main/skills/review-claudemd/SKILL.md"
click node_skill_version "https://github.com/ykdojo/claude-code-tips/blob/main/skills/version-check/SKILL.md"
click node_plugin_json "https://github.com/ykdojo/claude-code-tips/blob/main/.claude-plugin/plugin.json"
click node_marketplace_json "https://github.com/ykdojo/claude-code-tips/blob/main/.claude-plugin/marketplace.json"
click node_assets_bundle "https://github.com/ykdojo/claude-code-tips/tree/main/assets"
click node_content_3d "https://github.com/ykdojo/claude-code-tips/tree/main/content/3d"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_readme,node_global_claude,node_claude_md,node_tips_new_users,node_five_tips,node_boris_tips,node_dx_submissions,node_job_story,node_saved_10k,node_spectrum,node_slides_short,node_slides_long,node_tips_slides toneBlue
class node_toc_gen,node_context_bar,node_check_context,node_clone_conv,node_half_clone_conv,node_setup,node_color_preview,node_skill_gha,node_skill_clone,node_skill_half_clone,node_skill_handoff,node_skill_hn,node_skill_reddit,node_skill_review,node_skill_version toneAmber
class node_plugin_json,node_marketplace_json toneMint
class node_assets_bundle,node_content_3d toneRose
```

## Components

### Reference

User-facing guides, articles, and slides.

- [README](https://github.com/ykdojo/claude-code-tips/blob/main/README.md): guide index · Primary tip guide and table of contents for the repository. · `README.md`
- [Global Claude](https://github.com/ykdojo/claude-code-tips/blob/main/GLOBAL-CLAUDE.md): policy doc · Global Claude Code guidance used alongside the tips. · `GLOBAL-CLAUDE.md`
- [CLAUDE](https://github.com/ykdojo/claude-code-tips/blob/main/CLAUDE.md): policy doc · Repository-specific Claude Code instructions and conventions. · `CLAUDE.md`
- [New Users](https://github.com/ykdojo/claude-code-tips/blob/main/content/10-tips-for-newer-users.md): article · Tip article for newer Claude Code users. · `content/10-tips-for-newer-users.md`
- [5 New Tips](https://github.com/ykdojo/claude-code-tips/blob/main/content/5-new-tips.md): article · Short follow-up tips article. · `content/5-new-tips.md`
- [Boris Tips](https://github.com/ykdojo/claude-code-tips/blob/main/content/boris-claude-code-tips.md): article · Standalone Claude Code tips article. · `content/boris-claude-code-tips.md`
- [DX Submissions](https://github.com/ykdojo/claude-code-tips/blob/main/content/dx-submissions.md): article · Community or submission-oriented tips page. · `content/dx-submissions.md`
- [Job Story](https://github.com/ykdojo/claude-code-tips/blob/main/content/how-i-got-a-job-with-claude-code.md): article · Narrative about getting a job with Claude Code. · `content/how-i-got-a-job-with-claude-code.md`
- [Saved 10K](https://github.com/ykdojo/claude-code-tips/blob/main/content/how-i-saved-10k-with-claude-code.md): article · Narrative about cost savings with Claude Code. · `content/how-i-saved-10k-with-claude-code.md`
- [Spectrum](https://github.com/ykdojo/claude-code-tips/blob/main/content/spectrum-of-agentic-coding.md): article · Concept piece about the spectrum of agentic coding. · `content/spectrum-of-agentic-coding.md`
- [Short Slides](https://github.com/ykdojo/claude-code-tips/blob/main/content/spectrum-slides-short.html): presentation · Compact slide deck for the spectrum article. · `content/spectrum-slides-short.html`
- [Slides](https://github.com/ykdojo/claude-code-tips/blob/main/content/spectrum-slides.html): presentation · Full slide deck for the spectrum article. · `content/spectrum-slides.html`
- [Tips Slides](https://github.com/ykdojo/claude-code-tips/blob/main/content/tips-slides.html): presentation · Slide deck derived from the tips content. · `content/tips-slides.html`

### Automation

Local scripts and Claude Code skills that execute workflows.

- [TOC Gen](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/generate-toc.js): doc tool · Script used to generate or maintain documentation structure. · `scripts/generate-toc.js`
- [Context Bar](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/context-bar.sh): session ui · Shell status-line renderer for Claude Code sessions. · `scripts/context-bar.sh`
- [Check Context](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/check-context.sh): token monitor · Monitors token usage and can trigger session cloning. · `scripts/check-context.sh`
- [Clone Conv](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/clone-conversation.sh): session clone · Copies conversation history into a fresh Claude Code session. · `scripts/clone-conversation.sh`
- [Half Clone](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/half-clone-conversation.sh): session clone · Creates a partial conversation clone for continued work. · `scripts/half-clone-conversation.sh`
- [Setup](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/setup.sh): bootstrap script · Local setup and environment initialization for the tooling. · `scripts/setup.sh`
- [Color Preview](https://github.com/ykdojo/claude-code-tips/blob/main/scripts/color-preview.sh): preview tool · Utility for previewing terminal or theme colors. · `scripts/color-preview.sh`
- [GHA](https://github.com/ykdojo/claude-code-tips/blob/main/skills/gha/SKILL.md): skill · GitHub Actions triage and workflow support. · `skills/gha/SKILL.md`
- [Clone Skill](https://github.com/ykdojo/claude-code-tips/blob/main/skills/clone/SKILL.md): skill · Conversation cloning workflow packaged as a reusable skill. · `skills/clone/SKILL.md`
- [Half Clone](https://github.com/ykdojo/claude-code-tips/blob/main/skills/half-clone/SKILL.md): skill · Half-clone workflow packaged as a reusable skill. · `skills/half-clone/SKILL.md`
- [Handoff](https://github.com/ykdojo/claude-code-tips/blob/main/skills/handoff/SKILL.md): skill · Creates handoff material for continuing work in another session. · `skills/handoff/SKILL.md`
- [HN Summarize](https://github.com/ykdojo/claude-code-tips/blob/main/skills/hn-summarize/SKILL.md): skill · Summarizes Hacker News discussions as a Claude Code skill. · `skills/hn-summarize/SKILL.md`
- [Reddit Fetch](https://github.com/ykdojo/claude-code-tips/blob/main/skills/reddit-fetch/SKILL.md): skill · Fetches Reddit content for summarization or analysis. · `skills/reddit-fetch/SKILL.md`
- [CLAUDE.md Review](https://github.com/ykdojo/claude-code-tips/blob/main/skills/review-claudemd/SKILL.md): skill · Reviews Claude instruction files for quality and consistency. · `skills/review-claudemd/SKILL.md`
- [Version Check](https://github.com/ykdojo/claude-code-tips/blob/main/skills/version-check/SKILL.md): skill · Checks versions and compatibility for the Claude Code stack. · `skills/version-check/SKILL.md`

### Plugin

Claude Code plugin packaging and install boundary.

- [Plugin](https://github.com/ykdojo/claude-code-tips/blob/main/.claude-plugin/plugin.json): manifest · Claude Code plugin metadata and packaging entry point. · `.claude-plugin/plugin.json`
- [Marketplace](https://github.com/ykdojo/claude-code-tips/blob/main/.claude-plugin/marketplace.json): manifest · Marketplace distribution metadata for the plugin. · `.claude-plugin/marketplace.json`

### Assets

Images, media, and demo artifacts used by the docs.

- [Assets](https://github.com/ykdojo/claude-code-tips/tree/main/assets): media bundle · Images and media referenced by docs and demos. · `assets`
- [3D Demo](https://github.com/ykdojo/claude-code-tips/tree/main/content/3d): demo subsystem · Interactive 3D presentation modules and build script. · `content/3d`

## Connections

- README → New Users: links to · Main guide points to supporting articles.
- README → 5 New Tips: links to · Main guide points to supporting articles.
- README → Boris Tips: links to · Main guide points to supporting articles.
- README → DX Submissions: links to · Main guide points to supporting articles.
- README → Job Story: links to · Main guide points to supporting articles.
- README → Saved 10K: links to · Main guide points to supporting articles.
- README → Spectrum: links to · Main guide points to supporting articles.
- README → Short Slides: supports · README references slide and demo material.
- README → Slides: supports · README references slide and demo material.
- README → Tips Slides: supports · README references slide and demo material.
- README → Assets: references · Docs depend on shared images and media assets.
- Spectrum → 3D Demo: drives · The spectrum article is paired with the 3D demo subsystem.
- Context Bar → Check Context: feeds · Status line and context monitoring work together.
- Check Context → Half Clone: triggers · Token pressure can cause a half-clone workflow.
- Clone Conv → Half Clone: related · Two flavors of session migration for preserved context.
- Clone Skill → Clone Conv: packages · Skill exposes the conversation clone workflow.
- Half Clone → Half Clone: packages · Skill exposes the half-clone workflow.
- Handoff → Clone Conv: supports · Handoff workflows often follow session cloning.
- TOC Gen → README: organizes · TOC generation supports the main documentation entry point.
- Setup → Context Bar: installs · Bootstrap prepares the session UI utilities.
- GHA → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- Clone Skill → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- Half Clone → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- Handoff → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- HN Summarize → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- Reddit Fetch → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- CLAUDE.md Review → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- Version Check → Plugin: bundled by · Plugin packaging exposes selected Claude Code skills.
- Plugin → Marketplace: described by · Manifest and marketplace metadata define distribution.
- Plugin → README: installed from · The README describes installing the dx plugin from this repo.
- 3D Demo → Assets: uses · Demo artifacts may reference shared media assets.