How do I install the Generate Tech Stack skill?

Run npx skillmds@latest add askuma/generate-tech-stack 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.

Is Generate Tech Stack safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Generate Tech Stack?

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.

Is Generate Tech Stack free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Generate Tech Stack?

askuma (@askuma) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Generate Tech Stack by askuma — Agent Skill

Name: Generate Tech Stack
Author: askuma

Generate Tech Stack

FIRE this skill when the user's intent is to discover, list, visualize, document, or summarize the technologies used in a software project. This includes all of the following triggers: EXPLICIT COMMANDS: /generate-tech-stack; "generate tech stack"; "create tech stack"; "show tech stack"; "build tech stack"; "make tech stack page"; "tech stack report". DISCOVERY / INVENTORY INTENT: user wants to know what libraries, packages, dependencies, frameworks, tools, or services a project uses — phrased as: "what libraries does this use", "what packages are installed", "what dependencies does this project have", "list all tools", "what frameworks are in use", "show me the dependencies", "what's in requirements.txt", "scan my project", "audit the stack", "inventory the project", "what's this project built with", "what tech does this use", "show all packages", "detect the stack". VISUALIZATION / DOCUMENTATION INTENT: user wants an HTML page, visual report, or summary document of the project's technology choices — phrased

askuma 9517a12 11 files · 19.9 KB Updated Sep 17, 2026

File contents

generate-tech-stack

Scan the current project and produce a complete visual tech stack page.

Steps

Locate the project root — use the current working directory unless the user specified a path.

Run the analyzer:

python3 ~/.claude/skills/generate-tech-stack/scripts/analyze.py <project_root> <project_root>/TECH_STACK.html

Open the output:

xdg-open <project_root>/TECH_STACK.html 2>/dev/null || open <project_root>/TECH_STACK.html 2>/dev/null || true

Report to the user — include:
- Number of tools detected and categories found
- Clickable link to the output file
- One-line per-category breakdown from the script's stdout

Output format

The generated HTML must include all of the following sections (the script produces all of them automatically):

Stat row — large number tiles: Total Tools · Categories · AI Backends (if any) · Data Stores
Architecture diagram — layered flow:
- Row 1: Your Application / LLM Application (purple box)
- Row 2: Web/API framework(s) (green box with auth/middleware subtitle)
- Row 3: AI SDK boxes side-by-side (blue, one per backend — only if AI SDKs detected)
- Row 4: Database boxes + Observability + Frontend (dark row)
Bar chart summary — horizontal bars, one per category, colour-matched
Tool cards grid — one card per category with:
- Coloured icon box + category title + tool count in the header
- Each tool: colour dot · name · description · badge pill
Footer — project name · tool count · generation date
Guided tour — a spotlight walkthrough that dims the page and steps through each section in turn (Back/Next/Skip), shown automatically the first time a generated report is opened. Replayable anytime via the ? button in the top-right corner.
Theme toggle — sun/moon button beside the tour button switches between dark (default) and light mode.

Design tokens (default dark theme)

CSS variable	Value	Usage
`--bg`	`#0f172a`	Page background
`--bg2`	`#111827`	Secondary background
`--bg3`	`#161e2e`	Card / chart background
`--bg4`	`#1a2535`	Elevated surface
`--border`	`#1e293b`	Card / section borders
`--border2`	`#263347`	Hover border
`--text`	`#f1f5f9`	Primary text
`--muted`	`#64748b`	Secondary / label text
`--dim`	`#334155`	Footer / divider text
`--green`	`#22c55e`	Accent (badge dot, stat highlight)
`--mono`	`'JetBrains Mono', monospace`	Code / badge font
`--sans`	`'IBM Plex Sans', system-ui, sans-serif`	Body font

Fonts are loaded from Google Fonts:

IBM Plex Sans:wght@300;400;500;600;700
JetBrains Mono:wght@400;500;600

Heading h1: color:#f8fafc, no gradient. Bar chart track: background:#0a0f1a.

Fallback (script not found)

If ~/.claude/skills/generate-tech-stack/scripts/analyze.py cannot be found:

Read requirements.txt, package.json, go.mod, Cargo.toml, pyproject.toml
Check for Dockerfile, docker-compose.yml, .github/workflows/, alembic.ini
Identify each tool's category and purpose
Write TECH_STACK.html using the design tokens and section structure above

Notes

Always overwrite an existing TECH_STACK.html — never ask for confirmation
Works on Python, Node.js, Go, Rust, Java, Ruby, PHP projects
The architecture diagram adapts to what is detected: layers are omitted if their category is empty

---name: generate-tech-stackdescription: FIRE this skill when the user's intent is to discover, list, visualize, document, or summarize the technologies used in a software project. This includes all of the following triggers: EXPLICIT COMMANDS: /generate-tech-stack; "generate tech stack"; "create tech stack"; "show tech stack"; "build tech stack"; "make tech stack page"; "tech stack report". DISCOVERY / INVENTORY INTENT: user wants to know what libraries, packages, dependencies, frameworks, tools, or services a project uses — phrased as: "what libraries does this use", "what packages are installed", "what dependencies does this project have", "list all tools", "what frameworks are in use", "show me the dependencies", "what's in requirements.txt", "scan my project", "audit the stack", "inventory the project", "what's this project built with", "what tech does this use", "show all packages", "detect the stack". VISUALIZATION / DOCUMENTATION INTENT: user wants an HTML page, visual report, or summary document of the project's technology choices — phrased---# generate-tech-stackScan the current project and produce a complete visual tech stack page.## Steps1. **Locate the project root** — use the current working directory unless the user specified a path.2. **Run the analyzer**: ```bash python3 ~/.claude/skills/generate-tech-stack/scripts/analyze.py <project_root> <project_root>/TECH_STACK.html ```3. **Open the output**: ```bash xdg-open <project_root>/TECH_STACK.html 2>/dev/null || open <project_root>/TECH_STACK.html 2>/dev/null || true ```4. **Report to the user** — include: - Number of tools detected and categories found - Clickable link to the output file - One-line per-category breakdown from the script's stdout## Output formatThe generated HTML must include all of the following sections (the script produces all of them automatically):1. **Stat row** — large number tiles: Total Tools · Categories · AI Backends (if any) · Data Stores2. **Architecture diagram** — layered flow: - Row 1: Your Application / LLM Application (purple box) - Row 2: Web/API framework(s) (green box with auth/middleware subtitle) - Row 3: AI SDK boxes side-by-side (blue, one per backend — only if AI SDKs detected) - Row 4: Database boxes + Observability + Frontend (dark row)3. **Bar chart summary** — horizontal bars, one per category, colour-matched4. **Tool cards grid** — one card per category with: - Coloured icon box + category title + tool count in the header - Each tool: colour dot · name · description · badge pill5. **Footer** — project name · tool count · generation date6. **Guided tour** — a spotlight walkthrough that dims the page and steps through each section in turn (Back/Next/Skip), shown automatically the first time a generated report is opened. Replayable anytime via the `?` button in the top-right corner.7. **Theme toggle** — sun/moon button beside the tour button switches between dark (default) and light mode.## Design tokens (default dark theme)| CSS variable | Value | Usage ||---|---|---|| `--bg` | `#0f172a` | Page background || `--bg2` | `#111827` | Secondary background || `--bg3` | `#161e2e` | Card / chart background || `--bg4` | `#1a2535` | Elevated surface || `--border` | `#1e293b` | Card / section borders || `--border2` | `#263347` | Hover border || `--text` | `#f1f5f9` | Primary text || `--muted` | `#64748b` | Secondary / label text || `--dim` | `#334155` | Footer / divider text || `--green` | `#22c55e` | Accent (badge dot, stat highlight) || `--mono` | `'JetBrains Mono', monospace` | Code / badge font || `--sans` | `'IBM Plex Sans', system-ui, sans-serif` | Body font |Fonts are loaded from Google Fonts:```IBM Plex Sans:wght@300;400;500;600;700JetBrains Mono:wght@400;500;600```Heading `h1`: `color:#f8fafc`, no gradient. Bar chart track: `background:#0a0f1a`.## Fallback (script not found)If `~/.claude/skills/generate-tech-stack/scripts/analyze.py` cannot be found:- Read `requirements.txt`, `package.json`, `go.mod`, `Cargo.toml`, `pyproject.toml`- Check for `Dockerfile`, `docker-compose.yml`, `.github/workflows/`, `alembic.ini`- Identify each tool's category and purpose- Write `TECH_STACK.html` using the design tokens and section structure above## Notes- Always overwrite an existing `TECH_STACK.html` — never ask for confirmation- Works on Python, Node.js, Go, Rust, Java, Ruby, PHP projects- The architecture diagram adapts to what is detected: layers are omitted if their category is empty

Frequently asked questions