honey-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# Honey Design (same pixels, fewer tokens)

For user-facing deliverables — landing pages, marketing sites, UI components —
**polish is the spec.** A bare, valid-but-ugly page is a fail, not a saving.

So the token lever here is **not** "emit less design." It's "express the same
design densely." Compress the *code*, never the rendered result. If a cut would
change a single pixel of the finished page, it's the wrong cut.

**Apply reflexively, as a writing style** — don't deliberate which rule fires or
spend reasoning tokens on the skill itself. Build the polished thing; write its
markup and CSS the dense way by habit.

## Hold the line on polish (the judged axis)

Never trade these for tokens — they *are* the deliverable:

- **Visual depth** — considered layout, spacing rhythm, real visual hierarchy,
  on-brand color and type. Not unstyled scaffolding.
- **Every requested section, fully fleshed** — nav, hero, features, pricing,
  footer, etc. A stubbed-out section is incomplete, not minimal.
- **Interaction & motion** — hover/focus states, transitions, the small touches
  that read as "finished."
- **Responsive richness** — genuinely good on mobile and desktop, not a desktop
  page that merely doesn't break.
- **Accessibility** — labelled controls, `alt` on every image, semantic landmarks,
  visible focus, sufficient contrast, keyboard paths.
- **Anything the user explicitly asked for.**

## The token lever — dense expression, identical render

Produce the *same* finished page with fewer tokens by removing **repetition and
verbosity in the code**, never richness from the design:

**CSS**

- **Custom properties for anything used more than once** — palette, spacing scale,
  radius, shadow, transition. Define in `:root` once, reference everywhere. The
  single biggest saver: a repeated `#1a1a2e`/`24px`/`box-shadow:…` becomes `var(--…)`.
- **Shared classes over repeated blocks.** Three feature cards = one `.card` rule,
  not three near-identical declaration blocks. Style by class, never inline.
- **Shorthand properties** — `margin`, `padding`, `inset`, `font`, `flex`,
  `background`, `border`, `grid` shorthands over their longhand expansions.
- **Fluid sizing to collapse media queries** — `clamp()` / `min()` / `max()` and
  `%`/`fr`/`vw` for type and spacing, plus `grid-template-columns:repeat(auto-fit,
  minmax(…,1fr))` and `flex-wrap`. One fluid rule often replaces a base rule plus
  two `@media` overrides. Keep an `@media` only where layout genuinely must change.
- **Group selectors that share rules** (`h1,h2,h3{…}`); one concise reset, not a
  verbose normalize; short hex (`#fff`), no units on `0`, no trailing-zero noise.
- **No dead, duplicated, or commented-out CSS.**

**HTML**

- **Semantic landmarks, no redundant wrapper divs** — `<header><nav><main><section>
  <footer>` carry structure; don't nest divs that do nothing.
- **No inline `style=` repetition** — push it to a class.
- **Concise, real-feeling copy** — enough to sell the design; no padded lorem.

**Prose around the artifact: near-zero.** The page is the answer. No "Here's your
landing page!", no walkthrough of what you built. One line max if something is
genuinely load-bearing (e.g. a font dependency).

## Self-check before you finish

> Would the rendered page look *identical* with and without each compression?

If yes — ship it; you moved cost out of the tokens, not out of the design. If a
"saving" drops a hover state, a gradient, a section, a breakpoint, or an a11y
attribute, it failed the test — restore it. Density that degrades the render isn't
a win, it's the cheaper-and-worse variant this skill exists to beat.

From sudo-tiz/opencode, MIT.

More from sudo-tiz/opencode