Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add tdimino/claude-code-minoan --skill component-gallerygit clone --depth 1 https://github.com/tdimino/claude-code-minoanWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/tdimino/claude-code-minoan/component-gallery)<a href="https://agentmods.dev/skills/tdimino/claude-code-minoan/component-gallery"><img src="https://agentmods.dev/badge/skills/tdimino/claude-code-minoan/component-gallery/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/tdimino/claude-code-minoan/component-gallery"><img src="https://agentmods.dev/badge/skills/tdimino/claude-code-minoan/component-gallery.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00121 | $0.02089 |
| Opus 5 | $0.00060 | $0.01045 |
| Sonnet 5 | $0.00024 | $0.00418 |
| Haiku 4.5 | $0.00012 | $0.00209 |
Grade A, and why
component-gallery scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 128 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Component Gallery — Pattern Research via Local RAG
Research real component implementations before building. The gap between "I'll make a sidebar" and "here's how Atlassian, Shopify, and GitHub each solved sidebar navigation" is the gap between guessing and grounding. This skill bridges it.
Philosophy
Every UI component has been built thousands of times. The best implementations share patterns that no single designer invented—they emerged from convergent problem-solving across design systems with different constraints. Studying these patterns before writing code prevents reinventing solved problems, surfaces accessibility requirements that are easy to miss, and reveals implementation trade-offs that only become visible when comparing multiple approaches side by side.
Pattern research is not copying. It is the equivalent of a literature review before writing a paper. Build with awareness of what exists, then make deliberate choices about what to keep, adapt, or reject.
Quick Reference — Static Indexes
Read these files directly for fast lookup. No RAG query needed.
| File | Contents |
|---|---|
references/component-index.md |
All component types with alt names, example counts, descriptions |
references/design-system-index.md |
All design systems with tech stack, features, links — opens with an ecosystem-currency section (shadcn→Base UI pivot, renames, W3C token spec) |
references/component-taxonomy.md |
Components grouped by functional category (Forms, Navigation, Feedback, Layout, Data Display, Actions) |
references/ai-components.md |
AI-era overlay: prompt input, message thread, streaming status, tool-call card, citations, reasoning disclosure, artifact workspace — each composed from canonical atoms with its unique behaviors named |
references/composite-patterns.md |
Workflow-level composites: command palette, app shell, multi-step form, filter bar, agent console, notification center |
references/*-pattern.md |
Externally-sourced pattern docs: astryx-hero-pattern.md (depth-parallax hero), fluid-dom-pattern.md (fluid over DOM), composio-glitch-hero-pattern.md (generative pixel-glitch canvas hero), composio-agent-console-pattern.md (product diorama of tool-call panels) |
references/index.json |
Machine-readable dataset — generated by build_indexes.py alongside the Markdown, never hand-edited |
What ships with it
20 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- .gitignore 25 B
- evals/evals.json 3.6 KB
- README.md 6.1 KB
- references/ai-components.md 5.8 KB
- references/astryx-hero-pattern.md 1.4 KB
- references/component-index.md 11 KB
- references/component-taxonomy.md 9.7 KB
- references/composio-agent-console-pattern.md 2.9 KB
- references/composio-glitch-hero-pattern.md 2.6 KB
- references/composite-patterns.md 3.6 KB
- references/design-system-index.md 13 KB
- references/fluid-dom-pattern.md 1.6 KB
- references/index.json 49 KB
- references/mesh3d-gallery.md 2.6 KB
- scripts/build_indexes.py 15 KB runs code
- scripts/fetch_mesh3d.py 8.4 KB runs code
- scripts/ingest.py 20 KB runs code
- scripts/query.py 11 KB runs code
- scripts/test_build_indexes.py 11 KB runs code
- scripts/validate_links.py 5.3 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago Changed · +22 lines · +43 tokens per session ebd0836da8bb
- 9d ago First seen · 106 lines · 78 tokens per session scan A f66de7c2f6b1
component-gallery is a skill published in the GitHub repository tdimino/claude-code-minoan (41 stars, last pushed yesterday), licensed MIT. It adds 121 tokens to every session and 2,089 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
art-director
Orchestrate iterative visual style searches with branch prompts, decision graphs, feedback loops, and final direction selection.
html-draft
Use when user wants a standalone HTML diagram in flat engineering blueprint style — architecture diagrams, system flows, technical spec sheets, component maps. Generates one HTML file using Tailwind v4 (browser CDN) for layout and D3 v7 (CDN) for SVG diagrams. User-invoked only — do NOT auto-trigger. Triggers on…
parallel-design-variants
A workflow for producing several genuinely different visual design directions at the same time. It uses distinct visual references, gathers the results into a comparison gallery, and can support choosing winners before another design round.
vellum-workspace-theme
Customize the app's visual theme — author design-token overrides (accent, background, surfaces, text, message-bubble colors) in the workspace ui/theme.json, validated by the assistant runtime and applied live to connected clients. Covers the token slots, the all-or-none override groups, the contrast floor, and reading…
vellum-avatar
Customize the assistant's avatar - build a native character, upload an image, or generate one with AI.
openscreen-design
Use this skill to generate well-branded interfaces and assets for OpenScreen (an AI-native screen-recording studio & video editor), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.