Build portfolio site scaffold for design systems designer#2
Conversation
Full Next.js 15 + TypeScript portfolio from scratch: - 3-tier CSS custom property token system (primitive → semantic → component) with dark/light mode via [data-theme] attribute and anti-flash script - Inter + JetBrains Mono via next/font - Nav, Footer, ThemeToggle layout shell - UI primitives: Button (3 variants × 3 sizes), Tag, Divider, ProseWrapper - Homepage: Hero, WorkGrid (3 case study cards), AboutTeaser, SkillsStrip - MDX pipeline with @next/mdx + gray-matter; 3 fully-written fake case studies (Meridian, Forma, Dusk) with MetricCallout, Annotation, TokenTable components - About page with Philosophy (4 principles) and SkillsGrid (4 categories) - Playground page: live token swatches, type scale, spacing scale, component showcase - Zero TypeScript errors, clean next build (10 static pages) https://claude.ai/code/session_01AE6J2xmBzQRFi2CWxgd8RZ
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 5f8a354. Configure here.
| The work that makes all other work possible. | ||
| </p> | ||
| <div className={styles.actions}> | ||
| <Button href="/work" size="lg">View work</Button> |
There was a problem hiding this comment.
Nav and Hero link to nonexistent /work page
High Severity
The "View work" hero CTA and the "Work" nav link both point to /work, but there is no src/app/work/page.tsx — only src/app/work/[slug]/page.tsx exists. Clicking either link results in a 404. This is a primary navigation path and the main homepage call-to-action.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 5f8a354. Configure here.
| return ( | ||
| <div className={styles.swatch}> | ||
| <div | ||
| className={[styles.color, styles[group]].join(" ")} |
There was a problem hiding this comment.
TokenSwatch references nonexistent CSS module classes for group
Low Severity
styles[group] looks up classes like bg, text, border, or accent in TokenSwatch.module.css, but none of these classes are defined there. This causes undefined to be joined into the className string, resulting in the literal text "undefined" appearing as a CSS class on the swatch element.
Reviewed by Cursor Bugbot for commit 5f8a354. Configure here.
@next/mdx does not support Turbopack — MDX dynamic imports fail silently in Turbopack mode, causing the notFound() fallback to trigger on all /work/[slug] routes. Build script was already fixed; same fix applied to dev. https://claude.ai/code/session_01AE6J2xmBzQRFi2CWxgd8RZ
|
You have used all of your free Bugbot PR reviews. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
- Add src/app/work/page.tsx (was missing, caused 404 on nav "Work" link) - Replace @next/mdx dynamic template-literal import with explicit per-slug module map so webpack can statically analyze all MDX files - Add required mdx-components.tsx at project root (mandatory for @next/mdx with App Router — without it the MDX React context fails at prerender) - Add transpilePackages: ['@mdx-js/react'] to next.config.ts to fix ESM-only @mdx-js/react createContext error in webpack SSR bundle - Downgrade @next/mdx from 16.x (Next.js canary) to 15.x (matching next) - Remove --turbopack from dev script (@next/mdx not Turbopack-compatible) Result: clean build, all 11 pages statically prerendered. https://claude.ai/code/session_01AE6J2xmBzQRFi2CWxgd8RZ
|
You have used all of your free Bugbot PR reviews. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
- Token system: warm off-white (#f8f7f4) bg, lime replaces blue as accent - Hero: display-scale name typography (clamp 3.5–8rem), no CTAs - Work section: numbered editorial list replaces card grid - AboutTeaser: two-column layout with stat figures on right - SkillsStrip: grouped text columns, no pill tags - Footer: large typographic name block + minimal bottom row - Nav: backdrop-filter blur, minimal hover states https://claude.ai/code/session_01AE6J2xmBzQRFi2CWxgd8RZ
|
You have used all of your free Bugbot PR reviews. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
…athing room - Hero name: "Elara" in regular weight/secondary color, "Reyes" bold/primary + lime period - Hero: thin rule between label and name, doubled top padding, tagline at --text-xl - Hero meta: small green dot indicator on availability status - Work list: each item reveals a 2px left bar in its coverAccent color on hover; item number and arrow also transition to the coverAccent color - Work list: left indent on link to accommodate accent bar - About stats: bumped from text-3xl to text-4xl for more visual weight - Nav: full "Elara Reyes" name replacing "ER" abbreviation https://claude.ai/code/session_01AE6J2xmBzQRFi2CWxgd8RZ
|
You have used all of your free Bugbot PR reviews. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
2 participants
Summary
[data-theme]attribute with anti-flash script, and no Tailwind — tokens are fully visible in DevTools/work/[slug]), About page (Philosophy + SkillsGrid), and an interactive Playground page (live token swatches, type scale, spacing ruler, component showcase)Test plan
npm run dev— all 4 routes load without error/work/building-meridian,/work/scaling-forma,/work/token-migration-dusk— MDX compiles,MetricCallout,Annotation, andTokenTablecomponents render inside prose/playground— color swatches, type scale, spacing scale, and component showcase all render; theme toggle updates swatches--color-text-primary,--space-section)npm run build— zero TypeScript errors, 10 static pages generatedhttps://claude.ai/code/session_01AE6J2xmBzQRFi2CWxgd8RZ
Note
Medium Risk
Moderate risk because it introduces a large amount of new routing, MDX compilation/loading, and client-side theme persistence; failures would break page rendering or cause hydration/theme flash issues.
Overview
Builds out a full Next.js 15 + TypeScript portfolio scaffold with a global CSS custom-property token system (including light/dark semantic overrides via
data-theme) and shared layout withNav,Footer, and an inline anti-flash theme initialization script.Adds new pages for
Home,About, and aPlaygroundthat showcases tokens/components, plus a dynamic/work/[slug]route that statically generates MDX case studies, derives metadata from frontmatter, and injects custom MDX components (MetricCallout,Annotation,TokenTable) wrapped inProseWrapper.Introduces MDX support in
next.config.ts, content loading utilities (getAllSlugs,getMdxContentusinggray-matter+ dynamic MDX imports), case study data/types, and a set of new UI primitives (Button,Tag,Divider,ThemeToggle) used across the site.Reviewed by Cursor Bugbot for commit 5f8a354. Bugbot is set up for automated code reviews on this repo. Configure here.