less-is-more-web

Generated source view for the actual executable engineering/less-is-more-web skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/less-is-more-web/SKILL.md

Runtime Source

Bundled Resources

These files are part of the executable skill folder and must be preserved with the skill source.

Description

Kevin's rules for any web page or app UI: one novel idea over a template, cut taglines, helper text and labels, full-bleed grounds over boxed rails, static render, no blocked navigation or pops. Use when building, reviewing or redesigning a page.

Skill Source

---
name: less-is-more-web
description: >-
  Kevin's rules for any web page or app UI: one novel idea over a template, cut taglines, helper
  text and labels, full-bleed grounds over boxed rails, static render, no blocked navigation or
  pops. Use when building, reviewing or redesigning a page.
origin: personal
source_slug: less-is-more-web
---

# Less is more, and more where it counts

Kevin's standing rules for web work, in his words:

1. "Cut taglines, helper text and secondary labels. If a screen needs them to make sense, fix the layout." (2026-10-22)
2. "Make the best decision that will elevate all three: the user experience (UX), developer experience (DX), and agent experience (AX) always, without breaking anything." (2026-10-22)
3. "No gratuitous text/additions or eyebrow elements." His reference is Jakub Krehel's essay "less is more". (2026-10-22)
4. "Make content static when possible. If dynamic but same for every user, cache it to make it static for periods of time. If dynamic but personalized, render a shell immediately and don't block the navigation. Keep static elements as part of the layout. Reduce visual pops and keep attention focused on the content rather than jumpiness." His reference for the static and dynamic mix is the Vercel dashboard. (2026-10-22)
5. "Exercise abstract thinking. Embrace value added novelty. State my goals back to me." (2026-10-30)
6. "Don't do rails. Make it like a full width amazing interactive experience." "Make the website smooth and insanely fast and responsive." (2026-10-30)

Less is more removes noise. It does not remove ambition. A page with almost no copy still needs one idea that nobody else's page has.

## 1. State the goals back first

Before writing code, state Kevin's goals back as `less-is-more` section 4 says: one or two sentences, in his order. Then add what each goal means for this change, name the deliverables and the one or two decisions you made on his behalf, and build. When a goal is unclear, state your reading and proceed.

## 2. Think abstractly before picking a layout

Ask what the product or page is, underneath its features, in one sentence. Then ask what single visual or interactive idea makes that sentence visible. Examples of the move:

- A slides editor whose slides are data becomes a ground where the picture is drawn out of its own source text, and the pointer reveals the source.
- A type family becomes a page that sets itself in every member as you scroll.
- An API becomes a live request you can edit in place.

Derive the idea from the product's own material: its data, its vocabulary, its marks, its real UI. Never from a stock pattern.

## 3. Add novelty only when it adds value

Each page earns one signature idea: an interaction, a ground or a visual system that a template could not produce and that explains the product better than words would. It must:

- carry real content (real data, real commands, the real product), never decoration for its own sake;
- respond to the person (pointer, scroll, keys, touch) without demanding interaction to be understood;
- stay fast (section 7) and respect reduced motion with a still frame that reads well alone.

One signature idea per page beats five small effects. If an effect does not explain something, cut it.

## 4. Full-bleed, not boxed

- Do not frame every section in a centered column with hairline rails, corner crosses or boxed borders. Let signature surfaces span the viewport edge to edge, and let type sit on them.
- Keep a reading measure for running text (about 60 to 75 characters), but let the ground, the media and the interactions run full width.
- Structure comes from space, scale and contrast, not from lines.
- Compose each UI state around one dominant element. Secondary items become glyphs or numbers in zones that collapse when empty. A fixed stack of equal rows reads as a data dump to Kevin, so judge the composition from rendered mockups before building. [Source: scratch-09-10/kevin-feedback-ui-composition.md, 2026-09-13]

## 5. Cut first

Remove these:

- taglines and leads;
- helper lines and instructions ("Pick a…", "Drag…", "Click to…");
- captions that explain the layout;
- secondary labels, small meta lines and repeated facts;
- legends;
- tooltips that repeat visible text;
- menu hint lines;
- eyebrows, meaning a small uppercase tracked line above a heading;
- section numbering ("01", "02", "§3") on marketing and product pages;
- dividers and hairline rules between sections;
- negative letter-spacing applied by default to headings. Track a face only where its own spacing fails at that size, and say why in the CSS.

When a screen only makes sense with a helper line, change its affordance instead: the cursor, hover and pressed states, placement, grouping, or the control's own form. A draggable point shows a grab cursor. It does not need a caption that says drag.

Keep the data. Numbers, ranges, code points, names and form labels stay. A section that needs words gets one plain sentence. Remove whole elements before you trim their words, and put nothing in their place.

Remaining copy is plain declarative technical English:

- complete sentences with a short subject before the verb;
- no em or en dashes, so a range reads "100 to 900";
- no colons, semicolons or parentheses that interrupt a sentence;
- no metaphors and no "X, not Y" contrasts;
- no fragments and no exclamation marks;
- sentence case for headings and Title Case for buttons.

For GT work, `gt-voice` holds the full writing rules.

## 6. UX, DX and AX together

- **UX.** There is less to read, every affordance is obvious, and nothing moves unless the person moved it or it is the page's one signature motion.
- **DX.** Delete the CSS, JS and markup that served a removed element, so the change makes files smaller. Use one component for one pattern.
- **AX.** Machine-readable surfaces stay complete: Markdown twins, `llms.txt`, metadata, JSON-LD, `aria-label`s and any machine view. Text removed from view may move into an accessible name only when a screen reader needs it. A canvas ground gets an accessible name and the content it draws exists as text somewhere on the page.
- **Never break working behaviour.** A cut that breaks an interaction, a test or an agent surface is a regression. Revert it and find another way.

## 7. Static, fast and smooth

- **Static, cached or shell.** For each piece of a page, choose one: static content is built once; dynamic but shared content is cached and revalidated on a schedule; personalized content renders a shell at once and streams in.
- **Never block navigation.** The destination paints immediately. A page that waits on data behind a loading pulse is the failure to avoid.
- **Static chrome lives in the layout.** Header, navigation and footer stay mounted across navigations; only their personal parts load later.
- **No visual pops.** Reserve every island's space before it mounts, size skeletons like their content, give images dimensions, preload the primary font with a metric-matched fallback, apply the saved theme before first paint, and never let late content push earlier content down.
- **Interactive grounds are cheap.** Draw them on one canvas (2D or WebGL) from a prebuilt glyph or cell atlas, update only on input or a visible animation frame, pause when off screen (`IntersectionObserver`) or when the tab is hidden, cap device pixel ratio at 2, and ship a still first frame so the page is complete before any script runs. `ascii-texture-grounds` holds the recipe.
- **Fonts are part of performance.** Subset and split them with `web-font-optimization`, and preload only the core file the first screen needs.
- **Motion runs on the compositor.** Animate `transform` and `opacity` only, keep input-to-paint under one frame, and never animate layout.

## 8. Checks before calling it done

1. **Goals.** The goals you stated back in section 1 are each met, or you say which one is not and why.
2. **Copy inventory.** List every visible string per page, then the cuts as before and after, with the layout fix that replaced each one.
3. **Slop scan.** No eyebrows, section numbers, dividers, rails, default negative tracking, helper captions or stock gradients remain.
4. **Layout shift.** Measure cumulative layout shift at 1440, 730 and 390 wide. Wait 3 seconds after load, then scroll once. Target 0.01 or less. Inject this probe before load, for example with Playwright's `addInitScript`, and read `window.__cls` afterwards:

   ```js
   window.__cls = 0;
   new PerformanceObserver((list) => {
     for (const e of list.getEntries()) if (!e.hadRecentInput) window.__cls += e.value;
   }).observe({ type: "layout-shift", buffered: true });
   ```

5. **Speed.** First paint is not gated on script; the signature ground holds 60 frames a second while interacting and costs nothing while idle; font bytes per page are measured.
6. **Navigation.** Click through the main routes. Each destination's first paint must not wait on a fetch, and its chrome must not redraw.
7. **Regression.** Interaction tests, hydration checks and agent surfaces pass or stay complete.

## Related skills

- `less-is-more` for the same four patterns applied to all work, with a rule, a do, a don't and an example for each.
- `ascii-texture-grounds` for full-bleed glyph, dither and tile grounds.
- `web-font-optimization` for subsetting and splitting web fonts with pixel-diff proof.
- `visual-effects-atlas` for naming and adapting a look from the history of images.
- `geometric-logo-construction` for marks built from primitives.
- `teardown` for technical illustrations.
- `frontend-design-taste`, `design-engineering-polish` and `make-interfaces-feel-better` for detail polish.
- `core-web-vitals` and `perf` for measurement in depth.
- `gt-voice` and `humanizer` for copy.

<!-- folded-skills:auto:start -->
## Folded Skill References

These former standalone skills are bundled here as references to keep the runtime list compact. Load only the reference that matches the user's exact product, framework, or failure mode. Where a reference disagrees with this skill, this skill wins.

| Former skill | Reference | Description |
| --- | --- | --- |
| `better-writing` | [`references/skills/better-writing/SKILL.md`](references/skills/better-writing/SKILL.md) | Writes and reviews interface copy, from labels and errors to empty states and confirmations, so it matches the product's voice and tells people what to do next. |
| `copywriting` | [`references/skills/copywriting/SKILL.md`](references/skills/copywriting/SKILL.md) | Marketing copy for homepages, landing pages, pricing pages, and conversion-focused web pages. Use when writing headlines, CTAs, landing page copy, pricing page copy, feature pages, or when the user says "write copy", "landing page", "homepage copy", "CTA", "headline", "conversion copy", or "marketing copy." Based on coreyhaines31/marketingskills (60K weekly installs). |
<!-- folded-skills:auto:end -->

---

Timeline

• 2026-11-02 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/less-is-more-web/SKILL.md