Architecture Map
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…
Find references, Viktor Oddy and MotionSites. An agent skill from TheGoat395/Codex-Skills.
Install Premium Visual Reference Library
$ npx skills add TheGoat395/Codex-Skills --skill premium-visual-reference-library -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install TheGoat395/Codex-Skills premium-visual-reference-library --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/TheGoat395/Codex-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/premium-visual-reference-library .claude/skills/premium-visual-reference-library && 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 "premium-visual-reference-library" agent skill from https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-library into .claude/skills/premium-visual-reference-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "premium-visual-reference-library", 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/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-libraryType 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 TheGoat395/Codex-Skills --skill premium-visual-reference-library -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install TheGoat395/Codex-Skills premium-visual-reference-library --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheGoat395/Codex-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/premium-visual-reference-library .agents/skills/premium-visual-reference-library && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "premium-visual-reference-library" agent skill from https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-library into .agents/skills/premium-visual-reference-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "premium-visual-reference-library", 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 TheGoat395/Codex-Skills --skill premium-visual-reference-library -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install TheGoat395/Codex-Skills premium-visual-reference-library --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheGoat395/Codex-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/premium-visual-reference-library .cursor/skills/premium-visual-reference-library && 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 "premium-visual-reference-library" agent skill from https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-library into .cursor/skills/premium-visual-reference-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "premium-visual-reference-library", 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/TheGoat395/Codex-Skills.git --path skills/premium-visual-reference-library--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 TheGoat395/Codex-Skills --skill premium-visual-reference-library -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install TheGoat395/Codex-Skills premium-visual-reference-library --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheGoat395/Codex-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/premium-visual-reference-library .gemini/skills/premium-visual-reference-library && 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 "premium-visual-reference-library" agent skill from https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-library into .gemini/skills/premium-visual-reference-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "premium-visual-reference-library", 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 TheGoat395/Codex-Skills premium-visual-reference-libraryInstalls 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 TheGoat395/Codex-Skills --skill premium-visual-reference-library -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/TheGoat395/Codex-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/premium-visual-reference-library .github/skills/premium-visual-reference-library && 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 "premium-visual-reference-library" agent skill from https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-library into .github/skills/premium-visual-reference-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "premium-visual-reference-library", 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 TheGoat395/Codex-Skills --skill premium-visual-reference-library -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install TheGoat395/Codex-Skills premium-visual-reference-library --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheGoat395/Codex-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/premium-visual-reference-library .opencode/skills/premium-visual-reference-library && 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 "premium-visual-reference-library" agent skill from https://github.com/TheGoat395/Codex-Skills/tree/main/skills/premium-visual-reference-library into .opencode/skills/premium-visual-reference-library/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "premium-visual-reference-library", 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
premium-visual-reference-library- GitHub stars
- 126
- Token cost
- ~867 tokens
- SKILL.md length
- 414 words
- Files
- 12 (incl. scripts, references)
- Skills in repo
- 23
- Repo updated
- First seen
- Licence
- MIT
At a glance
Find references, Viktor Oddy and MotionSites. An agent skill from TheGoat395/Codex-Skills.
- Works in 8 steps: Identify the site category:… → Read sources.md for the relevant source… → When the user names a creator, asks for… → …
- Tasks that involve Codebase onboarding
- SKILL.md covers Workflow, Retrieve only the selected… and Source Fidelity
- Runs Python scripts from its folder; calls python3
What it does
Premium Visual Reference Library is an agent skill from TheGoat395/Codex-Skills. Find references, Viktor Oddy and MotionSites.
Its SKILL.md is about 870 tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including scripts and reference files (for example `agents/openai.yaml`, `references/catalog-provenance-overlay.json` and `references/creator-and-pattern-index.md`).
It sits in Frontend & Design, covering Codebase onboarding. The repository describes itself as: Codex-first Agent Skills library for premium frontend, website, motion, accessibility, QA, and handoff workflows. The licence is MIT.
When your agent uses it
- Tasks that involve Codebase onboarding
Example prompts
- “/premium-visual-reference-library”
Requirements
- Python 3
Workflow steps
8 steps, taken from the first numbered list in SKILL.md.
- Identify the site category: product/devtool, luxury/editorial, portfolio, hospitality, commerce, personal, agency, or content/media.
- Read sources.md for the relevant source clusters.
- When the user names a creator, asks for many examples, or uses a style shorthand, also read creator-and-pattern-index.md and…
- When Viktor Oddy or MotionSites is named, read motionsites-viktor-evidence.md and refresh any count or catalog claim that matters to the…
- Select enough distinct references for the open decision; 3–7 is a broad direction-study option, not a quota for a supplied exact reference.
- Extract concrete patterns: type, layout, density, media, motion, CTA, proof, navigation, section rhythm, and mobile behavior.
- State what not to copy.
- When implementation is in scope, add selected traits to the shared build spec; a reference-only request ends with the source-backed study.
What it can do on your machine
Read from SKILL.md and the folder at commit feff772. 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/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
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
Premium Visual Reference Library loads about 867 tokens when it runs, and up to ~83k if it reads all its reference files. Until then it costs about 20 tokens; SKILL.md has 414 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
The full file from TheGoat395/Codex-Skills at commit feff772, republished under its MIT licence (© TheGoat395). 414 words, ~867 tokens.
Download SKILL.mdSave it as
.claude/skills/premium-visual-reference-library/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.- name
- premium-visual-reference-library
- description
- Find references, Viktor Oddy and MotionSites.
Premium Visual Reference Library
Use this skill to pick reference sources before designing a premium website.
Workflow
- Identify the site category: product/devtool, luxury/editorial, portfolio, hospitality, commerce, personal, agency, or content/media.
- Read sources.md for the relevant source clusters.
- When the user names a creator, asks for many examples, or uses a style shorthand, also read creator-and-pattern-index.md and creator-methods-evidence.md.
- When Viktor Oddy or MotionSites is named, read motionsites-viktor-evidence.md and refresh any count or catalog claim that matters to the current project.
- Select enough distinct references for the open decision; 3–7 is a broad direction-study option, not a quota for a supplied exact reference.
- Extract concrete patterns: type, layout, density, media, motion, CTA, proof, navigation, section rhythm, and mobile behavior.
- State what not to copy.
- When implementation is in scope, add selected traits to the shared build spec; a reference-only request ends with the source-backed study.
Retrieve only the selected material
Use the bundled read-only helper from any working directory:
python3 "<skill-root>/scripts/query_catalog.py" --search "reorder" --limit 5
python3 "<skill-root>/scripts/query_catalog.py" --id M-01Resolve <skill-root> to this skill's actual installation. Search returns bounded discovery results; exact ID returns the original record with its provenance and limitations. The helper checks source fingerprints against the overlay, makes no external requests and writes nothing. If Python is unavailable, search the named JSON file for the selected ID and read that record plus its matching overlay record; no helper installation is required.
The four raw catalogs preserve 50 author-created style playbooks, 100 implementation leads, 22 dated creator-method interpretations and 20 historical video-study records. Repeated mechanism text is generic inference, not verified example code; repeated video-study text is synthesis, not independent per-video observation. Fixed palette, timing, target-size, frame-time and DPR values are illustrative starting choices, not universal standards or measured budgets. Inspect the selected live source and current technical documentation before relying on its actual behavior. Do not load or recrawl every catalog for one reference.
Show full SKILL.md (101 more words)Show less
Source Fidelity
Preserve exact user-supplied or user-owned prompts when requested. Otherwise use references to understand quality and label independent reconstructions accurately; do not claim third-party brand assets, copy, or unobserved behavior as owned or verified.
Use the matching record in the catalog provenance overlay before item-level evidence claims; the exact-ID helper includes it. Raw catalogs retain all original text/URLs unchanged. The overlay separates dated claims, generalized defaults and currently recoverable evidence. Generic repeated study text is not independently observed per-item evidence. Inspect exact selected references when reusing them; do not recrawl every catalog or assume all historical image paths still resolve.
© TheGoat395, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 11 other files (scripts, references) in skills/premium-visual-reference-library of TheGoat395/Codex-Skills.
- SKILL.md
- agents/openai.yaml
- references/catalog-provenance-overlay.json
- references/creator-and-pattern-index.md
- references/creator-method-cards.json
- references/creator-methods-evidence.md
- references/motionsites-viktor-evidence.md
- references/reference-example-patterns.json
- references/sources.md
- references/style-playbooks.json
- references/viktor-visual-studies.json
- scripts/query_catalog.py
Open the folder on GitHubat commit feff772
Compare with similar skills
Premium Visual Reference Library 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 |
|---|---|---|---|---|---|---|
| Premium Visual Reference Library this skillTheGoat395/Codex-Skills | 126 | — | ~867 | Automated safety check: Pass | MIT | |
| Architecture Mapalmendili/skills | 382 | 1 repos | ~2.3k | Automated safety check: Pass | None | |
| Hk Follow Breadcrumbdeepklarity/harness-kit | 100 | — | ~1.4k | Automated safety check: Notes | MIT | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None |
Similar skills
Hk Follow Breadcrumb
deepklarity/harness-kit
Consults existing breadcrumb analysis docs before exploring the codebase.
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
Codebase Knowledge Graph Q&A
Egonex-AI/Understand-Anything
Answers questions about a codebase by searching a prebuilt knowledge graph of its files, functions, classes and dependencies, not by rereading every source file.
More from TheGoat395/Codex-Skills
All 23 skills in this repoAgent Evaluation Operations
TheGoat395/Codex-Skills
Evaluate agent and skill behavior or routing. An agent skill from TheGoat395/Codex-Skills.
Creativity
TheGoat395/Codex-Skills
Generate original ideas or escape fixation. An agent skill from TheGoat395/Codex-Skills.
Final Client Handoff
TheGoat395/Codex-Skills
Prepare verified ownership and delivery notes. An agent skill from TheGoat395/Codex-Skills.
Visual Regression Lab
TheGoat395/Codex-Skills
Compare captures; stitch lazy/animated pages. An agent skill from TheGoat395/Codex-Skills.
Web Reference Research
TheGoat395/Codex-Skills
Analyze selected sources: Viktor or MotionSites. An agent skill from TheGoat395/Codex-Skills.
Code Change Safety Checkpoint
TheGoat395/Codex-Skills
Preserve rollback before materially risky edits. An agent skill from TheGoat395/Codex-Skills.
Related
Categories
Questions about Premium Visual Reference Library
What does Premium Visual Reference Library do?
Find references, Viktor Oddy and MotionSites. An agent skill from TheGoat395/Codex-Skills. Premium Visual Reference Library is an agent skill from TheGoat395/Codex-Skills. Find references, Viktor Oddy and MotionSites.
When should I use Premium Visual Reference Library?
Premium Visual Reference Library fits situations like: tasks that involve Codebase onboarding.
How do I install Premium Visual Reference Library in Claude Code?
Run `npx skills add TheGoat395/Codex-Skills --skill premium-visual-reference-library -a claude-code`. Or copy the skill folder (skills/premium-visual-reference-library in TheGoat395/Codex-Skills) into .claude/skills/premium-visual-reference-library in your project. Claude Code loads it when a task matches its description.
How do I install Premium Visual Reference Library in Codex?
Run `npx skills add TheGoat395/Codex-Skills --skill premium-visual-reference-library -a codex`. Or copy the skill folder (skills/premium-visual-reference-library in TheGoat395/Codex-Skills) into .agents/skills/premium-visual-reference-library in your project. Codex loads it when a task matches its description.
Can I use Premium Visual Reference Library 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 TheGoat395/Codex-Skills --skill premium-visual-reference-library -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/premium-visual-reference-library, .gemini/skills/premium-visual-reference-library, .github/skills/premium-visual-reference-library and .opencode/skills/premium-visual-reference-library in your project.
What does Premium Visual Reference Library need to run?
Going by SKILL.md and its folder, Premium Visual Reference Library needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Premium Visual Reference Library 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 Premium Visual Reference Library 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 Premium Visual Reference Library use?
Premium Visual Reference Library is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Premium Visual Reference Library use?
About 867 tokens (SKILL.md is roughly 3.5k 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 82k tokens, read only when the agent opens those files.
What are the alternatives to Premium Visual Reference Library?
Skills that share tags, products or a category with Premium Visual Reference Library: Architecture Map (almendili/skills, 382 stars), Hk Follow Breadcrumb (deepklarity/harness-kit, 100 stars), React Doctor (makeplane/plane, 61k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Premium Visual Reference Library?
TheGoat395 (a GitHub user) maintains it in TheGoat395/Codex-Skills, which has 126 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on September 11, 2026.
Source: TheGoat395/Codex-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.