Mielui design

The mielui skill tells you which component to use and what its props are. This skill tells you where things go: the shell around the page, the page header, the grid, the spacing between sections, and what to leave out.

A page built from correct Mielui components can still look generic. That happens when every metric gets its own card, every section gets a border, and the spacing is one gap repeated everywhere. The rules below are how Mielui's own docs, Studio, and demo apps avoid that.

How to work

1. Load the mielui skill first if Mielui is not installed or you have not read the component pages you need. Never guess a prop.
2. Write down the job in one sentence: who uses this page and what they do on it. Then name the dominant object, the one thing the page exists to show or collect. A dashboard's dominant object is usually one chart or one table, not six tiles.
3. Pick the archetype from the table below and read its reference file before writing markup.
4. Write the content before the layout. Use real product names, plausible numbers, real dates, and labels a person would write. Lorem ipsum and "Feature one" hide every hierarchy problem until it is too late.
5. Build in this order: base styles, shell, page header, the dominant object, supporting content, then the empty, loading, and error states.
6. Look at it. Open the page at 1440px and 390px, in light and dark. Run the checklist at the end of this file and fix the first thing that fails.

Pick the archetype