Repository navigation
instrument-page: make pages neutral with four feels and two layouts - #14
Closed
neilrenicker wants to merge 5 commits into
Closed
neilrenicker wants to merge 5 commits into
neilrenicker wants to merge 5 commits into
Conversation
Text, links, rules, labels and the kicker are neutral in every feel; the accent shows only where a page marks something with data-tone or data-c. The kicker is sentence case in Inter, and teal is gone. Cards, notes, tags and flow boxes show color as a muted fill, never a stripe or ring. Footer and disclosure lines are lighter, and Roboto Serif loads its real weight range, set at 400 in editorial. data-feel is minimal, editorial, bold or dense. data-layout replaces data-shape: column or wide. Everything sits in the column; .bleed opts a module into the wide track. --pill sets the rounding of buttons, tags and bars, and bold squares them. Old feel and shape names still draw and pass. Rejected: keep feels named for situations (urgent, warm, crew) | a feel is a look; any feel shows urgency by marking what matters Rejected: swiss, colorful, warm and technical feels | each overlapped bold, data-c, editorial or code blocks that sit well in every feel Rejected: grids, flows and wide tables taking the wide track by default | two left edges on one page read as chaotic Commits-to: pages written with calm, warm, urgent, festive, crew, ledger or data-shape keep passing page.mjs and drawing Tested: six sample pages in every feel and in the wide layout pass page.mjs and lib/probe.js at desktop, link preview, dark and phone Not-tested: pages made by a real agent run with the new SKILL.md; the Instrument app's own rendering
Dense sets 14px type, a 1.75rem headline, 1.5rem stat numbers, tighter spacing, smaller flow boxes and step numbers. A --bar token holds the thickness of a bar, thinner in dense; .bar reads it, and SKILL.md tells the agent to size the bars of its own charts from it. Commits-to: a chart's bars read var(--bar), so a feel can thin or thicken every chart on a page Tested: six sample pages in every feel pass page.mjs and lib/probe.js at desktop, link preview, dark and phone Not-tested: a real agent run sizing its own chart from --bar
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: true
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…cing SKILL.md now picks a feel by what carries the page: editorial for prose, bold for one fact, dense for tables, minimal for the rest. The worked example follows it. Stat numbers top out at 2.6rem so a figure stays a step below the h1. Card gutters are 0.5rem, 0.4rem in dense, while .split and .cols keep four gutters of air. Dense section headings are 1.3rem. Rejected: describe each feel by the kinds of page it suits | the agent matched on topic and put an engineering review in bold Commits-to: a .stat figure renders smaller than the h1 in every feel Tested: six sample pages in every feel pass page.mjs and lib/probe.js at desktop, link preview, dark and phone Not-tested: a real agent run choosing a feel with the new rule
…ectors ol.flow boxes are a grid that wraps onto new rows, with an Inter name over a muted note in every feel; a <code> in the name marks an identifier. foundation.js draws one SVG per flow: a node on one box's edge, a fine line, and an arrowhead touching the next box, looping down along the gap when the next box starts a new row. It redraws when the flow changes size or the fonts load. With no script, and in print, a plain arrow sits in each gap. Rejected: keep every box on one row | five boxes squeezed into the column and broke names mid-word Rejected: draw the connectors in CSS alone | a line cannot follow a wrap to the next row without knowing where the row breaks Commits-to: ol.flow children stay li elements, each with a b name and an optional span note Tested: six sample pages in every feel pass page.mjs and lib/probe.js at desktop, link preview, dark and phone Not-tested: print layout of a wrapped flow on paper; a real agent run writing a flow
tools/page-lab serves a specimen of every token, element and class in foundation.css, six sample pages, and a panel on each that links them and switches feel, layout and theme. Every page reads foundation.css and foundation.js live from skills/instrument-page, and the server sends no-store, so a stylesheet edit shows at the next reload. pnpm page-lab starts it; pnpm page-lab:build builds the samples the way an agent ships them and runs page.mjs on each, ready for pnpm page-check. Rejected: keep the lab in a gitignored local folder | other contributors need the same specimen and samples to judge a stylesheet change Rejected: a Python server | Node is already every contributor's runtime here Commits-to: nothing under tools/page-lab ships with a skill or is shown to an agent; the samples are fixtures, not examples Tested: the lab loads from pnpm page-lab, the panel links every page, and the built samples pass page.mjs and lib/probe.js in every feel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pages carried the Instrument brand into every explainer: a teal accent, an uppercase teal kicker, teal step numbers and tags. They also had a few details that looked machine-made, like a colored stripe down the side of rounded cards, a ring around every tag, and lines above and below the footer. This makes the stylesheet a neutral container. Text, links, rules, labels and the kicker are neutral in every feel, and the accent shows only where a page marks something with
data-toneordata-c. SKILL.md now tells the agent to mark only what carries the point.The two attributes on
<html>are simpler too.data-feelis now a look, not a situation:minimal(the default),editorial,boldordense.data-layoutreplacesdata-shape:column(the default) orwide. Everything sits in the column, and.bleedis the deliberate way to go wider. What card used to mean, a link dropped in chat that makes its point on the first screen, lives in the cookbook recipe "A one-screen card". Two new tokens let a feel reshape the small pieces:--pillrounds buttons, tags and bars (0 in bold), and--barsets the thickness of a chart bar (thin in dense).Old pages keep working. The stylesheet draws calm as minimal; warm as editorial; urgent, festive and crew as bold; ledger as dense; card and read as column; sheet and wall as wide.
page.mjsaccepts all of them, and a new test covers that. The reasoning and the options we dropped are indocs/decisions/2026-10-24-pages-are-neutral-with-four-feels-and-two-layouts.md.Checked: six sample pages in every feel and in the wide layout pass
page.mjsandlib/probe.jsat desktop, link preview, dark and phone. The page tests andcheck:page-skillpass. Not checked: a real agent run with the new SKILL.md, or rendering in the Instrument app.