onlook-dev/onlook
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
Low
Design risk in this codebase.
Verdict
The section-composition pattern across these pages is solid and keeps each file thin and legible, but the callback page's GitHub install flow has real accessibility gaps (no aria-live on state changes, an unguarded infinite spinner, an auto-closing tab with no user control) that would frustrate anyone using assistive tech or reading slowly. The two hero wrappers share a viewport-unit habit (h-screen, w-screen) that causes real clipping and overflow on mobile Safari and desktop scrollbars respectively, an easy one-line fix in both places.
Files Rams reviewed
apps/web/client/src/app/about/layout.tsx
apps/web/client/src/app/auth/redirect/page.tsx
apps/web/client/src/app/callback/github/install/page.tsx
apps/web/client/src/app/faq/layout.tsx
apps/web/client/src/app/features/ai-for-frontend/layout.tsx
apps/web/client/src/app/features/ai/layout.tsx
apps/web/client/src/app/features/ai/page.tsx
apps/web/client/src/app/features/builder/layout.tsx
apps/web/client/src/app/features/builder/page.tsx
apps/web/client/src/app/features/layout.tsx
apps/web/client/src/app/features/page.tsx
apps/web/client/src/app/features/prototype/layout.tsx
apps/web/client/src/app/layout.tsx
apps/web/client/src/app/login/page.tsx
apps/web/client/src/app/page.tsx
apps/web/client/src/app/pricing/page.tsx
apps/web/client/src/app/project/[id]/layout.tsx
apps/web/client/src/app/project/[id]/page.tsx
apps/web/client/src/app/projects/_components/select/masonry-layout.tsx
apps/web/client/src/app/projects/import/github/page.tsx
apps/web/client/src/app/projects/import/local/page.tsx
apps/web/client/src/app/projects/import/page.tsx
apps/web/client/src/app/projects/layout.tsx
apps/web/client/src/app/see-a-demo/page.tsx
apps/web/client/src/app/site-map/layout.tsx
apps/web/client/src/app/site-map/page.tsx
apps/web/client/src/app/workflows/claude-code/layout.tsx
apps/web/client/src/app/workflows/layout.tsx
apps/web/client/src/app/workflows/page.tsx
apps/web/client/src/app/workflows/vibe-coding/layout.tsx
UX
apps/web/client/src/app/callback/github/install/page.tsx:55
Success screen closes the tab after 3 seconds with no user control
The onSuccess handler sets state to 'success', shows the message, then calls window.close() inside a 3-second setTimeout with no visible countdown, pause, or cancel affordance.
Why it matters
A user who looks away or reads slowly loses the confirmation before finishing it, and has no way to keep the tab open to copy details or verify the install completed.
Fix
Show a visible countdown with a 'Close now' / 'Keep open' control instead of silently closing the tab on a fixed timer.
onSuccess: (data) => {
setState('success');
setMessage(data.message);
console.log('GitHub App installation completed:', data);
setTimeout(() => {
// Close the tab since we are using a new tab
window.close();
}, 3000);
},onSuccess: (data) => {
setState('success');
setMessage(data.message);
console.log('GitHub App installation completed:', data);
// Let the StateContainer render a countdown with a manual 'Close now' action
// instead of force-closing the tab.
},apps/web/client/src/app/page.tsx:20
Hero content can be clipped by mobile browser chrome
The hero wrapper on the homepage, div id="hero" wrapping <Hero />, is sized with h-screen (100vh). On mobile Safari and Chrome, 100vh includes the area behind the collapsible address bar, so the actual visible viewport is shorter than 100vh. Centered content in a fixed-height container can render partially behind the browser chrome on first load.
Why it matters
The hero is the first thing every visitor sees, and clipped or cut-off copy there increases bounce before the message even lands.
Fix
Use min-h-screen or the dynamic viewport unit (100dvh) instead of a static h-screen so content reflows within the true visible viewport.
<div className="w-screen h-screen flex items-center justify-center" id="hero">
<Hero />
</div><div className="w-screen min-h-screen flex items-center justify-center" id="hero">
<Hero />
</div>Spacing
apps/web/client/src/app/features/builder/page.tsx:61
Builder hero's w-screen triggers a horizontal scrollbar on desktop
The hero wrapper div id="hero" wrapping <BuilderFeaturesHero /> uses w-screen, which equals the full viewport width including the area under the vertical scrollbar. Since the page itself scrolls vertically, this pushes the hero wider than the visible content area.
Why it matters
On desktop browsers with a visible scrollbar, this creates a few pixels of horizontal overflow, which shows up as an unwanted horizontal scrollbar or a 1-2px content shift on an otherwise clean landing page.
Fix
Use w-full instead of w-screen on in-flow containers so width tracks the parent instead of the raw viewport.
<div className="w-screen h-screen flex items-center justify-center" id="hero">
<BuilderFeaturesHero />
</div><div className="w-full min-h-screen flex items-center justify-center" id="hero">
<BuilderFeaturesHero />
</div>Get this score on every PR.
Rams reviews each pull request on your repo and posts inline one-click fixes — about a minute per review.
Install Rams freeMotion
apps/web/client/src/app/callback/github/install/page.tsx:102
Loading spinner ignores prefers-reduced-motion
The spinning ring border-t-white/30 animate-spin on the loading indicator runs an unconditional infinite CSS animation with no reduced-motion guard anywhere in the file.
Why it matters
Users with vestibular disorders who have set prefers-reduced-motion get full continuous spin motion during the entire GitHub connection flow, which can trigger discomfort during a step they can't skip.
Fix
Gate spin animations behind a motion-safe: variant or a prefers-reduced-motion media query so reduced-motion users see a static indicator instead.
<div className="absolute inset-0 rounded-full border-4 border-transparent border-t-white/30 animate-spin" /><div className="absolute inset-0 rounded-full border-4 border-transparent border-t-white/30 motion-safe:animate-spin" />Craft
apps/web/client/src/app/page.tsx:24
Dead commented-out sections left in the live landing page
Two JSX lines, {/* <CodeOneToOneSection /> */} and {/* <ObsessForHoursSection /> */}, sit between the live sections ResponsiveMockupSection, WhatCanOnlookDoSection, and ContributorSection. Neither is imported nor rendered.
Why it matters
Dead markup left in a shipped page signals unfinished cleanup and makes it unclear to the next engineer whether these sections are planned, deprecated, or a mistake, which slows future edits to this file.
Fix
Remove commented-out JSX before merging; rely on version control history if the sections need to be restored later.
<ResponsiveMockupSection />
{/* <CodeOneToOneSection /> */}
<WhatCanOnlookDoSection />
{/* <ObsessForHoursSection /> */}
<ContributorSection /><ResponsiveMockupSection />
<WhatCanOnlookDoSection />
<ContributorSection />Accessibility
Typography
Color
Components
Working well
- Composing the landing page from named section components (Hero, ContributorSection, TestimonialsSection, FAQSection, CTASection) keeps page.tsx readable and each section independently maintainable, which is exactly how a long marketing page should be structured.
- The error state on the GitHub install callback pairs a clear recovery action ('Try Again') with an escape hatch ('Return to Import') instead of leaving the user stuck on failure, which is the right pattern for any async connection flow that can fail.
- The sr-only 'Visual Builder Summary' section on the builder features page gives crawlers and assistive tech a structured H1/H2/list overview without duplicating or cluttering the visible layout, a clean way to boost content accessibility for free.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 59/100. This rescore on v0.0.3: 90/100.
This page is an automated design review of onlook-dev/onlook’s UI code: 30 files read against 309 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
