codex-interactive-capability-map

nexu-io/open-design · plugins/_official/examples/codex-interactive-capability-map/SKILL.md

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.

Product & ResearchNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/codex-interactive-capability-map · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/codex-interactive-capability-map" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/codex-interactive-capability-map" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/codex-interactive-capability-map

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so codex-interactive-capability-map is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

codex-interactive-capability-map

nexu-io/open-design · plugins/_official/examples/codex-interactive-capability-map/SKILL.md

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.

Product & ResearchNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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>

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/codex-interactive-capability-map · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/codex-interactive-capability-map" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/codex-interactive-capability-map" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/codex-interactive-capability-map

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so codex-interactive-capability-map is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

codex-interactive-capability-map

What this skill does

Codex Interactive Capability Map

Use When

Workflow

Visual Direction

Interaction Requirements

Output Contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

codex-interactive-capability-map

What this skill does

Codex Interactive Capability Map

Use When

Workflow

Visual Direction

Interaction Requirements

Output Contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits