personal-site-skill-map
Updates skill graph data and interactive components for the personal site.
Install
mkdir -p .claude/skills/personal-site-skill-map && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12923" && unzip -o skill.zip -d .claude/skills/personal-site-skill-map && rm skill.zipInstalls to .claude/skills/personal-site-skill-map
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use this project-local skill when changing the interactive skills page, SkillsGraph, SkillPopover, React Flow layout, ELK skill dependencies, or skill data relationships.Key capabilities
- →Load component behavior and interaction rules from `skill-map.md`.
- →Load data and content rules from `data-and-content.md` when editing `src/lib/skills.ts`.
- →Verify with `npm run build` and browser interaction on `/en/skills`.
- →Preserve search focus, node zoom, and popover placement.
- →Maintain prerequisite and enable navigation.
How it works
This skill guides modifications to the interactive skills page by referencing specific documentation files and ensuring consistency in skill relationships and interaction behaviors. It requires verification through build and browser interaction.
Inputs & outputs
When to use personal-site-skill-map
- →Updating skill dependencies
- →Modifying skills graph layout
- →Editing skill popover content
About this skill
Personal Site Skill Map
Workflow
- Read
AGENTS.md, then load:.codex/references/skill-map.mdfor component behavior and interaction rules..codex/references/data-and-content.mdwhen editingsrc/lib/skills.ts..codex/references/verification.mdbefore final testing.
- Keep skill relationships consistent:
dependenciesshould point to existing skill ids.unlocksshould reflect the inverse relationship where it matters for navigation.- Category ids must match
categoriesData.
- When editing interactions, preserve search focus, node zoom, popover placement, and prerequisite/unlock navigation.
- Verify with
npm run buildand browser interaction on/en/skills.
Implementation Notes
SkillsGraph.tsxowns filtering, React Flow nodes/edges, ELK layout, zoom, and popover state.SkillPopover.tsxowns detail content and callsonSkillSelectfor relationship navigation.- Prefer small, targeted interaction changes over replacing React Flow or ELK.
When not to use it
- →When replacing React Flow.
- →When replacing ELK.
Limitations
- →Requires reading `AGENTS.md`.
- →Requires reading `.codex/references/skill-map.md`.
- →Requires reading `.codex/references/data-and-content.md` when editing `src/lib/skills.ts`.
How it compares
This skill provides a project-local, documented workflow for modifying the interactive skill map, ensuring consistency in data relationships and preserving user interaction elements, unlike unguided changes.
Compared to similar skills
personal-site-skill-map side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| personal-site-skill-map (this skill) | 0 | 2mo | No flags | Intermediate |
| writing-registry-meta | 5 | 7mo | No flags | Beginner |
| tsx | 0 | 2mo | Review | Beginner |
| React + Ant Design Frontend | 0 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
writing-registry-meta
siriwatknp
Use this skill when writing meta file for MUI Treasury registry.
tsx
javimosch
TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.
React + Ant Design Frontend
daithang-organization
Complete guide for the SE104_VLEAGUE React frontend — pages, services, components, auth flow, i18n, and patterns
mcscatblog-react-widget
microsoft
Build and embed a React widget into a Jekyll blog post as a self-contained HTML file
new-component
7sferry
Scaffold a new React component following project conventions
mcp-integration
Siamese001
Use this skill when choosing among repository-configured MCP servers, diagnosing MCP availability, or coordinating a cross-server workflow. Use adg-sqlite directly for structural dependency analysis.