Skip to content

fix(web): frontend polish pass — overview, AI pages, design pages (v3.3)#55

Merged
mmorerasanchez merged 6 commits into
mainfrom
fix/frontend-fixes-v3.3
May 25, 2026
Merged

fix(web): frontend polish pass — overview, AI pages, design pages (v3.3)#55
mmorerasanchez merged 6 commits into
mainfrom
fix/frontend-fixes-v3.3

Conversation

@mmorerasanchez

@mmorerasanchez mmorerasanchez commented May 25, 2026

Copy link
Copy Markdown
Owner

What

Editorial and visual polish pass across the full site.

Changes

  • Overview: copy rewrite (hero, Why, How), spacing fix, accent on stat numbers, permanent section arrows, sidebar breathing room, sentence case sweep
  • Manifesto: opening quote removed, body text softened to muted
  • Design pages: category jump nav + component count on Atoms, Molecules, Tokens, Templates
  • AI pages: Claude badge, section renames, Stitch cleanup, Replit/Lovable extra prompts, Terminal rename, instruction file table updated

Quality

  • Lint: clean
  • Tests: 83/83 passing (verified across all 8 prompt sessions)

Summary by CodeRabbit

  • New Features

    • Added category jump navigation to design system pages for easier browsing.
    • Included registry link in quick start installation guide.
    • Expanded AI instruction pages with new prompt examples and customization guidance.
  • Documentation

    • Added comprehensive frontend fixes workflow documentation.
    • Updated technology stack reference to reflect latest tooling.
  • Improvements

    • Restructured page layouts and content organization across multiple sections.
    • Enhanced manifesto page styling and typography.
    • Rebranded GitHub distribution card to Terminal.
    • Added component and token counts to overview pages.

Review Change Stack

mmorerasanchez and others added 6 commits May 25, 2026 21:04
…(v3.3)

- Hero subtitle: font-body text-base (matches AI + Manifesto), new colon/semicolon copy
- Why section: atoms link → bradfrost.com/chapter-2, updated para 3
- How: rewritten subtitle
- Heading: Customize with your brand + updated card descs
- Summary: accent on numbers, lighter labels, permanent section arrows
- registry.json link below shadcn registry block
- Sidebar: pt-4 → pt-6
- Design principles → sentence case
- Stats labels: sentence case, no uppercase tracking
- QuickStartSection titles: shadcn registry, Git clone, Manual download

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Remove opening blockquote (closing quote at page end kept)
- PageMeta description updated
- Body paragraphs: text-foreground → text-muted-foreground

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Atoms: 10 atoms · 4 categories + 4-pill jump nav
- Molecules: 18 molecules · 4 categories + 4-pill jump nav
- Tokens: 90+ tokens subtext
- Templates: 7 templates subtext

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Claude: badge → Claude, section renames, remove verbose explanations,
  Projects section removed (Note kept standalone), expanded taste prompts
- Vibe coding: section renames, Lovable/Replit extra prompts, Stitch cleanup,
  token mapping merged into Other vibe coding platforms
- Terminal: card rename GitHub→Terminal in AiPage + OverviewPage,
  remove How CLAUDE.md works, table updated (not-in-repo flags,
  DESIGN.md + docs/design-system.md rows added), Docs section expanded

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented May 25, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
democrito Ready Ready Preview, Comment May 25, 2026 10:56pm

@coderabbitai

coderabbitai Bot commented May 25, 2026

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7b27bc67-9736-40aa-8e1c-bfd9e5e8d72a

📥 Commits

Reviewing files that changed from the base of the PR and between 65dd49b and c7f8be9.

📒 Files selected for processing (14)
  • docs/claude-code-prompts-frontend-fixes.md
  • skill/democrito/SKILL.md
  • src/components/AppSidebar.tsx
  • src/components/organisms/ai/QuickStartSection.tsx
  • src/pages/AiPage.tsx
  • src/pages/AtomsPage.tsx
  • src/pages/ManifiestoPage.tsx
  • src/pages/MoleculesPage.tsx
  • src/pages/OverviewPage.tsx
  • src/pages/TemplatesPage.tsx
  • src/pages/TokensPage.tsx
  • src/pages/ai/claude.tsx
  • src/pages/ai/github.tsx
  • src/pages/ai/vibe-coding.tsx

📝 Walkthrough

Walkthrough

This PR implements a coordinated "frontend fixes v3.3" workflow across the design system landing and catalog pages, updating hero content, adding category navigation, restructuring the manifesto, and refining AI page guidance. The changes include a comprehensive prompt documentation guide, Tailwind v4 version bump, and UI adjustments across multiple pages.

Changes

Frontend Fixes v3.3: Landing, Catalog & AI Pages

Layer / File(s) Summary
Documentation Guide & Tech Stack
docs/claude-code-prompts-frontend-fixes.md, skill/democrito/SKILL.md
Added comprehensive "frontend fixes v3.3" prompt workflow documentation detailing 8 sequential prompts across all affected pages, and updated Tailwind CSS from v3 to v4.
Overview Page Hero & Content Sections
src/pages/OverviewPage.tsx
Rewrote hero subtitle to a new <p> element, expanded "Why" narrative with new emphasis and external atomic-design link, updated "How" lead-in and heading to "Customize with your brand", adjusted stats labels casing, and added ArrowRight icons to section links with "Design principles" heading normalization.
Overview Page AI Paths & Descriptions
src/pages/OverviewPage.tsx
Updated Claude and Terminal (renamed from GitHub) path entries with revised descriptions, labels, and badges reflecting new focus on context file attachment and brand customization.
Category Jump Navigation Across Catalog Pages
src/pages/AtomsPage.tsx, src/pages/MoleculesPage.tsx, src/pages/TemplatesPage.tsx, src/pages/TokensPage.tsx
Added category arrays and top-of-page navigation sections to Atoms (10 atoms · 4 categories), Molecules (18 molecules · 4 categories), and summary counts for Templates (7 templates) and Tokens (90+ tokens).
Manifesto Page Meta & Opening Structure
src/pages/ManifiestoPage.tsx
Updated PageMeta JSON-LD description to "Why design systems still matter in the age of AI generation" and removed opening pull-quote blockquote, restructuring the introduction section markup.
Manifesto Page Content & Text Styling
src/pages/ManifiestoPage.tsx
Restructured body paragraphs across Evidence, Last Twelve Months, Gap, democrito, and closing sections with text-muted-foreground styling, split narrative blocks into multiple paragraphs, and preserved link wrapping within new grouping.
Claude Page Sections & Prompts
src/pages/ai/claude.tsx
Renamed badge from "Anthropic" to "Claude", updated section labels ("Inspect context files", "Install the context in your project"), added "Files to add to Project knowledge" note, and replaced "Claude Projects setup" with "Customize with your brand" and "Play with your taste" sections featuring expanded prompt examples.
GitHub Page Instruction Ecosystem & Docs
src/pages/ai/github.tsx
Revised instruction-file ecosystem section 2 intro, updated table rows with "not yet in repo" indicators, added DESIGN.md entry, renamed "AGENTS.md" label, and restructured docs section to highlight docs/design-system.md as a key file with new "Docs" section title.
Vibe Coding Page Sections & Customization
src/pages/ai/vibe-coding.tsx
Renamed "Lovable" section with added brand-direction prompt, removed Stitch section preamble notes, removed Step 2 verification details, renamed "Replit" section with customization snippet, and flattened "Other vibe coding platforms" by removing nested sub-section wrapper.
Component Layout & Navigation Updates
src/components/AppSidebar.tsx, src/components/organisms/ai/QuickStartSection.tsx, src/pages/AiPage.tsx
Increased AppSidebar top padding from pt-4 to pt-6, updated QuickStartSection path labels to lowercase and added conditional registry.json external link for recommended paths, and renamed AiPage GitHub card to "Terminal" with badge swap.

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly Related PRs

  • mmorerasanchez/democrito#48: Introduces calibration, Stitch, token mapping, and AGENTS.md content on /ai pages that this PR directly refines with section restructuring and prompt updates.
  • mmorerasanchez/democrito#34: Overlaps on src/pages/OverviewPage.tsx modifications including hero tagline, stats/sections UI styling, and content updates.
  • mmorerasanchez/democrito#26: Directly modifies the same src/pages/ManifiestoPage.tsx content and structure, including blockquote handling and narrative restructuring.

Poem

🐰 A rabbit's whisper through the fixes—
Hero subtitles dance in new syntax,
Categories leap with anchor-bound clicks,
While manifesto paragraphs find softer tints,
AI pages bloom with fresher prompts and cheer! 🌱✨

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/frontend-fixes-v3.3

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@mmorerasanchez mmorerasanchez merged commit f00c46d into main May 25, 2026
3 of 4 checks passed
@mmorerasanchez mmorerasanchez deleted the fix/frontend-fixes-v3.3 branch May 25, 2026 22:57
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