Skip to content

Browser-showpiece hero, SEO, and design polish for reins.tech#23

Merged
karngyan merged 2 commits into
mainfrom
web-design-seo-polish
Jul 17, 2026
Merged

Browser-showpiece hero, SEO, and design polish for reins.tech#23
karngyan merged 2 commits into
mainfrom
web-design-seo-polish

Conversation

@karngyan

Copy link
Copy Markdown
Contributor

Polishes the docs site (reins.tech) end to end: a new distinctive hero, full SEO, dark-mode contrast fixes, a fresh OG image, and one build-infra fix.

Hero

Replaces the split copy/terminal hero with a browser showpiece — a browser window being driven by an agent:

  • Chrome bar on a production URL (app.acme.com/checkout) + the Chrome-style "reins is controlling this browser" banner.
  • A sign-in form with e3/e7 element-ref chips and a cursor about to click Sign in.
  • A docked agent session running reins snapshotreins click --ref e7✓ clicked e7.

Explored 4 directions (command-bar demo, browser showpiece, architecture flow, editorial minimal) via the ui.sh picker, informed by Linear / Firecrawl / Resend. Picker scaffolding fully removed after selection.

The same illustration is added to the README as a light/dark <picture>.

Design polish

  • FAQ dividers (root cause): Tailwind v4 ships no default border color, so bare border-* fell back to currentColor — harsh near-black/near-white lines per theme. Added a base layer defaulting border-color to the token; fixes dividers site-wide.
  • Dark-mode TOC: active items + rail thumb now use violet-300 so they're legible on the near-black background.
  • Terminal: real macOS traffic-light colors; dark mode gets a distinct surface + ring so the card doesn't melt into the page.
  • Hero backdrop utilities (dot grid + soft violet glow).

SEO

  • Per-route title / description / canonical / OG via a small seo() helper.
  • JSON-LD: SoftwareApplication (home), FAQPage (FAQ).
  • Root: og:site_name, og:image dimensions/alt, light/dark theme-color.
  • public/: sitemap.xml, robots.txt, llms.txt.
  • New 1200×630 og.png matching the site (dark, violet glow, reins glyph).

Build fix

  • packages/protocol tsdown.config.ts: clean: false. In pnpm dev, protocol's --watch wiped dist/ on startup while extension/cli builds resolved @reins/protocol from it in parallel → intermittent "Rolldown failed to resolve import". Single fixed entry overwrites in place, so cleaning was unnecessary.

Verification

  • pnpm typecheck + biome check pass.
  • pnpm build prerenders all 14 pages; picker fully absent from output; SEO tags confirmed in prerendered HTML.
  • Hero, FAQ, and TOC verified in light + dark by driving the local dev site.

🤖 Generated with Claude Code

karngyan and others added 2 commits July 18, 2026 00:48
`pnpm dev` runs protocol's `tsdown --watch` alongside the extension/cli
builds. With `clean: true`, the watch task wiped `dist/` on startup while
those builds resolved `@reins/protocol` from it in parallel, intermittently
failing with "Rolldown failed to resolve import @reins/protocol".

The package has a single fixed entry (`src/index.ts` -> `index.js` /
`index.d.ts`) that overwrites in place, so cleaning is unnecessary and there
are no orphan outputs to prune.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Hero
- New `Hero` (components/hero.tsx): a browser window being driven by an
  agent — chrome bar on `app.acme.com/checkout`, Chrome-style "reins is
  controlling this browser" banner, a sign-in form with e3/e7 element refs
  and a cursor about to click, and a docked agent session running
  `reins snapshot` -> `reins click --ref e7`. Replaces the split/terminal hero.
- README: light/dark `<picture>` of the same illustration
  (.github/assets/hero-{light,dark}.png).

Design polish
- Fix Tailwind v4 border-color fallback: bare `border-*` utilities resolved
  to currentColor, rendering the FAQ accordion dividers as harsh near-black/
  near-white lines. Add a base layer defaulting border-color to the token.
- Dark-mode TOC contrast: active items and the rail thumb use a lighter
  violet (violet-300) so they read against the near-black background.
- Terminal: real macOS traffic-light colors; dark mode gets a distinct
  surface + ring so the card no longer melts into the page.
- Hero backdrop utilities (dot grid + soft violet glow).

SEO
- Per-route title/description/canonical/OG via a small `seo()` helper.
- JSON-LD: SoftwareApplication (home) and FAQPage (FAQ).
- Root: og:site_name, og:image dimensions/alt, light/dark theme-color.
- public/: sitemap.xml, robots.txt, llms.txt.
- New 1200x630 og.png matching the site (dark, violet glow, reins glyph).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@karngyan
karngyan merged commit b9ce02e into main Jul 17, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant