Agent skill · mia-cx
ui-layout
Use when the user asks to lay out a screen or page, place navigation, arrange or group content, choose density, set breakpoints or make a page responsive, or fix content that shifts or jumps between states. Stage 1 of ui-design.
What it needs
About 2k tokens when loaded.
What this skill does
UI layout The layout is the product's work made visible. Derive it from the task, never from a page template. Read the product Read the supplied brief, feature definitions, brand rules, and relevant existing implementation before choosing a composition. Separate established requirements from proposed features. Preserve explicit product rules and existing marks. Identify the user's task, the objects they work with, and the decisions they make. Map the complete journey, including entry, editing, completion, cancellation, and recovery. Make required capabilities concrete before styling. A calendar product needs a usable calendar; a publishing product needs a usable publishing workflow. Founder background explains motivations. It does not determine customer nationality, sample names, visual style, or marketing copy. Use geography only when it changes a user's decision. About pages describe the product unless a founder story is explicitly requested. For redesigns, identify behavior and routes that must survive. Change only what the task authorizes. For an authorized rebuild, develop the new design without carrying over rejected layout decisions. Compose Start with the product's content and actions. Decide where attention belongs and which relationships should be visible. Explore how the web can express those relationships. A metaphor can help, but must not replace the usable product. There is no required container width, card treatment, header, or footer. Use the number of elements the task needs. A supplied design system is a real constraint; an unspecified SaaS is not a request for a component kit. Navigation follows destinations and frequency of use. Choose its placement and form deliberately. Page requirements do not imply a logo-left header, central links, right-side CTA, hero stack, or repeated footer. Familiar controls can live within a distinctive composition. Keep related elements aligned. Use proximity, scale, weight, and space to express meaningful groups. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mia-cx/ui-layout