Generative UI
himself65/finance-skills
Design system and templates for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.
Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift…
Install Architecture Map
$ npx skills add almendili/skills --skill architecture-map -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install almendili/skills architecture-map --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/almendili/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/architecture-map .claude/skills/architecture-map && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "architecture-map" agent skill from https://github.com/almendili/skills/tree/main/architecture-map into .claude/skills/architecture-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-map", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/almendili/skills/tree/main/architecture-mapType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add almendili/skills --skill architecture-map -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install almendili/skills architecture-map --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/almendili/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/architecture-map .agents/skills/architecture-map && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "architecture-map" agent skill from https://github.com/almendili/skills/tree/main/architecture-map into .agents/skills/architecture-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-map", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add almendili/skills --skill architecture-map -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install almendili/skills architecture-map --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/almendili/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/architecture-map .cursor/skills/architecture-map && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "architecture-map" agent skill from https://github.com/almendili/skills/tree/main/architecture-map into .cursor/skills/architecture-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-map", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/almendili/skills.git --path architecture-map--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add almendili/skills --skill architecture-map -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install almendili/skills architecture-map --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/almendili/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/architecture-map .gemini/skills/architecture-map && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "architecture-map" agent skill from https://github.com/almendili/skills/tree/main/architecture-map into .gemini/skills/architecture-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-map", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install almendili/skills architecture-mapInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add almendili/skills --skill architecture-map -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/almendili/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/architecture-map .github/skills/architecture-map && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "architecture-map" agent skill from https://github.com/almendili/skills/tree/main/architecture-map into .github/skills/architecture-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-map", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add almendili/skills --skill architecture-map -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install almendili/skills architecture-map --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/almendili/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/architecture-map .opencode/skills/architecture-map && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "architecture-map" agent skill from https://github.com/almendili/skills/tree/main/architecture-map into .opencode/skills/architecture-map/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "architecture-map", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
architecture-map- GitHub stars
- 382
- Used in
- 1 other repo
- Token cost
- ~2.3k tokens
- SKILL.md length
- 1,179 words
- Files
- 29 (incl. scripts, references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift…
- Works in 6 steps: Detect → Ask exactly four questions → Install the core → …
- Someone wants to see
- SKILL.md covers The one rule, Before you start, Step 1 — Detect and Step 2 — Ask exactly four…, plus 7 more sections
- Runs TypeScript scripts from its folder; calls node
What it does
Architecture Map is an agent skill from almendili/skills. Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift counter that fails CI when the map falls behind the code. Use when someone wants to see, explain, or onboard people to how a codebase fits together, or asks for an architecture diagram, system map, codebase overview, or "show me how this repo works". Adapts to the repo's design system; re-run to refresh.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 31 other files, including scripts, reference files and assets (for example `assets/components/theme.ts`, `assets/core/README.md` and `assets/core/archetypes.ts`).
It sits in Frontend & Design, covering Codebase onboarding, Diagrams and Design systems.
When your agent uses it
- Someone wants to see
- Onboard people to how a codebase fits together
- Asks for an architecture diagram
- Codebase overview
Example prompts
- “show me how this repo works”
- “/architecture-map”
Requirements
- Node.js
Workflow steps
6 steps, taken from the step headings in SKILL.md.
- Detect
- Ask exactly four questions
- Install the core
- Author the graph
- Mount it
- Verify, then be honest
What it can do on your machine
Read from SKILL.md and the folder at commit 572d259. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (TypeScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Architecture Map loads about 2.3k tokens when it runs, and up to ~4.8k if it reads all its reference files. Until then it costs about 130 tokens; SKILL.md has 1,179 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 1,179 words (~2,265 tokens).
“Turn a repository into a place you can walk around: an isometric city where every building is a real subsystem sized by its real weight, every line is a call path that exists in the code, and every moving dot…”
- name
- architecture-map
- metadata.version
- 1.0.0
Files
SKILL.md and 28 other files (scripts, references, assets) in architecture-map of almendili/skills.
- SKILL.md
- assets/components/ArchitectureMap.tsx
- assets/components/BuildingGlyph.tsx
- assets/components/DistrictLayer.tsx
- assets/components/EdgeLayer.tsx
- assets/components/IsoCanvas.tsx
- assets/components/SidePanels.tsx
- assets/components/keyframes.css
- assets/components/theme.ts
- assets/core/README.md
- assets/core/archetypes.ts
- assets/core/districts.ts
- assets/core/iso.ts
- assets/core/layout.ts
- assets/core/program.ts
- assets/core/routes.ts
- assets/core/scene.ts
- assets/core/types.ts
- … and 11 more
Open the folder on GitHubat commit 572d259
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in almendili/skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Architecture Map next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Architecture Map this skillalmendili/skills | 382 | 1 repos | ~2.3k | Automated safety check: Pass | None | |
| Generative UIhimself65/finance-skills | 3.4k | — | ~3.1k | Automated safety check: Pass | MIT | |
| Visualizedisplay-dev/visualize | 132 | — | ~7.4k | Automated safety check: Pass | MIT | |
| Tech Diagramthatrebeccarae/claude-marketing | 162 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Fin Generative UIcriptogus/agent-evolve-network | 288 | — | ~972 | Automated safety check: Pass | MIT | |
| Scraps Reviewgetsentry/sentry | 46k | — | ~1.2k | Automated safety check: Notes | Custom licence |
Similar skills
Visualize
display-dev/visualize
Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.
Tech Diagram
thatrebeccarae/claude-marketing
Generate technical architecture diagrams, pipeline flows, layer/stack diagrams, and system illustrations as standalone HTML files.
Fin Generative UI
criptogus/agent-evolve-network
Design system and guidelines for Claude's built-in showwidget tool to render high-quality interactive HTML/SVG widgets, charts, diagrams, and explainers inline.
- Official
Scraps Review
getsentry/sentry
Filter large Sentry Scraps design-system migration PRs for review by separating mechanical import-path changes, generated baseline updates, snapshot mocks, and pure renames from substantive…
Plate UI
udecode/plate
Build new shadcn-style components for Plate's registry and editor surfaces.
Related
Categories
Questions about Architecture Map
What does Architecture Map do?
Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift…. Architecture Map is an agent skill from almendili/skills. Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift counter that fails CI when the map falls behind the code.
When should I use Architecture Map?
Architecture Map fits situations like: someone wants to see; onboard people to how a codebase fits together; asks for an architecture diagram; codebase overview.
How do I install Architecture Map in Claude Code?
Run `npx skills add almendili/skills --skill architecture-map -a claude-code`. Or copy the skill folder (architecture-map in almendili/skills) into .claude/skills/architecture-map in your project. Claude Code loads it when a task matches its description.
How do I install Architecture Map in Codex?
Run `npx skills add almendili/skills --skill architecture-map -a codex`. Or copy the skill folder (architecture-map in almendili/skills) into .agents/skills/architecture-map in your project. Codex loads it when a task matches its description.
Can I use Architecture Map in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add almendili/skills --skill architecture-map -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/architecture-map, .gemini/skills/architecture-map, .github/skills/architecture-map and .opencode/skills/architecture-map in your project.
What does Architecture Map need to run?
Going by SKILL.md and its folder, Architecture Map needs TypeScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.
Does Architecture Map access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Architecture Map safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Architecture Map use?
No licence was found for Architecture Map or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Architecture Map use?
About 2.3k tokens (SKILL.md is roughly 9.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.5k tokens, read only when the agent opens those files.
What are the alternatives to Architecture Map?
Skills that share tags, products or a category with Architecture Map: Generative UI (himself65/finance-skills, 3.4k stars), Visualize (display-dev/visualize, 132 stars), Tech Diagram (thatrebeccarae/claude-marketing, 162 stars) and Fin Generative UI (criptogus/agent-evolve-network, 288 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Architecture Map?
almendili (a GitHub user) maintains it in almendili/skills, which has 382 GitHub stars. The repository was last updated on August 18, 2026.
Source: almendili/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.