codeply-cli 0.5.6 → 0.6.0

package/skills/codeply-taste/references/motion.md

@@ -0,0 +1,292 @@
+# Motion
+
+Read this before adding any animation. The static page must already be finished and passing
+`inspect.mjs`; motion is the last pass, never a way to rescue a weak layout.
+
+## Contents
+
+1. The budget
+2. Four questions before any animation
+3. Tokens
+4. Recipes (copy, then adapt)
+5. Signature moves
+6. Reduced motion and performance
+7. What gives generated motion away
+
+## 1. The budget
+
+A page that does not move reads as a mock-up; the inspector counts what moves while the page loads and
+scrolls, and fails it under eight elements. The motion layer has four parts:
+
+- **One signature moment:** the thing a visitor would describe an hour later: the headline that rises
+  out of a mask, the image that opens like a shutter, the wordmark that scales with the scroll. The
+  direction sheet from `draw.mjs` names one. Build that one well; it is the only move allowed to be
+  loud.
+- **Section entrances, choreographed per section:** the parts of each section arrive in reading order
+  (heading, text, picture, details), staggered 60–90ms, rising 16–32px with opacity, once. Vary the
+  manner with the content instead of stamping one preset everywhere: a list arrives row by row, a
+  picture opens from a mask or settles from a slight scale, a figure counts up once, a statement rises
+  line by line.
+- **Feedback under the hand:** buttons that give on press, links that answer the pointer, cards and
+  pictures that respond on hover, a menu that opens from where it was clicked.
+- **One moving picture:** a found clip as a muted loop with a poster frame, a slow drift or scale on
+  a large photograph, or a scroll-linked move on the hero picture.
+
+What is still banned: the same fade-and-slide-up with the same timing on every block, which is the most
+cited motion tell of generated pages; motion that hides content until a script runs, with no fallback;
+bounce and elastic easing; anything that animates layout properties. Uniform motion says nobody decided
+anything; choreographed motion with one protected moment says somebody did.
+
+## 2. Four questions before any animation
+
+1. **How often will someone see it?** Once per visit (hero load, a section reveal): it can take its
+   time. Many times per visit (hover, menu, accordion): fast and small. Hundreds of times (keyboard
+   actions, typing): no animation.
+2. **What is it for?** Valid answers: it shows where something came from, it confirms an action, it
+   keeps a change from being jarring, it explains how the product works, it is the signature moment.
+   "It looks nice" is only valid for the signature moment.
+3. **Which easing?** Entering or leaving: ease-out, so movement starts the instant the eye arrives.
+   Moving between two places on screen: ease-in-out. Colour and opacity on hover: `ease`. Constant
+   travel (marquee, progress): `linear`. `ease-in` makes interfaces feel slow because the first frames
+   barely move; do not use it. The CSS keyword curves are weak, so use the tokens below.
+4. **How long?** Press feedback 100–160ms. Hover 150–200ms. Menus and popovers 150–250ms. Dialogs and
+   drawers 250–450ms. Section and hero reveals 500–900ms. Leaving is quicker than arriving (about 70%).
+
+## 3. Tokens
+
+```css
+:root {
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* enters, exits, reveals */
+  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);   /* things that travel while visible */
+  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);     /* long quiet reveals, image scale */
+  --t-press: 140ms;
+  --t-hover: 180ms;
+  --t-ui: 240ms;
+  --t-reveal: 800ms;
+}
+```
+
+Name the properties you animate. `transition: all` animates things you did not intend (and costs
+layout); write `transition: transform var(--t-press) var(--ease-out)`.
+
+## 4. Recipes
+
+All recipes keep content visible when JavaScript is off or slow: the hidden state only applies under
+`html.js`, which a one-line inline script sets.
+
+```html
+<script>document.documentElement.classList.add('js')</script>
+```
+
+### Hero load sequence (CSS only)
+
+Stagger at most four things. With a headline of two lines this is short and reads as one gesture.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .js [data-rise] {
+    opacity: 0;
+    transform: translateY(18px);
+    animation: rise var(--t-reveal) var(--ease-out) forwards;
+    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
+  }
+}
+@keyframes rise { to { opacity: 1; transform: none; } }
+```
+
+```html
+<h1 data-rise style="--i:0">…</h1>
+<p data-rise style="--i:1">…</p>
+<a data-rise style="--i:2" class="button">…</a>
+```
+
+### Masked line reveal (the classic gallery headline)
+
+Each line slides up from behind its own baseline. Because headlines are capped at two lines, you set
+the line breaks yourself and wrap each line.
+
+```html
+<h1 class="lines">
+  <span class="line"><span data-line style="--i:0">Stools for</span></span>
+  <span class="line"><span data-line style="--i:1">small kitchens</span></span>
+</h1>
+```
+
+```css
+.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
+.lines [data-line] { display: block; }
+@media (prefers-reduced-motion: no-preference) {
+  .js .lines [data-line] {
+    transform: translateY(105%);
+    animation: line-up 900ms var(--ease-out) forwards;
+    animation-delay: calc(var(--i) * 110ms + 150ms);
+  }
+}
+@keyframes line-up { to { transform: none; } }
+```
+
+The `padding-bottom` / negative margin pair stops descenders (g, y, p) being clipped by the mask.
+On a narrow phone the two authored lines may each wrap; check the mobile screenshot, and if they do,
+author a shorter mobile break with a `<br class="only-wide">` pattern or reduce the size.
+
+### Reveal on scroll (once)
+
+For the two or three sections that deserve it, not for every block.
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
+  .js [data-reveal].is-in { opacity: 1; transform: none; }
+}
+```
+
+```js
+const io = new IntersectionObserver((entries) => {
+  for (const e of entries) if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
+}, { rootMargin: '0px 0px -12% 0px', threshold: 0.1 });
+document.querySelectorAll('[data-reveal]').forEach((el) => io.observe(el));
+```
+
+Never attach reveals with a scroll listener, never replay them when the element re-enters, and never
+leave anything at `opacity: 0` if the observer fails to fire (the `html.js` gate handles no-JS; the
+`unobserve` handles replays).
+
+### Image shutter
+
+An image opens from one edge while scaling down slightly inside its frame. Gallery staple; use it for
+the one hero or showcase image.
+
+```css
+.shutter { overflow: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
+  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
+  .js .shutter.is-in { clip-path: inset(0); }
+  .js .shutter.is-in img { transform: none; }
+}
+```
+
+### Press and hover
+
+```css
+.button { transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
+.button:active { transform: scale(0.97); }
+.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
+@media (hover: hover) and (pointer: fine) {
+  .button:hover { background-color: var(--accent-strong); }
+  .link:hover { text-decoration-color: currentColor; }
+}
+```
+
+Hover styles go behind `(hover: hover)` because touch devices fire hover on tap and leave it stuck.
+Hover should raise contrast, never lower it. Do not change font weight on hover (the text reflows).
+Do not lift or scale every card on hover; one consistent, small response is enough.
+
+### Scroll-linked progress without JavaScript
+
+For a wordmark that scales as the hero leaves, an image that drifts a few percent, or a progress bar.
+Wrap in `@supports` so browsers without scroll timelines get the static state.
+
+```css
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .drift { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
+    @keyframes drift { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
+  }
+}
+```
+
+Keep the travel small (under 8% of the element). Large parallax makes text hard to read and looks
+dated.
+
+### Pinned story
+
+A section whose heading stays put while items pass. Use `position: sticky`; do not hijack scrolling.
+
+```css
+.story { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
+.story__title { position: sticky; top: 18vh; }
+@media (max-width: 800px) { .story { grid-template-columns: 1fr; } .story__title { position: static; } }
+```
+
+### List with image preview (work index, menu, team)
+
+Rows of large text; hovering a row shows its image in a fixed frame beside or behind the list.
+
+```css
+.index { position: relative; }
+.index__row { display: flex; justify-content: space-between; align-items: baseline; padding-block: 0.35em; font-size: var(--step-4); }
+.index__frame { position: absolute; inset-block: 0; right: 0; width: 34%; pointer-events: none; }
+.index__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-ui) ease; }
+.index__frame img.is-on { opacity: 1; }
+@media (hover: hover) and (pointer: fine) { .index:hover .index__row:not(:hover) { opacity: 0.35; } .index__row { transition: opacity var(--t-hover) ease; } }
+```
+
+On touch there is no hover, so each row shows its image inline above the title instead.
+
+### Accordion
+
+```css
+.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
+.acc__panel > div { overflow: hidden; }
+.acc[open] .acc__panel, .acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
+```
+
+Animating `grid-template-rows` from `0fr` to `1fr` opens to the content's real height without measuring
+it in JavaScript.
+
+### Menu or dialog
+
+```css
+.menu { transform-origin: top right; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
+.menu[hidden], .menu.is-closed { opacity: 0; transform: scale(0.97) translateY(-6px); pointer-events: none; }
+```
+
+Things open from where they were triggered (`transform-origin` at the trigger). Nothing enters from
+`scale(0)`; start at 0.95–0.98. A centred dialog is the one case that scales from its centre.
+
+## 5. Signature moves
+
+The direction sheet names one. Each of these was seen repeatedly on the studied gallery sites.
+
+| Move | What happens | Build with |
+| --- | --- | --- |
+| Masked headline | Lines rise from behind their baselines on load | Masked line reveal recipe |
+| Shutter image | Hero or showcase image opens from an edge, settling from 1.12 scale | Image shutter recipe |
+| Scaling wordmark | A giant wordmark shrinks or grows a few percent as the hero scrolls out | Scroll-linked recipe on `scale` |
+| Pinned story | A heading holds while its items scroll past | Sticky recipe |
+| Index with preview | Text rows; the hovered row shows its image | List with image preview recipe |
+| Curtain footer | The last section is revealed from under the page as you reach the end | `position: sticky; bottom: 0` footer under a main with a background and `z-index` |
+| Slow crossfade | Hero image crossfades through 3–4 photographs, 5–6s each | Stacked images, opacity keyframes, pause when the tab is hidden |
+| Edge-to-edge marquee | One line of very large type travels sideways, slowly | Duplicate the content, `translateX(-50%)` linear loop, pause on hover and under reduced motion |
+| Drag row | A horizontally scrollable row of large images with scroll snapping | `overflow-x: auto; scroll-snap-type: x mandatory`, no library |
+| Colour by chapter | Each chapter is its own full-bleed colour field, so the ground changes at section edges; a fixed header takes the ink of the chapter beneath | Section backgrounds in CSS; `base.js` sets `--header-ink` from `data-ink`. Never recolour the whole page from an observer |
+
+Pick by subject. A portfolio wants the index with preview; a restaurant wants the slow crossfade; a
+product wants the shutter on its hero object. If the move says nothing about the subject, it is
+decoration and the page is better without it.
+
+## 6. Reduced motion and performance
+
+- `prefers-reduced-motion: reduce` means fewer and gentler, not none: keep opacity and colour changes,
+  drop travel, scale, parallax and autoplay. All recipes above are written inside
+  `no-preference` blocks so the reduced state is simply the finished state.
+- Animate `transform`, `opacity` and `clip-path`. Animating `width`, `height`, `top`, `left`, `margin`
+  or `padding` forces layout on every frame. `grid-template-rows` for accordions is the accepted
+  exception because it is short and rare.
+- Do not drive many children from one changing CSS variable on a parent; set the transform on the
+  element that moves.
+- `will-change` only on an element that is about to animate, removed afterwards.
+- Pause loops when off screen or when the tab is hidden.
+- No scroll hijacking, no smooth-scroll library by default, no custom cursor. They cost usability,
+  which is 30% of an Awwwards score and the line most winners score lowest on.
+
+## 7. What gives generated motion away
+
+- The same fade-up on every block.
+- A dozen staggered entrances in the hero.
+- Hover lift or zoom on every card and image.
+- Bounce or elastic easing on interface elements.
+- Infinite loops that mean nothing: pulsing dots, floating shapes, shimmering text, rotating badges.
+- A reveal that never fires and leaves a blank band in the page. Run `inspect.mjs` after the motion
+  pass and look at every screenshot for missing content.

package/skills/codeply-taste/references/research.md

@@ -0,0 +1,306 @@
+# The study
+
+Everything numeric in this skill comes from here. Cite these figures; do not round them up or invent
+others.
+
+## Contents
+
+1. Method and its limits
+2. Scores
+3. Where the idea comes from
+4. Headlines
+5. Type
+6. Devices: what separates strong from weak, and what does not
+7. Colour and shape
+8. Imagery and page structure
+9. What the inspector says about the gallery itself
+10. The 25 highest-scored sites and their ideas
+11. How the skill was tested
+
+## 1. Method and its limits
+
+- **Sample.** 248 sites collected on 5 October 2026: 156 from One Page Love (the latest gallery pages
+  and the category listings) and 92 Awwwards Sites of the Day (the three most recent listing pages).
+  247 loaded; 246 were re-measured with the final probe.
+- **Capture.** Headless Chrome at 1440×900 and 390×844. For each site: the first viewport, five more
+  frames while scrolling with real wheel input, the mobile first viewport, and a measurement pass in
+  the page (computed styles, text geometry, colours, fonts actually loaded).
+- **Panel.** 21 model reviewers each studied about 12 sites from the screenshots and the measurements,
+  described them (idea, hero, type, colour, imagery, layout, sections) and scored them the Awwwards
+  way: design 40%, usability 30%, creativity 20%, content 10%. These are model judgements from still
+  frames, not human jurors and not the real Awwwards scores. Batches mixed both sources so each
+  reviewer saw a spread.
+- **Usable sets.** 235 sites were usable for the panel (12 showed only a preloader, an entry gate or a
+  bot wall). 202 were measurable for typography (a page with at least 25 words and a detectable
+  headline). "Top" below means panel score 7.5 or higher (82 measurable sites); "weak" means under 6.5
+  (23 measurable sites).
+- **Limits.** One capture per site on one day. Some heroes were caught mid-animation or behind a cookie
+  notice. WebGL-heavy sites are under-described by text measurements. The eyebrow detector counts any
+  small short label directly above a large heading, so it over-counts against the panel's stricter
+  reading (60% measured against 35% observed). Motion was inferred from frames, not watched. The sample
+  is whatever the two galleries had recently featured; it is fashion as much as quality.
+
+## 2. Scores
+
+| | All 235 | One Page Love (151) | Awwwards (84) |
+| --- | --- | --- | --- |
+| Median overall | 7.2 | 7.1 | 7.5 |
+| Middle half | 6.8–7.6 | | |
+| 8.0 or higher | 25 sites (11%) | | |
+| 7.5 or higher | 90 sites (38%) | | |
+| Under 6.5 | 29 sites | | |
+
+Median by criterion: design 8, usability 7, creativity 7, content 7. Among the top 25: design 9,
+usability 7, creativity 8, content 8. Usability is the one line that does not rise with the rest: the
+best sites are no easier to use than the average one. Do not copy their gates, preloaders, tiny text
+or hidden navigation.
+
+## 3. Where the idea comes from
+
+The clearest pattern in the panel's notes: high scores go with a concept taken from the subject, and
+low scores go with its absence. The weakest entries' ideas were recorded in words like "none beyond the
+standard dark SaaS launch formula", "no visual idea beyond clarity", "no strong idea". The strongest
+were sentences only that subject could own (section 10).
+
+Recurring engines among the 7.3+ sites, each the basis of a direction in the library:
+
+- **The product demonstrates itself.** A colour picker's loupe reads the page's own background; a list
+  tool is sold with tiny working lists; a photo app's page is a wall of its own output.
+- **The page is an artefact from the subject's world.** A wedding site that is the invitation; an
+  archive as tabbed folders; a coupon with a cut line; a portfolio as a contact sheet.
+- **The name is the hero.** Wordmarks as wide as the screen, a photograph set inside the name like a
+  letter, a name split to opposite corners with the page between.
+- **One motif from the subject drives everything.** A tool's octagonal section as button, mask and
+  loader; two circles for two accounts; a café's stripes.
+- **Dressed as another category.** A money app as a streetwear drop; an industrial roaster as a design
+  object; a parcel service as a fairground.
+- **The place carries it.** One full-bleed view and a name along the bottom edge.
+- **A fixed stage.** A title or object stays put while content swaps beneath it.
+- **One section, one colour.** Flat fields as chapters.
+- **Radical understatement.** A 27px headline and tiny live demonstrations, carried through completely.
+
+Hero types, by the panel's classification (top sites against weak sites): full-bleed media with type
+over it 16% / 10%; giant wordmark 14% / 0%; typographic poster 13% / 7%; text beside media 10% / 3%;
+**centred statement with media below 7% / 24%**. The centred headline over a screenshot is the weak
+sites' signature layout.
+
+## 4. Headlines
+
+| Hero headline | All | Top | Weak |
+| --- | --- | --- | --- |
+| Words, median | 5 | 5 | 5 |
+| Words, middle half | 3–9 | 2–8 | 3–8 |
+| Characters, median | 32 | | |
+| One line at 1440 | 47% | | |
+| Two lines or fewer at 1440 | 70% | 71% | 83% |
+| Two lines or fewer at 390 | 57% | | |
+| Three lines or fewer at 390 | 82% | | |
+
+Awwwards heroes are shorter (median 4 words, 76% within two lines) than One Page Love's (6 words, 66%).
+Section headings have a median of 3 words. Length does not separate strong from weak; nearly everyone
+in the gallery writes short headlines. The two-line limit in this skill is a house rule that most of
+the gallery already meets on desktop and that takes care to meet on a phone.
+
+## 5. Type
+
+| | All | Top | Weak |
+| --- | --- | --- | --- |
+| Hero size, median | 72px (5.0vw) | 6.0vw | 4.7vw |
+| Hero size, middle half | 3.0–7.6vw | 2.5–9.7vw | 2.7–6.1vw |
+| Largest text on the page, median | 6.4vw | 8.4vw | 5.0vw |
+| Largest text, upper quarter starts at | 10.4vw | 12.5vw | 6.7vw |
+| Hero on a phone, median | 40px | | |
+| Hero tracking, median (middle half) | -0.01em (-0.03 to 0) | | |
+| Hero leading, median (middle half) | 1.0 (0.95–1.1) | | |
+| Body size, median (middle half) | 16px (14–18) | | |
+| Headline ÷ body, median | 4.3 | 4.7 | 4.0 |
+| Typefaces carrying 3%+ of text | one 31%, two 45%, three 22% | | |
+| Distinct font sizes, median | 8 | | |
+
+Hero weight: regular 48%, medium 18%, semibold 6%, bold or heavier 22%, light 6%. Capitals 24%.
+Centred 39% overall, 52% on weak sites. Display classes by the panel: neo-grotesk 48%, transitional
+serif 11%, geometric sans 10%, condensed 6%, extended 6%, old-style serif 4%, custom lettering 4%.
+
+Strong sites push the extremes: their biggest type is bigger and their range is wider. Weak sites
+cluster in the middle.
+
+## 6. Devices: what separates strong from weak, and what does not
+
+Measured in the page unless marked (panel).
+
+**More common on weak sites (the data supports avoiding them):**
+
+| Device | Top | Weak |
+| --- | --- | --- |
+| Icon-topped feature cards (panel) | 1% | 28% |
+| Rows of identical cards with a small icon (measured) | 7% | 26% |
+| Pill badges (panel) | 14% | 34% |
+| Pill-shaped label above a heading (measured) | 5% | 26% |
+| Tiny uppercase letter-spaced labels, any | 16% | 57% |
+| Tiny uppercase letter-spaced labels, three or more | 6% | 43% |
+| Gradient fills (not counting scrims) | 22% | 52% |
+| Gradient text | 2% | 13% |
+| Shadows on resting elements, any | 24% | 48% |
+| Shadows, five or more | 10% | 30% |
+| Emoji in the page | 10% | 26% |
+| Eyebrow labels (panel) | 32% | 45% |
+
+**No real difference:**
+
+| Device | Top | Weak |
+| --- | --- | --- |
+| Backdrop blur anywhere | 32% | 39% |
+| Italic-serif accent word (panel) | 4% | 7% |
+| Thin rules, any | 61% | 52% |
+
+**More common on strong sites (banned here anyway, as house style):**
+
+| Device | Top | Weak |
+| --- | --- | --- |
+| Monospace labels (panel) | 44% | 24% |
+| Monospace anywhere outside code (measured) | 45% | 26% |
+| Index numbering (panel) | 38% | 21% |
+
+Monospace captions, index numbers and ruled grids are the present fashion of award sites. They are
+excluded from this skill by the owner's choice, not by the data: they are the devices generators copy
+first, and a page that cannot lean on them has to find structure in space, tone and scale.
+
+## 7. Colour and shape
+
+- Dark page ground 41%; pure white 25%; pure black 12%; a warm off-white 13%.
+- Scheme (panel): monochrome plus one accent 23%, light neutral 22%, dark neutral 14%, several flat
+  colours 13%, two-tone 12%, photographic 9%, one colour field 6%.
+- Primary buttons are neutral (black, white, grey) on 52% of sites. One site in 246 has a terracotta
+  button; none has a violet one.
+- Median number of distinct section grounds: 2 on top sites, 1 on weak sites.
+- Button shape: top sites square (0–2px) 52%, fully round 23%, small radius 19%, medium (9–16px) 6%.
+  Weak sites fully round 59%, medium 24%, square 18%.
+- Media corners are square on 73% of sites; where rounded, the median radius is 12px.
+- Buttons in the first viewport: none on 55% of top sites and 39% of weak ones.
+
+## 8. Imagery and page structure
+
+- Hero media covers at least half the first viewport on 60% of sites (top 68%, weak 48%) and nearly
+  all of it on 50% (top 56%, weak 39%). No hero media: 15%.
+- Video is present on 49% of sites and a canvas element on 49% (top 62%, weak 35%).
+- Images per page, median: 24 overall, 37 on top sites, 5 on weak ones.
+- Imagery kind (panel): mixed 32%, photography 14%, generative or WebGL 13%, product interface 12%,
+  3D render 11%, illustration 9%, video 6%, type only 3%. Median panel score is lowest for
+  illustration-led (6.9) and product-interface-led (7.1) pages and highest for video and type-only
+  (7.5).
+- Page length, median: 8.7 screens and 575 words (middle half 1.6–14.4 screens, 250–956 words). A
+  quarter of the sites are a single screen or two.
+- Navigation: a median of 3 links; fixed or sticky on 66%.
+- Density (panel): airy 46%, balanced 45%, dense 9%. Alignment: centred 33%, mixed 31%, left-anchored
+  17%, modular grid 13%, free 6%.
+- Asked to describe each site's most interesting sections, the panel picked a pricing, testimonial or
+  FAQ section only 7, 12 and 9 times across 235 sites. Where strong sites have them at all, they are
+  not where the design effort goes, and they avoid the stock form.
+
+**From the panel's written notes on the 114 sites scoring 7.3 or more** (hand tallies, approximate;
+`layout.md` turns these into practice):
+
+- Outer margins of 32px or less on about 45; 80px or more on about 8. A centred 700–1300px container
+  on about 15, several of them the pages the panel called stock.
+- Text anchored to a fixed off-centre line on about 22. Text docked in corners or at opposite ends of
+  a baseline on about 25 and 15.
+- Two or three type sizes with nothing between on about 30; no note describes a graded five-step
+  scale.
+- One thing per screen on about 20. A full background colour per section on about 20; alternating
+  light and dark on about 12.
+- Every section recomposed on about 14; one planned exception to the page's own system on about 14.
+- No conventional top navigation bar on about 45; small corner links on about 22; a single link or
+  button on about 10.
+- Endings: the name at full width about 18, the hero repeated inverted about 12, a closing scene of
+  its own about 14, no footer or a single line about 22. Link-column footers are mentioned only as
+  criticism.
+- Motion (inferred from frames): autoplaying video about 50; pinned or fixed stages about 40; text
+  reveals about 30 (blur-in 10, masked line rises 8, scroll-tied word colouring 7); horizontal strips
+  about 27; marquees about 26; media swapped behind a fixed element about 15; scroll-linked scaling
+  about 12. Rare: hover effects (4 mentions), parallax (6), accordions (5), bounce or spring motion
+  (none). About 10 strong sites show little or no motion at all.
+- How weak sites fail (54 sites under 6.8): the category's stock template about 20; centred headline,
+  pill badge, two buttons and a screenshot about 9; stock modules after a distinctive hero about 8,
+  plus about 17 in the middle band; a characterless default typeface about 13; text too small or too
+  faint about 13; never saying what the thing is about 12.
+- Faults of the best sites (90 at 7.5 or more), not to be copied: text at 9–13px about 24;
+  information hidden behind the concept about 20; the idea running out mid-page about 15; text over
+  footage with no scrim about 12; gates, preloaders and blank first paints about 12.
+
+## 9. What the inspector says about the gallery itself
+
+Running this skill's own `inspect.mjs` rules over the 202 measurable gallery sites: the median site
+has 4 `FAIL`s and only 4% have none. The rules that fire most: headline over two lines somewhere on
+the page 60%, eyebrow-like label 60%, thin rules 50%, monospace 37%, shadows 32%, gradients 29%, index
+numbering 29%.
+
+So the house style is deliberately stricter than the gallery. It is not a description of award sites;
+it is a narrower target inside what they do: their scale, their ideas, their imagery and restraint,
+without the ornaments that have since become a uniform.
+
+## 10. The 25 highest-scored sites and their ideas
+
+The panel's one-sentence reading of each. Notice that every one names something only that subject
+could own. (Several use devices this skill bans; take the idea, not the ornament.)
+
+| Site | Source | Score | Idea |
+| --- | --- | --- | --- |
+| PP Neue Montreal | Awwwards | 8.6 | A typeface specimen dressed as a vintage city travel guide: the font named after Montreal is sold through guidebook titling, postcards and old tourist footage. |
+| Seasats | Awwwards | 8.4 | Calm, dusk-lit seascapes sell autonomous boats as serene instruments, and the navigation is a column of stacked colour swatches taken from that sea-and-sand palette. |
+| AI in Design Report 2026 | Awwwards | 8.4 | A research report laid out like a colour-blocked print annual: a video collage on top, an oversized tight grotesk title, and flat orange, lilac, sage and black blocks carrying stats, quotes and chapters. |
+| House of Honey | Awwwards | 8.4 | A block-heavy wordmark pierced by a fine script: the bold-against-delicate contrast is repeated at every scale, with giant pink script behind quiet serif statements. |
+| White Desert | Awwwards | 8.4 | One word, the destination, set a third of the screen tall over footage like a film title card; sheer scale stands in for remoteness. |
+| Applied Imagination | One Page Love | 8.3 | An essay conceived on a flight is read as a descent: an altimeter ticks from 30,000 ft to zero while you scroll down through clouds to mountains at ground level. |
+| Cursor Compile | One Page Love | 8.3 | The event name drawn as seven looping one-line curves in seven colours, more signature than logotype, on an otherwise whisper-quiet off-white page. |
+| The New Industrials | One Page Love | 8.3 | A long-read essay laid out inside a drafting grid, where colour fields shift as you read and machine parts drift through the margins and finally assemble into the publisher's initials. |
+| Wild | One Page Love | 8.3 | A studio essay in which everything decorative is drawn on one square-pixel grid: the hero heatmap, the icons, the diagrams, the lettering and the footer. |
+| Hildén & Kaira | Awwwards | 8.3 | The agency name is cast in liquid chrome across the full width, and the same chrome becomes the objects that float through the page, tying the pitch to one material. |
+| PX Push | Awwwards | 8.2 | A design subscription presented as a retro broadcast: the entire site is seen through a CRT screen, with a chrome logo token as its mascot. |
+| Illoca | Awwwards | 8.2 | Software for architects sold as a drafting table: a two-colour illustrated studio on graph paper that the scroll pushes into until the drawing fills the screen. |
+| Aspen Search | Awwwards | 8.2 | The page is a tile system with no margins: the two-word name is split across cells that alternate type, dithered image, black and one mint green. |
+| Dragonfly Redux | Awwwards | 8.2 | A crypto fund presented as a terminal artefact: every picture is rendered in characters, framed by four letters of the name pinned to the viewport corners. |
+| Monolog | Awwwards | 8.2 | A studio pitch run as an asymmetric sheet: a narrow left column carries the sales talk while a wide right column stacks a very heavy headline and the proof. |
+| The Queue | One Page Love | 8.1 | An essay on queueing where the queue is the ornament: a line of drawn figures stands along the bottom of the hero and returns between chapters in changing period dress. |
+| Paul Kalkbrenner | Awwwards | 8.1 | Swiss poster typography for a techno artist: the name as one black line with a photo set inside it like a glyph, then every chapter gets its own flat colour. |
+| Vero New York | Awwwards | 8.1 | A keepsake treated like couture: a slow close-up film opens, then a white sculpture of a dress stays pinned at centre while one sentence passes over it. |
+| Depo Luxe | Awwwards | 8.1 | A film production roster shown as a full-screen reel in which every step is one film with only a title, a director and a client, set like credits at body size. |
+| Longbow | Awwwards | 8.1 | The page is built on a visible four-column construction grid, and cars, cards and a giant condensed marquee are slotted into its cells like objects on an artboard. |
+| Mosby's Files | Awwwards | 8.0 | An archive of architects presented as a physical stack of coloured index-tab file folders that you flip through. |
+| Sarah & Matt Wedding | One Page Love | 8.0 | The site is the invitation: a letterpress-style card opens the page, and its ornaments and small typographic parts become the components for everything after it. |
+| Zara Webb | One Page Love | 8.0 | A one-woman newborn-care practice presented like a hand-made keepsake: a mascot rabbit, scalloped and flower-shaped cut-outs, candid film photographs. |
+| Noho | Awwwards | 8.0 | Furniture sold through people misusing it (wearing, balancing on, hiding behind chairs on flat colour backdrops) while the interface stays quiet. |
+| Juggle | One Page Love | 8.0 | The headline literally drowns: a flat blue field rises to half height and the lines below the waterline change colour. |
+
+Full notes on any studied site: `node scripts/draw.mjs --site <id>` (ids appear on direction sheets).
+
+## 11. How the skill was tested
+
+Six client briefs (an invoicing tool, a restaurant, a designer's portfolio, a ceramic product, a
+guesthouse, a design conference), each with no photographs. For every brief a fresh agent built the
+page three ways: with no skill (baseline), with another published design skill (atelier, three briefs)
+and with this skill. Every build was photographed by `inspect.mjs` in the same way and judged blind
+by a separate agent with the juror brief (Awwwards weights, anonymous A/B/C folders, screenshots
+only). The skill was revised after each round from the jurors' reasons and the builders' notes.
+
+| Round | Briefs | This skill | Baseline | Atelier | Wins |
+| --- | --- | --- | --- | --- | --- |
+| 1 | 4 | 6.6 | 7.7 | 6.8 | 1 of 4 |
+| 2 | 3 | 7.1 | 8.0 | | 0 of 3 |
+| 3 | 3 | 7.5 | 7.5 | | 1 of 3 |
+| 4 (unseen briefs) | 3 | 6.9 | 7.9 | 7.5 | 0 of 3 |
+| 5 (same three) | 3 | 7.7 | 7.8 | 7.2 | 2 of 3 |
+
+Under the inspector, the final builds measured 0 FAIL each; the baselines measured 8 to 13 FAIL each
+(eyebrows, monospace labels, 01/02/03 numbering, hairlines, gradients, shadows, three-line headlines,
+text under 13px).
+
+What the jurors rewarded, in the order they named it: an idea that belongs to this client and not to
+the category (the competitor test); one live thing on the page; full content at a readable size; a
+first screen with one dominant element and a real button; drawings of the subject with detail. What
+they punished: a quiet page that read as empty, a small headline, text sliding over pictures or cut
+at the top, a page recoloured mid-section, rows cut at the right edge, a large sentence over three or
+more lines (read as a long headline whatever its markup), navigation that took over the first screen.
+Each of these is now a rule in SKILL.md or a check in the inspector.
+
+Limits: one juror per brief per round, so single scores carry about half a point of noise; the round-5
+briefs had been seen in round 4; jurors are models, not people.