Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, implementation, and verification reach them.
Install External Resource Context
$ npx skills add shinpr/claude-code-workflows --skill external-resource-context -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shinpr/claude-code-workflows external-resource-context --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/shinpr/claude-code-workflows.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/external-resource-context .claude/skills/external-resource-context && 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 "external-resource-context" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/external-resource-context into .claude/skills/external-resource-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "external-resource-context", 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/shinpr/claude-code-workflows/tree/main/skills/external-resource-contextType 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 shinpr/claude-code-workflows --skill external-resource-context -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shinpr/claude-code-workflows external-resource-context --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/external-resource-context .agents/skills/external-resource-context && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "external-resource-context" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/external-resource-context into .agents/skills/external-resource-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "external-resource-context", 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 shinpr/claude-code-workflows --skill external-resource-context -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shinpr/claude-code-workflows external-resource-context --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/external-resource-context .cursor/skills/external-resource-context && 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 "external-resource-context" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/external-resource-context into .cursor/skills/external-resource-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "external-resource-context", 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/shinpr/claude-code-workflows.git --path skills/external-resource-context--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 shinpr/claude-code-workflows --skill external-resource-context -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shinpr/claude-code-workflows external-resource-context --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/external-resource-context .gemini/skills/external-resource-context && 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 "external-resource-context" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/external-resource-context into .gemini/skills/external-resource-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "external-resource-context", 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 shinpr/claude-code-workflows external-resource-contextInstalls 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 shinpr/claude-code-workflows --skill external-resource-context -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/external-resource-context .github/skills/external-resource-context && 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 "external-resource-context" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/external-resource-context into .github/skills/external-resource-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "external-resource-context", 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 shinpr/claude-code-workflows --skill external-resource-context -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shinpr/claude-code-workflows external-resource-context --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shinpr/claude-code-workflows.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/external-resource-context .opencode/skills/external-resource-context && 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 "external-resource-context" agent skill from https://github.com/shinpr/claude-code-workflows/tree/main/skills/external-resource-context into .opencode/skills/external-resource-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "external-resource-context", 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
external-resource-context- GitHub stars
- 691
- Token cost
- ~1.1k tokens
- SKILL.md length
- 506 words
- Files
- 7 (incl. references)
- Skills in repo
- 30
- Repo updated
- First seen
- Licence
- MIT
At a glance
Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, implementation, and verification reach them.
- Works in 3 steps: Read… → Read the target UI Spec or Design Doc's… → Use the access method declared in the…
- Work depends on an external resource
- SKILL.md covers Purpose, Storage Locations (Two-Tier), Reference Protocol (For… and Capturing and Updating Records, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
External Resource Context is an agent skill from shinpr/claude-code-workflows. Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, implementation, and verification reach them. Use when work depends on an external resource, or when the user mentions design source, design system, API schema, IaC source, secret store, or canonical source.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/api.md`, `references/backend.md` and `references/frontend.md`).
It sits in Frontend & Design, covering OpenAPI specifications and Design systems. The repository describes itself as: Development workflows for Claude Code that keep broad exploration focused on the outcome you approved. The licence is MIT.
When your agent uses it
- Work depends on an external resource
- The user mentions design source
- Canonical source
Example prompts
- “Use the external-resource-context skill to record where resources outside the repository live (design source, design system, API schema, IaC source…”
- “/external-resource-context”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Read docs/project-context/external-resources.md (if present) to learn what is available and how to access it.
- Read the target UI Spec or Design Doc's ## External Resources Used section for feature-specific identifiers.
- Use the access method declared in the project tier (e.g., the named MCP, the URL, the file path) to fetch the actual resource content.
What it can do on your machine
Read from SKILL.md and the folder at commit a4ecd62. 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
No scripts in the folder and no shell commands in SKILL.md.
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
External Resource Context loads about 1.1k tokens when it runs, and up to ~5.5k if it reads all its reference files. Until then it costs about 92 tokens; SKILL.md has 506 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); files beside SKILL.md are not scanned.
SKILL.md
The full file from shinpr/claude-code-workflows at commit a4ecd62, republished under its MIT licence (© shinpr). 506 words, ~1,130 tokens.
Download SKILL.mdSave it as
.claude/skills/external-resource-context/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.- name
- external-resource-context
- description
- Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, implementation, and verification reach them. Use when work depends on an external resource, or when the user mentions design source, design system, API schema, IaC source, secret store, or canonical source.
External Resource Context
Purpose
Repository evidence does not contain every external resource surrounding a system. This skill captures, in a deterministic location, the access methods to resources outside the repository so downstream work (design, planning, implementation, review) can reach them without repeatedly rediscovering access details.
Resources covered: design origin (where the canonical visual specification lives), design system (component library and tokens), guidelines (usage docs, accessibility rules), visual verification environment (how to confirm rendering), database schema source, migration history, secret store location, API schema source (OpenAPI / proto / GraphQL SDL), mock environment, IaC source, environment configuration.
Storage Locations (Two-Tier)
| Tier | Location | Holds | Update Frequency |
|---|---|---|---|
| Project | docs/project-context/external-resources.md | Environment-stable facts: which resources exist for this project and how to access them (URL, MCP name, file path, command) | Rare — only when the project's environment changes |
| Feature | ## External Resources Used section inside the relevant UI Spec or Design Doc | The subset of project-tier resources actually used by this feature, plus feature-specific identifiers (e.g., a specific node id within the design tool, a specific endpoint path) | Per feature |
Single Source of Truth Rule
The project tier owns environment facts. Feature-tier sections list only feature-specific identifiers (node id within the design source, specific endpoint path within the API, specific IaC module name) and reference project-tier entries by label; URLs, MCP names, and access commands remain in the project-tier file. When the environment changes, only the project-tier file is updated.
Example feature-tier entry uses the table format defined in references/template.md: a row with the project-tier label in the first column and the feature-specific identifier in the second column.
Show full SKILL.md (247 more words)Show less
Reference Protocol (For Downstream Consumers)
Before investigating the repository for an external fact, check whether it is already recorded:
- Read
docs/project-context/external-resources.md(if present) to learn what is available and how to access it. - Read the target UI Spec or Design Doc's
## External Resources Usedsection for feature-specific identifiers. - Use the access method declared in the project tier (e.g., the named MCP, the URL, the file path) to fetch the actual resource content.
When the file is absent or the resource is unreachable, continue from governing and repository evidence. Each consumer records the limitation in its applicable output.
Capturing and Updating Records
Capturing a record requires an interactive hearing. The workflow using this skill owns the interaction mechanism and routing. Follow references/hearing.md for the hearing conditions, domain routing, two-phase hearing, storage protocol, and quality checklist.
Output Format
The project-tier file follows the structure in references/template.md. The project-tier file's heading levels and section names are fixed so downstream agents can locate sections deterministically.
For feature-tier sections inside UI Spec or Design Doc, the heading text "External Resources Used" is fixed; the heading level matches the parent document's natural structure (h2 in UI Spec where it is a sibling of other top-level sections, h3 in Design Doc where it sits under Background and Context).
References
- references/hearing.md — Hearing conditions, domain routing, storage protocol, quality checklist
- references/frontend.md — Frontend domain axes
- references/backend.md — Backend domain axes
- references/api.md — API contract domain axes
- references/infra.md — Infrastructure domain axes
- references/template.md — Project-tier and feature-tier structure templates
© shinpr, 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 6 other files (references) in skills/external-resource-context of shinpr/claude-code-workflows.
- SKILL.md
- references/api.md
- references/backend.md
- references/frontend.md
- references/hearing.md
- references/infra.md
- references/template.md
Open the folder on GitHubat commit a4ecd62
Compare with similar skills
External Resource Context 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 |
|---|---|---|---|---|---|---|
| External Resource Context this skillshinpr/claude-code-workflows | 691 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Vue Componentsscalar/scalar | 16k | — | ~886 | Automated safety check: Pass | MIT | |
| Monstermq Dashboard Developervogler75/monster-mq | 143 | — | ~1.8k | Automated safety check: Pass | GPL-3.0 | |
| Fumadocscompozy/compozy | 2.8k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT |
Similar skills
Vue Components
scalar/scalar
Build Vue 3 components with TypeScript and Tailwind using clean structure, composable logic, accessibility, and maintainable patterns.
Monstermq Dashboard Developer
vogler75/monster-mq
Guide for developing the MonsterMQ web dashboard. An agent skill from vogler75/monster-mq.
Fumadocs
compozy/compozy
Set up, customize, or troubleshoot Fumadocs Core/MDX/UI: adapters, loaders, navigation/layouts, search, MDX components, OpenAPI, OG images, exports, and i18n.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
More from shinpr/claude-code-workflows
All 30 skills in this repoIntegration E2E Testing
shinpr/claude-code-workflows
Integration and E2E test design principles, ROI calculation, test skeleton specification, and review criteria.
AI Development Guide
shinpr/claude-code-workflows
Applies language-agnostic and backend technical decision criteria, anti-pattern detection, debugging, and quality gates.
Frontend AI Guide
shinpr/claude-code-workflows
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates.
Implementation Approach
shinpr/claude-code-workflows
Implementation strategy selection framework. An agent skill from shinpr/claude-code-workflows.
Recipe Quality Profile
shinpr/claude-code-workflows
Proposes repository-specific quality policy for implementation and review and, after confirmation, creates or updates docs/project-context/quality.yaml.
Subagents Orchestration Guide
shinpr/claude-code-workflows
Guides subagent coordination through implementation workflows.
Related
Categories
Questions about External Resource Context
What does External Resource Context do?
Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, implementation, and verification reach them. External Resource Context is an agent skill from shinpr/claude-code-workflows. Records where resources outside the repository live (design source, design system, API schema, IaC source, secret store) and how design, implementation, and verification reach them.
When should I use External Resource Context?
External Resource Context fits situations like: work depends on an external resource; the user mentions design source; canonical source.
How do I install External Resource Context in Claude Code?
Run `npx skills add shinpr/claude-code-workflows --skill external-resource-context -a claude-code`. Or copy the skill folder (skills/external-resource-context in shinpr/claude-code-workflows) into .claude/skills/external-resource-context in your project. Claude Code loads it when a task matches its description.
How do I install External Resource Context in Codex?
Run `npx skills add shinpr/claude-code-workflows --skill external-resource-context -a codex`. Or copy the skill folder (skills/external-resource-context in shinpr/claude-code-workflows) into .agents/skills/external-resource-context in your project. Codex loads it when a task matches its description.
Can I use External Resource Context 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 shinpr/claude-code-workflows --skill external-resource-context -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/external-resource-context, .gemini/skills/external-resource-context, .github/skills/external-resource-context and .opencode/skills/external-resource-context in your project.
What does External Resource Context need to run?
SKILL.md names no scripts, command-line tools or credentials: External Resource Context is instructions for the agent only.
Does External Resource Context 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 External Resource Context 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. Review the folder before installing.
What licence does External Resource Context use?
External Resource Context 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 External Resource Context use?
About 1.1k tokens (SKILL.md is roughly 4.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 4.3k tokens, read only when the agent opens those files.
What are the alternatives to External Resource Context?
Skills that share tags, products or a category with External Resource Context: Scalar Design System (scalar/scalar, 16k stars), Vue Components (scalar/scalar, 16k stars), Monstermq Dashboard Developer (vogler75/monster-mq, 143 stars) and Fumadocs (compozy/compozy, 2.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains External Resource Context?
shinpr (a GitHub user) maintains it in shinpr/claude-code-workflows, which has 691 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 1, 2026.
Source: shinpr/claude-code-workflows on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.