Source profileQuality 77/100
nexu-io/open-design/plugins/_official/examples/codex-interactive-capability-map/SKILL.md
codex-interactive-capability-map
Turn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.
- Source repository stars
- 82,073
- Declared platforms
- 1
- Static risk flags
- 0
- Last source update
- 2026-07-28
- Source checked
- 2026-07-28
Decision brief
What it does—and where it fits
Transform a long article, social thread, memo, product essay, or launch narrative into a visual explainer that people can scan and click through.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Declared | Source record | Install path and trigger |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/codex-interactive-capability-map"Safe inspection promptEditorial
Inspect the Agent Skill "codex-interactive-capability-map" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/plugins/_official/examples/codex-interactive-capability-map/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
Workflow
1. Read the source material and extract 6-10 core concepts. 2. Name the overall model in plain language. Prefer a short noun phrase such as "Operating Model", "Capability Map", or "Workflow Loop". 3. Build three linked views: - A hero that frames the source and the promise. - A…
Read the source material and extract 6-10 core concepts.Name the overall model in plain language. Prefer a short noun phrase such as "Operating Model", "Capability Map", or "Workflow Loop".Build three linked views: - 02
Use When
The input is mostly text and the user wants a clearer mental model.
The input is mostly text and the user wants a clearer mental model.The content contains repeated concepts, a process, a framework, capabilities, or operating principles.The desired output is a polished web artifact, not a static summary. - 03
Visual Direction
Use a Codex-inspired refined product style with soft liquid motion, glassy surfaces, and crisp functional controls.
Use a Codex-inspired refined product style with soft liquid motion, glassy surfaces, and crisp functional controls.Make the first viewport feel like a finished product surface, not a wireframe.Favor diagrams, loops, matrices, rails, cards, and progressive disclosure over paragraphs. - 04
Interaction Requirements
All clickable elements must update content or scroll to a meaningful section.
All clickable elements must update content or scroll to a meaningful section.The active state must be visually obvious.The detail panel should animate on each change.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 77/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 82,073 | Source | Repository attention, not individual Skill quality |
| Compatibility | 1 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- nexu-io/open-design
- Skill path
- plugins/_official/examples/codex-interactive-capability-map/SKILL.md
- Commit
- 89d6d4ef21baf80f871595abdf6f7de6e941dd44
- License
- Apache-2.0
- Collected
- 2026-07-28
- Default branch
- main
View the original SKILL.md
Codex Interactive Capability Map
Transform a long article, social thread, memo, product essay, or launch narrative into a visual explainer that people can scan and click through.
Use When
- The input is mostly text and the user wants a clearer mental model.
- The content contains repeated concepts, a process, a framework, capabilities, or operating principles.
- The desired output is a polished web artifact, not a static summary.
Workflow
- Read the source material and extract 6-10 core concepts.
- Name the overall model in plain language. Prefer a short noun phrase such as "Operating Model", "Capability Map", or "Workflow Loop".
- Build three linked views:
- A hero that frames the source and the promise.
- A workflow loop that shows the main sequence or system.
- A use-case matrix that combines concepts into practical scenarios.
- Add a right-side detail panel. Clicking any nav item, loop node, matrix card, or maturity level must update the panel.
- Make the clicked element and the detail panel visibly correspond through shared color, motion, icon/mark shape, or gradient.
- Keep copy short. The artifact should reduce reading effort, not recreate the article.
Visual Direction
- Use a Codex-inspired refined product style with soft liquid motion, glassy surfaces, and crisp functional controls.
- Make the first viewport feel like a finished product surface, not a wireframe.
- Favor diagrams, loops, matrices, rails, cards, and progressive disclosure over paragraphs.
- Use meaningful hover and active states. A click should feel consequential.
- Avoid external image dependencies unless the user explicitly provides assets.
Interaction Requirements
- All clickable elements must update content or scroll to a meaningful section.
- The active state must be visually obvious.
- The detail panel should animate on each change.
- Long labels must wrap cleanly and never be clipped.
- The layout must work at 1280px wide and collapse cleanly below 900px.
Output Contract
Emit one single-file HTML artifact:
<artifact identifier="codex-interactive-capability-map" type="text/html" title="Codex Interactive Capability Map">
<!doctype html>
<html>...</html>
</artifact>
Include all CSS and JavaScript inline. Do not use lorem ipsum. Do not leave placeholder cards. If the source does not include enough concrete details, infer a small, clearly labeled conceptual model from the source instead of inventing unrelated content.
Alternatives
Compare before choosing
Computed 8882,073
nexu-io/open-design
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero cl
Computed 8624,265
openai/skills
imagegen
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG/vector/code-native assets, extending an established ic
Computed 8424,265
openai/skills
chatgpt-apps
Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.
Computed 7824,265
openai/skills
hatch-pet
Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual gen