clownnvd/claude-ui

Claude UI — Implementation Index

Source: PageFlows (July 2025 — 19 flows, 100+ screenshots). Project: c:\nextjs_project\pulse-analytics → renamed to claude-ui on GitHub.

---

Design Tokens (Quick Reference)

| Token | Value | Usage | |-------|-------|-------| | Background | #F9F6F0 | Page bg — warm cream, NOT white | | Surface | #FFFFFF | Cards, modals, chat bubbles | | Brand accent | #C96A4A | Logo, send btn, New Chat dot | | Text primary | #0F0F0F | Body text | | Text muted | #6B6B6B | Secondary text, placeholders | | Border | #E0E0E0 | All borders, dividers | | Active nav | bg-black/8 | Sidebar active item (valid Tailwind v4) | | CTA | bg-black text-white | Primary buttons | | Heading font | Georgia,'Times New Roman',serif | h1 headings only | | Body font | system-ui, sans-serif | Everything else |

---

Critical Rules (Frequent Mistakes)

| Bug | Correct | |-----|---------| | User messages right-aligned (flex justify-end) | LEFT-aligned — flex items-start gap-3 | | Sidebar has Anthropic logo / settings gear | NO logo, NO gear — only [≡][+][💬][📁][⊞][ST] | | "New chat" is a full-width button | It's a nav item row (coral dot + text) | | Projects badge is blue | Teal — bg-[#E8F4F8] text-[#3B82A0] | | Response toolbar shows on hover | ALWAYS visible (no hover-only) | | Response toolbar: all buttons on left | justify-between — AnthropicMark LEFT, Copy/👍/👎/Retry RIGHT | | "Claude can make mistakes" below chat input | Per-message, right-aligned BELOW response toolbar (not global) | | Clicking chat title → Rename modal directly | Opens DROPDOWN first: Star / Rename / Delete | | StyleIcon is a bolt/lightning bolt | 3 sliders SVG: d="M8 6h13M8 12h9m-9 6h5" | | window.location.href for navigation | Use <Link href> or router.push() | | border-t border-gray-50 (invisible) | Use border-[#E0E0E0] | | AnthropicMark duplicated in files | Extract to src/components/icons.tsx | | AnthropicMark uses double-A wordmark path | Star path: M12 2L9.5 8.5H3L8.5 12.5L6 19L12 15L18 19L15.5 12.5L21 8.5H14.5L12 2Z | | bg-black/8 IDE warning | Valid in Tailwind v4 — compiles correctly | | pnpm dev fails in VSCode (NODE_ENV=production) | Add cross-env NODE_ENV=development to dev script |

---

App Shell Structure

<div className="flex h-screen bg-[#F9F6F0]">
  <Sidebar />          {/* w-12 collapsed / w-64 expanded */}
  <main className="flex-1 flex flex-col overflow-hidden">
    {/* page content */}
  </main>
</div>

Project Structure

src/app/
  page.tsx                  # Login (split layout)
  layout.tsx                # Root layout
  (chat)/
    layout.tsx              # App shell (sidebar + main)
    new/page.tsx            # Home / chat
    recents/page.tsx        # Chat history
    settings/page.tsx       # Settings tabs
    artifacts/page.tsx      # Artifacts list + split view
    upgrade/page.tsx        # Billing / plan cards
  (onboarding)/             # 5-screen onboarding flow
src/components/
  sidebar.tsx               # Collapsible sidebar + account menu
  chat-input.tsx            # Textarea + toolbar + dropdowns

---

Reference Directory

Design System

• references/design-tokens.md — Full token table, Tailwind v4 @theme, sizing conventions
• references/flows.md — All 19 flows table, navigation rules, route map

Components

• references/components/sidebar.md — Collapsed/expanded states, account menu popup
• references/components/chat-input.md — Toolbar buttons, StyleIcon SVG, dropdowns, props
• references/components/messages.md — UserMessage (LEFT), AssistantMessage, ResponseToolbar, AnthropicMark
• references/components/modals.md — Rename, Share, Feedback, Delete, DeleteAccount

Pages

• references/pages/home.md — Empty state hero, conversation view, topbar, upgrade banner
• references/pages/recents.md — Chat card (no preview text), select mode toolbar
• references/pages/settings.md — 6 tabs, Profile fields, Appearance picker, ToggleSwitch
• references/pages/login.md — Split layout, 5-screen onboarding flow
• references/pages/billing.md — Plan cards (Free/Pro/Max), tab toggle, billing toggle
• references/pages/artifacts.md — List page, category pills, card grid, split view

---

Accessibility Checklist

• [ ] Icon buttons → aria-label
• [ ] SVG icons → aria-hidden="true"
• [ ] Toggle switches → role="switch" + aria-checked
• [ ] Form inputs → <label htmlFor> or aria-label
• [ ] Focus ring → outline: 2px solid #C96A4A in globals.css
• [ ] Min touch target → 44×44px

Tailwind v4 Notes

• @import "tailwindcss" replaces old @tailwind base/components/utilities
• @theme inline in globals.css defines custom utility classes
• bg-black/8 = valid arbitrary opacity — IDE warns but compiles correctly
• Custom tokens: bg-cream, bg-brand, text-text-muted, border-border