Codex Kernelia UI Hierarchy for Desktop and Mobile Layouts
Define a visual direction and adapt content hierarchy, navigation and UI states for desktop and mobile.
中文Install in Codex
Open Kernelia in Codex with the content priorities, existing components and supported screen widths.
- Review `.agents/skills/modern-ui-design/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.agents/skills/modern-ui-design/` in your project and save the reviewed file as `.agents/skills/modern-ui-design/SKILL.md`.
- Start Codex from that project's root, then type `$modern-ui-design` and select the matching skill.
Example task
Draft desktop and mobile layouts for this sample data panel.
{"viewportDesktop":1440,"viewportMobile":390,"first":"summary","secondary":"history","emptyState":true}What to check
Specify `desktopColumns=2` and `mobileColumns=1`. Use `summary, history` as mobile order and design a dedicated empty history state.
Original SKILL.md on GitHub · Updated
Frequently asked question
Can I make the mobile layout by shrinking the desktop layout?
Reorder modules around mobile reading and navigation priorities while preserving the visual direction.