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.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 8/28/2026
What it changes
Passed 12 of 22 test cases with the skill, and 12 of 22 without it.
Without skill55%
With skill55%
Checks it passed that the model alone missed
Collapses the layout below 900px wide.
Targets desktop layouts at 1280px wide.
Styles the initial viewport as a finished product surface with liquid motion styling.
and 2 more in the full report
4 fixed8 passed either way6 still failing4 broke
Pass-rate lift
0 pp
Tokens
+109%
Agent turns
0%
Response time
+73%
Model gemini-3.6-flashMeasured 8/28/2026v112 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
We are designing the layout rules for an interactive technical explainer artifact in CSS. What viewport width threshold must be targeted for desktop display, and at what width should the layout collapse for smaller screens?
What was checked, without and with the skill
Checked
Without skill
With skill
Targets desktop layouts at 1280px wide.
Missed
Passed
Collapses the layout below 900px wide.
Missed
Passed
case-08 · gemini-3.6-flash · 8/28/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md50 linessingle file
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.
Use this plugin when the user wants a HyperFrames-ready HTML motion composition, launch animation, kinetic typography clip, product reveal, or social video made from code.