site: remove named AI-slop tells from the product pages - #43
Merged
Conversation
Audited htmlbin.dev's own pages against the design-tell vocabulary impeccable.style publishes, and against DESIGN.md's own hard-don'ts, which several rules in this sheet were already violating. Fixed: - Side-tab border (2x). .error and .definition each stacked a 3px red left-edge stripe on top of a tinted background AND a full hairline — three redundant emphasis mechanisms. Tint + hairline now carry it. - Everything-equal / ghost-cards / cards-in-cards. The capability grid was a 2x2 of fully-bordered cells, grid-auto-rows:1fr locking every tile to identical height, each opening with an identical 5px red dot, each holding a bordered .mini inside the bordered cell. Now a borderless two-column list separated by whitespace, which is also what DESIGN.md §6 says to do instead of sectioning borders. Rows still align per-row via the grid's default stretch. - Nested rounded surfaces in the prompt chrome. The tab group was a rounded filled track holding rounded filled tabs inside the rounded prompt card, and was a third chip cluster in a bar already carrying the traffic-light dots and the copy pill. The active tab's own fill is enough. - Glow. .copy-cta carried a red drop-shadow under a red button. DESIGN.md §3 rules out glow explicitly. - Shadows above 1px (2x). The prompt slab and term block had 28px and 20px ambient blurs — the generic floating-card look, and against DESIGN.md §3's 1px cap. - Italic. .definition em was the sheet's only font-style:italic, which DESIGN.md §7 forbids product-wide. - Clipped labels. The viewer bar capped title and description at fixed viewport slices (28vw / 24vw), truncating a short title on a wide screen with room to spare. They now share leftover space and ellipsize only when actually out of room. - Radius chaos. Nine ad-hoc radii (3/4/5/6/7/8/14/50%/999px) collapse to a three-step scale. The 999px lock-pill was the only fully-round element on the site. - Palette leak. Ten off-token hex values, including two different blues, in a palette DESIGN.md describes as "black, white, gray, and one red". Tokenized; hover now uses the existing --red-press. Left deliberately: the traffic-light dots and their three colors are a documented DESIGN.md §5.3 exception, and the 50% radius on them is a real circle. Verified: typecheck clean, all var(--*) references resolve, and the removed patterns are absent from a live 200 response on wrangler dev. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The .bin/wrangler shim is installed as a regular file rather than a symlink, so its __dirname-relative path math resolves node_modules/wrangler-dist/cli.js instead of node_modules/wrangler/wrangler-dist/cli.js. CLAUDE.md documents this for the db:* scripts and predicted these three would break the same way eventually. They have — npm run dev and npm run stats both fail with MODULE_NOT_FOUND. npm run dev failing blocked local verification of the styles change in this branch. Same fix the db:* scripts and the dashboard server already use. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
🚀 Cloudflare previewURL: https://8ceb091a-htmlbin.utkarsh2012.workers.dev Built from commit
|
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
1 participant
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.
Audits htmlbin.dev's own three pages against the design-tell vocabulary impeccable.style publishes, and against DESIGN.md's own hard-don'ts. Seven of the fixes below were already written down as rules in DESIGN.md and simply weren't enforced in
styles.ts.Scope is the product pages only. Nothing here touches the drop quality floor in
SKILL.mdorpatterns/.Clean already
No gradients, no
backdrop-filter, no beige (#FAFAFA/#F5F5F5are neutral grays), concrete headline, specific CTA, no fields on the landing, no images to animate.Doc correction: DESIGN.md §7 permits a "status-dot pulse." There is no status pill and no pulse animation in the sheet — the only
@keyframesis the memo's open reveal. That line is stale.Fixed
.error,.definition.capsgrid-auto-rows: 1frlocked all four tiles to identical height.cap.cap .mini,.tabs.prompt-chrome.viewer-bar28vw, desc at24vw— truncated short titles on wide screens.definition emfont-style: italic, forbidden by §7.copy-cta.prompt,.term-blockThe capability grid was the worst of it — four tells stacking in one section. Now a borderless two-column list separated by whitespace, which is what §6 already prescribed: "if you're tempted to add a border-bottom to 'section' the document, don't." Rows still align per-row via the grid's default stretch.
Left deliberately: the traffic-light dots, their three colors, and the 50% radius on them — DESIGN.md §5.3 documents them as the one intentional exception.
Second commit: broken npm scripts
npm run dev,npm run deploy,npm run tail, andnpm run statsall failed withMODULE_NOT_FOUND— the.bin/wranglershim path-math bug CLAUDE.md documents for thedb:*scripts and predicted these would eventually hit.npm run devfailing blocked local verification of the styles change, so it's fixed here with the same direct-invoke pattern thedb:*scripts already use.Verification
tsc --noEmitcleanvar(--*)reference resolves to a defined tokenwrangler devNot verified: no screenshot. The browser MCP was disconnected in the session that produced this, so all verification above is structural. The
.capschange is the one most worth a visual check on the preview URL.Two judgment calls worth a second opinion
Follow-up not done here
DESIGN.md still documents the old capability grid, the stale status-dot pulse, and the shadow values this PR changed. Happy to sync the doc in a follow-up once the visual calls above are settled.
🤖 Generated with Claude Code