Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
A skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…
$ npx skills add MadAppGang/claude-code --skill context-detection -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install MadAppGang/claude-code context-detection --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/MadAppGang/claude-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/dev/skills/context-detection .claude/skills/context-detection && 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 "context-detection" agent skill from https://github.com/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detection into .claude/skills/context-detection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "context-detection", 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/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detectionType 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 MadAppGang/claude-code --skill context-detection -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install MadAppGang/claude-code context-detection --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/dev/skills/context-detection .agents/skills/context-detection && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "context-detection" agent skill from https://github.com/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detection into .agents/skills/context-detection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "context-detection", 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 MadAppGang/claude-code --skill context-detection -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install MadAppGang/claude-code context-detection --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/dev/skills/context-detection .cursor/skills/context-detection && 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 "context-detection" agent skill from https://github.com/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detection into .cursor/skills/context-detection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "context-detection", 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/MadAppGang/claude-code.git --path plugins/dev/skills/context-detection--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 MadAppGang/claude-code --skill context-detection -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install MadAppGang/claude-code context-detection --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/dev/skills/context-detection .gemini/skills/context-detection && 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 "context-detection" agent skill from https://github.com/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detection into .gemini/skills/context-detection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "context-detection", 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 MadAppGang/claude-code context-detectionInstalls 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 MadAppGang/claude-code --skill context-detection -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/dev/skills/context-detection .github/skills/context-detection && 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 "context-detection" agent skill from https://github.com/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detection into .github/skills/context-detection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "context-detection", 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 MadAppGang/claude-code --skill context-detection -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install MadAppGang/claude-code context-detection --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MadAppGang/claude-code.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/dev/skills/context-detection .opencode/skills/context-detection && 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 "context-detection" agent skill from https://github.com/MadAppGang/claude-code/tree/main/plugins/dev/skills/context-detection into .opencode/skills/context-detection/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "context-detection", 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.
context-detectionA skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…
Context Detection is an agent skill from MadAppGang/claude-code. Use when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g., React + Go).
Its SKILL.md is about 5.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including scripts (for example `scripts/discover-skills.js`).
It works with React. The repository describes itself as: claude code plugins marketplace. The licence is MIT.
4 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 6097ad4. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
Bash(node *)From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
jqnodepythonFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context Detection loads about 5.4k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 451 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.
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.
The full file from MadAppGang/claude-code at commit 6097ad4, republished under its MIT licence (© MadAppGang). 451 words, ~5,376 tokens.
.claude/skills/context-detection/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.Run the helper script to discover ALL skills available to a project:
node "${CLAUDE_PLUGIN_ROOT}/skills/context-detection/scripts/discover-skills.js" "$(pwd)"This searches all 7 official Claude Code skill locations:
~/.claude/skills/.claude/skills/**/.claude/skills/.claude/commands/~/.claude/plugins/marketplaces/{m}/plugins/{p}/skills/.claude-plugin/skills/, plugins/*/skills/Output: JSON with summary stats and full skill metadata.
For detailed documentation on the script, see scripts/discover-skills.js.
The context detection skill provides systematic patterns for analyzing any project to determine its technology stack(s). It enables the dev plugin to auto-load appropriate framework-specific skills based on what's actually in the project.
Key Innovation: Multi-stack detection for fullstack projects (e.g., React + Go).
Detection follows a priority order from most explicit to most inferred:
Source: .claude/settings.json
{
"pluginSettings": {
"dev": {
"stack": ["react-typescript", "golang"],
"features": {
"testing": "vitest",
"api": "rest"
}
}
}
}When to use:
Source: File extension of current editing context
extension_mappings:
".tsx": ["react-typescript", "testing-frontend"]
".vue": ["vue-typescript", "testing-frontend"]
".go": ["golang", "testing-strategies"]
".dingo": ["dingo", "golang", "testing-strategies"]
".rs": ["rust", "testing-strategies"]
".py": ["python", "testing-strategies"]When to use:
Source: Project configuration files
config_file_patterns:
package.json:
check: "dependencies.react exists"
skills: ["react-typescript", "state-management", "testing-frontend"]
mode: "frontend"
package.json:
check: "dependencies.vue exists"
skills: ["vue-typescript", "state-management", "testing-frontend"]
mode: "frontend"
go.mod:
check: "file exists"
skills: ["golang", "api-design", "database-patterns"]
mode: "backend"
go.mod + *.dingo:
check: "go.mod exists AND any .dingo files present"
skills: ["dingo", "golang", "api-design", "database-patterns"]
mode: "backend"
note: "Dingo projects always include golang skill since Dingo transpiles to Go"
Cargo.toml:
check: "file exists"
skills: ["rust", "api-design"]
mode: "backend"
pyproject.toml:
check: "file exists"
skills: ["python", "api-design"]
mode: "backend"
bun.lockb:
check: "file exists AND no react/vue in package.json"
skills: ["bunjs", "api-design"]
mode: "backend"When to use:
Source: Common directory layouts
directory_patterns:
"src/routes/":
indicator: "React Router structure"
skills: ["react-typescript"]
"src/components/":
indicator: "Component-based frontend"
skills: ["react-typescript", "vue-typescript"]
"cmd/":
indicator: "Go standard project layout"
skills: ["golang"]
"src/main.rs":
indicator: "Rust binary crate"
skills: ["rust"]
"frontend/":
indicator: "Separate frontend directory (fullstack)"
note: "Check for backend/ as well"
"backend/":
indicator: "Separate backend directory (fullstack)"
note: "Check for frontend/ as well"When to use:
CRITICAL: Always check for MULTIPLE stacks. Projects can be fullstack.
# Step 1: Find ALL config files (not just first match)
find_all_configs() {
configs=()
[ -f "package.json" ] && configs+=("package.json")
[ -f "go.mod" ] && configs+=("go.mod")
[ -f "Cargo.toml" ] && configs+=("Cargo.toml")
[ -f "pyproject.toml" ] && configs+=("pyproject.toml")
[ -f "bun.lockb" ] && configs+=("bun.lockb")
# Check for Dingo files (go.mod must also exist)
# Note: "dingo" is a detection indicator, not an actual config file name
if [ -f "go.mod" ] && find . -name "*.dingo" -type f ! -path "./.git/*" ! -path "./node_modules/*" ! -path "./vendor/*" -print -quit | grep -q .; then
configs+=("dingo")
fi
echo "${configs[@]}"
}
# Step 2: Analyze EACH config file
analyze_all_configs() {
local detected_stacks=()
# Check package.json
if [ -f "package.json" ]; then
if grep -q '"react"' package.json; then
detected_stacks+=("react-typescript")
elif grep -q '"vue"' package.json; then
detected_stacks+=("vue-typescript")
fi
fi
# Check go.mod (and optionally Dingo)
if [ -f "go.mod" ]; then
# Check if this is a Dingo project
if find . -name "*.dingo" -type f ! -path "./.git/*" ! -path "./node_modules/*" ! -path "./vendor/*" -print -quit | grep -q .; then
detected_stacks+=("dingo")
# Dingo always co-loads golang
detected_stacks+=("golang")
else
detected_stacks+=("golang")
fi
fi
# Check Cargo.toml
if [ -f "Cargo.toml" ]; then
detected_stacks+=("rust")
fi
# Check pyproject.toml
if [ -f "pyproject.toml" ]; then
detected_stacks+=("python")
fi
# Check bun.lockb (only if NOT frontend)
if [ -f "bun.lockb" ] && ! grep -q '"react"\|"vue"' package.json 2>/dev/null; then
detected_stacks+=("bunjs")
fi
echo "${detected_stacks[@]}"
}
# Step 3: Determine mode
determine_mode() {
local stacks=("$@")
local has_frontend=false
local has_backend=false
for stack in "${stacks[@]}"; do
case "$stack" in
react-typescript|vue-typescript)
has_frontend=true
;;
golang|rust|python|bunjs|dingo)
has_backend=true
;;
esac
done
if [ "$has_frontend" = true ] && [ "$has_backend" = true ]; then
echo "fullstack"
elif [ "$has_frontend" = true ]; then
echo "frontend"
elif [ "$has_backend" = true ]; then
echo "backend"
else
echo "unknown"
fi
}
# Step 4: Map stacks to skills
map_stacks_to_skills() {
local stacks=("$@")
local skills=(
# Core skills (ALWAYS included)
"universal-patterns"
"testing-strategies"
"debugging-strategies"
)
for stack in "${stacks[@]}"; do
case "$stack" in
react-typescript)
skills+=("react-typescript" "state-management" "testing-frontend")
;;
vue-typescript)
skills+=("vue-typescript" "state-management" "testing-frontend")
;;
golang)
skills+=("golang" "api-design" "database-patterns")
;;
dingo)
skills+=("dingo" "golang" "api-design" "database-patterns")
;;
rust)
skills+=("rust" "api-design")
;;
python)
skills+=("python" "api-design")
;;
bunjs)
skills+=("bunjs" "api-design")
;;
esac
done
# Deduplicate
echo "${skills[@]}" | tr ' ' '\n' | sort -u
}
# Step 5: Complete detection
detect_project_stack() {
# Check explicit preference first
local explicit_stack=$(jq -r '.pluginSettings.dev.stack // empty' .claude/settings.json 2>/dev/null)
if [ -n "$explicit_stack" ]; then
echo "Using explicit stack from .claude/settings.json"
return
fi
# Auto-detect all stacks
local detected_stacks=($(analyze_all_configs))
if [ ${#detected_stacks[@]} -eq 0 ]; then
echo "ERROR: No stack detected"
return 1
fi
# Determine mode
local mode=$(determine_mode "${detected_stacks[@]}")
# Map to skills
local skills=($(map_stacks_to_skills "${detected_stacks[@]}"))
# Output result
echo "Detected: ${detected_stacks[*]}"
echo "Mode: $mode"
echo "Skills: ${skills[*]}"
}detect_react() {
# Check package.json
if [ -f "package.json" ]; then
# React in dependencies or devDependencies
if jq -e '.dependencies.react // .devDependencies.react' package.json >/dev/null 2>&1; then
# Check for TypeScript
local has_typescript=false
if jq -e '.dependencies["@types/react"] // .devDependencies["@types/react"]' package.json >/dev/null 2>&1; then
has_typescript=true
fi
# Get version
local react_version=$(jq -r '.dependencies.react // .devDependencies.react' package.json | sed 's/[^0-9.]//g')
echo "react-typescript"
echo "version: $react_version"
echo "typescript: $has_typescript"
return 0
fi
fi
return 1
}detect_vue() {
if [ -f "package.json" ]; then
if jq -e '.dependencies.vue' package.json >/dev/null 2>&1; then
local vue_version=$(jq -r '.dependencies.vue' package.json | sed 's/[^0-9.]//g')
echo "vue-typescript"
echo "version: $vue_version"
return 0
fi
fi
return 1
}detect_go() {
if [ -f "go.mod" ]; then
local go_version=$(grep '^go ' go.mod | awk '{print $2}')
local module_name=$(grep '^module ' go.mod | awk '{print $2}')
echo "golang"
echo "version: $go_version"
echo "module: $module_name"
return 0
fi
return 1
}detect_rust() {
if [ -f "Cargo.toml" ]; then
local package_name=$(grep '^\[package\]' -A 5 Cargo.toml | grep '^name' | cut -d'"' -f2)
local edition=$(grep '^\[package\]' -A 5 Cargo.toml | grep '^edition' | cut -d'"' -f2)
echo "rust"
echo "edition: $edition"
echo "package: $package_name"
return 0
fi
return 1
}detect_python() {
if [ -f "pyproject.toml" ]; then
local has_fastapi=$(grep -i 'fastapi' pyproject.toml)
local has_django=$(grep -i 'django' pyproject.toml)
echo "python"
[ -n "$has_fastapi" ] && echo "framework: fastapi"
[ -n "$has_django" ] && echo "framework: django"
return 0
fi
return 1
}detect_bun() {
# Bun backend (NOT frontend with Bun runtime)
if [ -f "bun.lockb" ]; then
# Check if this is a frontend project
if [ -f "package.json" ]; then
if jq -e '.dependencies.react // .dependencies.vue' package.json >/dev/null 2>&1; then
# This is frontend using Bun runtime, not Bun backend
return 1
fi
fi
# This is a Bun backend project
echo "bunjs"
return 0
fi
return 1
}Quality checks are automatically determined based on detected stack(s):
react-typescript:
- command: "bun run format"
tool: "Biome"
purpose: "Code formatting"
- command: "bun run lint"
tool: "Biome"
purpose: "Linting"
- command: "bun run typecheck"
tool: "TypeScript"
purpose: "Type checking"
- command: "bun test"
tool: "Vitest"
purpose: "Unit tests"
vue-typescript:
- command: "bun run format"
tool: "Biome"
- command: "bun run lint"
tool: "Biome"
- command: "bun run typecheck"
tool: "TypeScript"
- command: "bun test"
tool: "Vitest"golang:
- command: "go fmt ./..."
purpose: "Format Go code"
- command: "go vet ./..."
purpose: "Static analysis"
- command: "golangci-lint run"
purpose: "Comprehensive linting"
- command: "go test ./..."
purpose: "Run tests"
dingo:
- command: "dingo fmt"
purpose: "Format Dingo source files"
- command: "dingo go"
purpose: "Transpile Dingo to Go"
- command: "go vet ./.dingo/..."
purpose: "Static analysis on generated Go"
- command: "golangci-lint run ./.dingo/..."
purpose: "Comprehensive linting on generated Go"
- command: "go test ./.dingo/..."
purpose: "Run tests on generated Go"
rust:
- command: "cargo fmt --check"
purpose: "Check formatting"
- command: "cargo clippy -- -D warnings"
purpose: "Linting"
- command: "cargo test"
purpose: "Run tests"
python:
- command: "black --check ."
purpose: "Check formatting"
- command: "ruff check ."
purpose: "Linting"
- command: "mypy ."
purpose: "Type checking"
- command: "pytest"
purpose: "Run tests"
bunjs:
- command: "bun run format"
tool: "Biome"
- command: "bun run lint"
tool: "Biome"
- command: "bun run typecheck"
tool: "TypeScript"
- command: "bun test"
tool: "Bun test runner"For fullstack projects, run checks for BOTH stacks:
fullstack (react + go):
frontend:
directory: "./frontend"
checks:
- "cd frontend && bun run format"
- "cd frontend && bun run lint"
- "cd frontend && bun run typecheck"
- "cd frontend && bun test"
backend:
directory: "."
checks:
- "go fmt ./..."
- "go vet ./..."
- "golangci-lint run"
- "go test ./..."Convert detected stacks to skill file paths using ${PLUGIN_ROOT} placeholder:
generate_skill_paths() {
local stacks=("$@")
local skill_paths=(
# Core skills (ALWAYS)
'${PLUGIN_ROOT}/skills/core/universal-patterns/SKILL.md'
'${PLUGIN_ROOT}/skills/core/testing-strategies/SKILL.md'
'${PLUGIN_ROOT}/skills/core/debugging-strategies/SKILL.md'
)
for stack in "${stacks[@]}"; do
case "$stack" in
react-typescript)
skill_paths+=(
'${PLUGIN_ROOT}/skills/frontend/react-typescript/SKILL.md'
'${PLUGIN_ROOT}/skills/frontend/state-management/SKILL.md'
'${PLUGIN_ROOT}/skills/frontend/testing-frontend/SKILL.md'
)
;;
vue-typescript)
skill_paths+=(
'${PLUGIN_ROOT}/skills/frontend/vue-typescript/SKILL.md'
'${PLUGIN_ROOT}/skills/frontend/state-management/SKILL.md'
'${PLUGIN_ROOT}/skills/frontend/testing-frontend/SKILL.md'
)
;;
golang)
skill_paths+=(
'${PLUGIN_ROOT}/skills/backend/golang/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/database-patterns/SKILL.md'
)
;;
dingo)
skill_paths+=(
'${PLUGIN_ROOT}/skills/backend/dingo/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/golang/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/database-patterns/SKILL.md'
)
;;
rust)
skill_paths+=(
'${PLUGIN_ROOT}/skills/backend/rust/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md'
)
;;
python)
skill_paths+=(
'${PLUGIN_ROOT}/skills/backend/python/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md'
)
;;
bunjs)
skill_paths+=(
'${PLUGIN_ROOT}/skills/backend/bunjs/SKILL.md'
'${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md'
)
;;
esac
done
# Print unique paths
printf '%s\n' "${skill_paths[@]}" | sort -u
}CRITICAL: Always use ${PLUGIN_ROOT} placeholder, NOT hardcoded paths. This placeholder is expanded at runtime to the actual plugin directory.
error: "no_stack_detected"
trigger: "No config files found AND no recognizable directory structure"
recovery:
1. Prompt user for manual stack selection
2. Offer generic "unknown" stack with only core skills
3. Save user choice to ${SESSION_PATH}/context.json
4. Proceed with core skills onlyerror: "ambiguous_stack"
trigger: "Multiple possible interpretations"
recovery:
1. Present all possibilities to user
2. Ask for confirmation
3. Save confirmed stack to contexterror: "incomplete_detection"
trigger: "Found some indicators but missing key files"
recovery:
1. Report partial detection
2. Load available skills
3. Warn user about potential missing skillsProject Structure:
project/
├── package.json (with react: "^19.0.0")
├── src/
│ ├── routes/
│ └── components/
└── .tsx filesDetection Result:
{
"detected_stack": "react-typescript",
"mode": "frontend",
"stacks": ["react-typescript"],
"skill_paths": [
"${PLUGIN_ROOT}/skills/core/universal-patterns/SKILL.md",
"${PLUGIN_ROOT}/skills/core/testing-strategies/SKILL.md",
"${PLUGIN_ROOT}/skills/frontend/react-typescript/SKILL.md",
"${PLUGIN_ROOT}/skills/frontend/state-management/SKILL.md",
"${PLUGIN_ROOT}/skills/frontend/testing-frontend/SKILL.md"
]
}Project Structure:
project/
├── go.mod
├── cmd/
│ └── server/
└── internal/Detection Result:
{
"detected_stack": "golang",
"mode": "backend",
"stacks": ["golang"],
"skill_paths": [
"${PLUGIN_ROOT}/skills/core/universal-patterns/SKILL.md",
"${PLUGIN_ROOT}/skills/core/testing-strategies/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/golang/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/database-patterns/SKILL.md"
]
}Project Structure:
project/
├── frontend/
│ ├── package.json (with react)
│ └── src/
├── go.mod
├── cmd/
└── internal/Detection Result:
{
"detected_stack": "react-typescript + golang",
"mode": "fullstack",
"stacks": ["react-typescript", "golang"],
"skill_paths": [
"${PLUGIN_ROOT}/skills/core/universal-patterns/SKILL.md",
"${PLUGIN_ROOT}/skills/core/testing-strategies/SKILL.md",
"${PLUGIN_ROOT}/skills/frontend/react-typescript/SKILL.md",
"${PLUGIN_ROOT}/skills/frontend/state-management/SKILL.md",
"${PLUGIN_ROOT}/skills/frontend/testing-frontend/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/golang/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/database-patterns/SKILL.md"
],
"quality_checks": {
"frontend": ["cd frontend && bun run format", "..."],
"backend": ["go fmt ./...", "..."]
}
}Project Structure:
project/
├── go.mod
├── cmd/
│ └── api/
│ └── main.dingo
├── internal/
│ ├── handlers/
│ │ └── user.dingo
│ └── services/
│ └── user.dingo
└── .dingo/ # Generated .go files (gitignored)Detection Result:
{
"detected_stack": "dingo + golang",
"mode": "backend",
"stacks": ["dingo", "golang"],
"skill_paths": [
"${PLUGIN_ROOT}/skills/core/universal-patterns/SKILL.md",
"${PLUGIN_ROOT}/skills/core/testing-strategies/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/dingo/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/golang/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/api-design/SKILL.md",
"${PLUGIN_ROOT}/skills/backend/database-patterns/SKILL.md"
],
"quality_checks": {
"backend": [
"dingo fmt",
"dingo go",
"go vet ./.dingo/...",
"golangci-lint run ./.dingo/...",
"go test ./.dingo/..."
]
}
}The stack-detector agent implements this skill:
Commands read context.json and pass skill paths to implementation agents:
Task: universal-developer
Prompt: |
SESSION_PATH: ${SESSION_PATH}
Read these skills before implementing:
- ${PLUGIN_ROOT}/skills/frontend/react-typescript/SKILL.md
- ${PLUGIN_ROOT}/skills/frontend/testing-frontend/SKILL.md
Then implement: Create user profile componentAgents use Read tool to load skill files:
1. Read skill file paths from prompt
2. Use Read tool to load each skill
3. Extract relevant patterns
4. Apply patterns during implementation© MadAppGang, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 1 other file (scripts) in plugins/dev/skills/context-detection of MadAppGang/claude-code.
Open the folder on GitHubat commit 6097ad4
Context Detection 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 |
|---|---|---|---|---|---|---|
| Context Detection this skillMadAppGang/claude-code | 285 | — | ~5.4k | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | 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 |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
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.
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.
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.
iOfficeAI/AionUi
Tells the agent where new code belongs in an Electron multi-process project and which APIs each process may use, with rules for new bridges, services, agents and workers.
MadAppGang/claude-code
Content brief template and creation methodology for SEO-optimized content.
MadAppGang/claude-code
On-page SEO optimization techniques including keyword density, meta tags, heading structure, and readability.
MadAppGang/claude-code
Techniques for expanding seed keywords and clustering by topic and intent.
MadAppGang/claude-code
SERP analysis techniques for intent classification, feature identification, and competitive intelligence.
MadAppGang/claude-code
A skill your agent uses when deciding whether to launch an agent, selecting which agent to use, or coordinating multiple agents.
MadAppGang/claude-code
Multi-agent orchestration enforcement for /team command. An agent skill from MadAppGang/claude-code.
Works with
A skill your agent uses when detecting project technology stack from files/configs/directory structure, auto-loading framework-specific skills, or analyzing multi-stack fullstack projects (e.g…. Context Detection is an agent skill from MadAppGang/claude-code., React + Go).
Context Detection fits situations like: detecting project technology stack from files/configs/directory structure; auto-loading framework-specific skills; analyzing multi-stack fullstack projects (e.g.
Run `npx skills add MadAppGang/claude-code --skill context-detection -a claude-code`. Or copy the skill folder (plugins/dev/skills/context-detection in MadAppGang/claude-code) into .claude/skills/context-detection in your project. Claude Code loads it when a task matches its description.
Run `npx skills add MadAppGang/claude-code --skill context-detection -a codex`. Or copy the skill folder (plugins/dev/skills/context-detection in MadAppGang/claude-code) into .agents/skills/context-detection in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add MadAppGang/claude-code --skill context-detection -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/context-detection, .gemini/skills/context-detection, .github/skills/context-detection and .opencode/skills/context-detection in your project.
Going by SKILL.md and its folder, Context Detection needs JavaScript for the scripts in its folder and the command-line tools its instructions call (jq, node and python). Our summary lists: Python 3; Node.js. Its frontmatter pre-approves these tools: Bash(node *).
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.
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.
Context Detection is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 5.4k tokens (SKILL.md is roughly 22k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Context Detection: Web Artifacts Builder (anthropics/skills, 180k stars), Vercel Composition Patterns (supabase/supabase, 111k 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.
MadAppGang (a GitHub organization) maintains it in MadAppGang/claude-code, which has 285 GitHub stars. The repository holds 69 skills in this directory. The repository was last updated on March 15, 2026.
Source: MadAppGang/claude-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.