Artefacts: Introduce Repo
Render a visual HTML introduction to this codebase for a newly-joined developer
JasonWarrenUK
Updated Artefacts: Introduce Repo by JasonWarrenUK · e91c3ba
npx skillmds@latest add jasonwarrenuk/artefacts-introduce-repo File contents
---name: artefacts-introduce-repodescription: Render a visual HTML introduction to this codebase for a newly-joined developer---# Repo Introduction<overview> Produce an interactive visual overview of this codebase aimed at a newly-joined developer. Uses the visual-explainer plugin to generate a standalone HTML page with architecture diagrams, module relationships, and project context.</overview><steps> 1. Load the visual-explainer skill AND the artefact-conventions skill — visual-explainer supplies the diagramming/rendering patterns, artefact-conventions supplies Jason's structural/aesthetic layer (masthead, palette-via-theme-tokens, theming contract with its masthead toggle control, honesty footer). They compose; neither replaces the other. This skill generates Mermaid architecture diagrams rendered once at load, so the theming contract's diagram rule applies directly: drive node/edge colours from the same CSS custom properties as the rest of the page, or re-render on both `matchMedia` change and `data-theme` mutation — a static render taken at load time strands its colours on the next toggle click. 2. Per artefact-conventions Step 2: check {project_root}/docs/artefacts/ for existing artefacts. If this project already has one, read it and reuse its established palette/font-pairing/tone rather than defaulting to whatever visual-explainer would generate on its own — an intro page should look like it belongs with the project's other artefacts, not like a different tool made it. 3. Analyse the codebase: - Read README.md, package.json/go.mod/Cargo.toml/pyproject.toml for identity and dependencies - Map top-level directory structure and entry points - Read key source files to understand module structure and public API surface - Skim git log for recent activity and key decisions 4. If $ARGUMENTS contains content, treat it as a focus area and weight the analysis accordingly. 5. Generate a visual HTML page following the visual-explainer workflow for the diagramming, and artefact-conventions for everything else (masthead, theming, collapsibility past ~4 sections, sourced footer): - Architecture snapshot (Mermaid diagram of modules and their relationships) - Project identity: what it does, who uses it, what stage it's at - Mental model essentials: invariants, non-obvious coupling, naming conventions, gotchas - Module map with responsibilities 6. Write to {project_root}/docs/artefacts/intro-{slug}.html (the same home as every other project artefact) and open in browser.</steps><inputs> $ARGUMENTS</inputs>
JasonWarrenUK/claude-code-config/tree/main/skills/artefact-intro commit e91c3ba6b6
Frequently asked questions
Run npx skillmds@latest add jasonwarrenuk/artefacts-introduce-repo in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Render a visual HTML introduction to this codebase for a newly-joined developer It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
JasonWarrenUK (@jasonwarrenuk) published this skill. Their other Agent Skills are listed on their SkillMD profile.