Codex TopicLab Page Style Adaptation for Responsive Embedded UI
Align an existing page or embedded app with the host's typography, surfaces, borders, and spacing. Check narrow-width overflow and scrolling.
中文Install in Codex
Codex with a TopicLab checkout or editable host and target apps. Prepare a local preview at two narrow viewport widths.
- Copy the entire pinned `.codex/skills/page-style-adaptation/` directory to `.agents/skills/page-style-adaptation/` in the target checkout.
- Open Codex in that checkout and invoke `$page-style-adaptation` with the example task and desired output.
Example task
Invoke `$page-style-adaptation` in a scratch project. Ask an embedded panel to reuse the host card surface and radius, then verify it at 390 and 360 CSS pixels.What to check
The panel shares host tokens. Its controls stay visible and usable at both widths, and embedded content scrolls as intended.
Original SKILL.md on GitHub · Updated
Frequently asked question
Which colors should keep their original meaning?
Retain semantic meaning for status, category, and severity colors while aligning generic surfaces and spacing with the host.