Frontend-design research — input for Task 6 (Blade views)

Date: 2026-06-16 Produced by: Yggdrasil's /learn-new-skills, scoped to frontend design only (Brad's steer). Purpose: Inform Kingdom.md's Task 6 "beautiful baseline" views. The MVP success bar is "elegant, minimal, fast" — for a read-only markdown viewer, design is the spec. This note surveys (1) the frontend-design skill landscape and (2) the UI/UX of comparable markdown apps, then distills concrete recommendations.

Status: research/reference, not a plan. Task 6 ships on the Tailwind Typography baseline regardless; this exists to raise that bar, not gate it.

1. The frontend-design skill landscape

Anthropic's official frontend-design skill

Not a component library or CSS — a thinking discipline (~40 lines of SKILL.md, ~300K installs as of late April 2026, the most-installed design skill in the ecosystem). Mechanism:

  • Forces an aesthetic commitment before any code, via four questions: Purpose / Tone / Constraints / Differentiation. Tone must pick an extreme (brutally minimal, editorial/magazine, brutalist/raw, luxury/refined, …) — "intentionality, not intensity."
  • Five aesthetic axes: Typography (distinctive display + refined body; bans Inter/Roboto/Arial/system fonts, and calls out Space Grotesk as an over-converged default), Color & Theme (CSS variables; dominant color + sharp accents over timid even palettes), Motion (one orchestrated page-load with staggered reveals beats scattered micro-interactions), Spatial Composition (asymmetry, grid-breaking, generous negative space or controlled density), Backgrounds (atmosphere/texture over flat fills).
  • The line that matters for us: "Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well." — the skill explicitly backs the minimal end, not just maximalist flash. Exactly Kingdom.md's bar.

Community layer (ideas, not installs)

  • awesome-claude-design (VoltAgent / rohitg00) — the DESIGN.md pattern: a markdown file the agent reads as the project's design system before generating, organized into named aesthetic families. Relevant ones for a markdown reader: Editorial Minimalism (Linear — Swiss-grid, "every pixel earns its place through typography hierarchy, not decoration"), Terminal-Core (Ollama — monochrome, terminal-first), Warm Editorial. Thesis: "the fastest way to leave the average is to anchor to a named aesthetic that isn't in the middle."
  • UI/UX Pro Max — large searchable design database (UI styles, palettes, font pairings, UX rules). Heavier than this project needs.

Adoption read

The Anthropic skill's value is its discipline, and it's one short file. Highest-leverage move for Kingdom.md: borrow the four-question commitment + the named-aesthetic idea into a small DESIGN.md in this repo that pins the viewer's aesthetic before any Blade/Tailwind — rather than adopting a skill into Yggdrasil (out of scope per Brad's steer). Keep the skill in mind as a project-build aid, not a base-layer primitive.

2. UI/UX lessons from comparable apps

Source Transferable lesson
iA Writer Strongest signal. "Typography is the interface." Font, column width (measure), leading, contrast deliberately set for reading; ruthless removal of non-essential UI. A viewer's quality ceiling is typography + measure + whitespace.
Obsidian The Minimal theme ethos: hide chrome, reduce padding/margins, lean on contrast + spacing + hierarchy. Reading-focused themes optimize for comfortable long reads. The file-tree/sidebar should recede; the rendered note is the hero.
Sublime Text Speed is a design feature — "opens instantly, stays out of your way," achieved by doing less (no IDE bloat) + efficient rendering. For a server-rendered Blade app this is a tailwind: full-page server render + minimal Alpine is inherently the fast path. Protect it.
Typora / StackEdit Unify content + presentation; easy view toggle; distraction-free. Less relevant (we're read-only) but reinforces: one clean focused surface, not a busy dashboard.

Typography specifics (well-corroborated): line length 50–75 characters, ~66 the sweet spot (Bringhurst 45–75); body ≥16px (16–20px desktop); line-height ~1.5, rising to 1.6–1.7 as measure grows. Tailwind Typography prose already targets ~65ch with sane leading — the baseline plan points the right way; the work is refining it, not fighting it.

3. Concrete recommendations for Task 6

  1. Write a DESIGN.md first, using the four-question frame. Recommended named aesthetic: Editorial Minimalism / Warm Editorial — Swiss restraint, typography-led hierarchy, generous whitespace. "Elegant, minimal, fast" made concrete, and honest about being a reading surface.
  2. Make the measure sacred. Cap content at ~65–70ch, ≥16px body, ~1.5 leading. prose gets ~90% there; tune the rest.
  3. Pick a characterful body typeface over a system font (the one Anthropic-skill rule that bites hardest) — a refined serif or humanist sans reads as "designed." Pair with a distinct heading face.
  4. Recede the chrome (Obsidian): file-tree + kingdom dropdown should be quiet — muted, low-contrast until hovered — so the rendered markdown is unmistakably the hero.
  5. Defend the speed (Sublime): keep it server-rendered Blade + minimal Alpine. The architecture already favors fast; the design job is not to betray it.

4. Looked at, set aside

  • UI/UX Pro Max / big multi-stack design databases — overkill for one small viewer.
  • Maximalist / motion-heavy aesthetic families — wrong fit for a calm reading surface.
  • Adopting any frontend skill into Yggdrasil — out of scope; the value here is a project-level DESIGN.md, not a base-layer primitive.

Sources