Back to browse

nexu-io/open-design

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.

77CollectingCodex
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/codex-interactive-capability-map"
Automated source guideContent productionStandard source

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Source-grounded content guide: 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.

npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/codex-interactive-capability-map"
Check the pinned source

The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.

365 source words · 5 usable sections

Content brief

  • 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.

Content deliverables

  • Emit one single-file 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 inst…

Content workflow

Read codex-interactive-capability-map through these 4 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

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…

SKILL.md · 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:
02

Use When

The input is mostly text and the user wants a clearer mental model.

SKILL.md · 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.
03

Visual Direction

Use a Codex-inspired refined product style with soft liquid motion, glassy surfaces, and crisp functional controls.

SKILL.md · 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.
04

Interaction Requirements

All clickable elements must update content or scroll to a meaningful section.

SKILL.md · 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.

Content checklist

Verify each item before delivery

The source section “Workflow” has been checked.

The source section “Use When” has been checked.

The source section “Visual Direction” has been checked.

The source section “Interaction Requirements” has been checked.

Source output checked: Emit one single-file HTML artifact:

Source output checked: 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 inst…

Choose a different workflow

When another Skill is the better fit

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

A separate implementation from nexu-io/open-design; compare its source, maintenance signals, and permission requirements.

Open source detail

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

A separate implementation from openai/skills; compare its source, maintenance signals, and permission requirements.

Open source detail

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.

A separate implementation from openai/skills; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the codex-interactive-capability-map source document cover?

Transform a long article, social thread, memo, product essay, or launch narrative into a visual explainer that people can scan and click through.

How do I install codex-interactive-capability-map?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/codex-interactive-capability-map". Inspect the command and pinned source before running it.

Which Agent platforms does the source record declare?

The pinned source record declares support for: codex.

Repository stars
82,073
Repository forks
9,485
Quality
77/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

77/100
Documentation24/30
Specificity11/25
Maintenance20/20
Trust signals22/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

image-to-code by nexu-io

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

imagegen by openai

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

chatgpt-apps by openai

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.

hatch-pet by openai

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

design-review by event4u-app

Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

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

  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 workflow loop that shows the main sequence or system.
    • A use-case matrix that combines concepts into practical scenarios.
  4. Add a right-side detail panel. Clicking any nav item, loop node, matrix card, or maturity level must update the panel.
  5. Make the clicked element and the detail panel visibly correspond through shared color, motion, icon/mark shape, or gradient.
  6. 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.

Skill path
plugins/_official/examples/codex-interactive-capability-map/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected