Project journal

The site now serves a public MCP endpoint at /api/mcp, and any AI client can connect with nothing but the URL. Five tools sit behind it: the component list, the full prop details for any component, the design tokens, install setup, and search over the site's content. Everything it serves is already public, and new build checks keep the data exact.

Five releases over the fortnight added 41 components. Most were found by building real screens with the system and filling what was missing: a dashboard set, the maps set with the globe, composition pieces like the gauge and split pane, and a final six this week. A new design QA pass now reviews every component in both themes before it joins the library.

The colour blobs behind every page were rebuilt as a WebGL field that reads its colours from the design tokens, with the old CSS version kept as a fallback. The thirteen case-study cover screens were redrawn in code so they can follow light and dark mode, then shipped as pre-rendered images so they hold up on phones. The robr0 DS case study was rewritten around six lessons in the same stretch.

The chat's test bench merged into the playground, now one tool with two views over the same theming levers: Components and Chat. The chat itself gained smooth resizing between its docked and full-screen shapes, links into the site's own pages, feedback buttons, and three suggested follow-up questions after each answer. The licence split too: the code stays MIT, the writing is now all rights reserved. Releases 0.5.0 and 0.6.0 carried the chat components to npm.

Built over two days and mounted on every page: a floating chat that answers questions about the site, the design system, and Rob's work. It reads only what the site already publishes, and a set of 78 test questions measures whether the answers are right. Conversations are kept for thirty days, disclosed in the widget itself.

content-design.md now sets how every shipped sentence reads, and each public page was rewritten against it. The same week, /design-system became a real landing page with a live component collage, the home page settled on three case-study cards, and the playground moved to its own top-level address.

Eighteen components were rebuilt so the package behaves like one built for strangers: refs, native attributes, and form-library support throughout. Forty-nine accessibility issues were fixed, and accessibility checks now run on every build. Releases 0.2.0 and 0.3.0 went out, with four new components alongside.

A new Customization section shows theming rather than describing it: a get-started guide, and a playground where colour, radius, and font levers restyle the whole page live, then hand over the CSS to paste into your own project.

The library is now on npm as @robr0/design-system, installable by anyone, with version 0.1.0 out the same day. The site became the package's first consumer, importing it exactly the way a stranger would.

Every page now declares its canonical address, case studies emit structured data, and the sitemap carries real last-modified dates. The site also serves an index at /llms.txt for AI agents, plus branded preview images for link sharing.

Motion timings became twelve duration and easing tokens with a reduced-motion guard, and icons moved onto a four-step size scale; both got their own foundations pages. Five components joined the library, and the 27 components with no written spec all got one.

Every push now runs a full pipeline: lint, the builds, and a render test of every Storybook story (434 at the time), so a broken component can no longer land unnoticed. One verify script mirrors the whole pipeline locally.

The blurred colour blobs behind every page were redrawn as radial gradients that look identical but cost the GPU almost nothing, ending the visible blanking while scrolling on desktop.

A gap analysis against mature design systems ranked what was missing, and the three highest-impact components shipped together, each with stories, a showcase page, and a spec. The site's About cluster was renamed Docs the same day.

The repo and site were audited end to end: security headers added, feed HTML sanitised, dependency vulnerabilities patched, stray identifiers removed from published content, and a security policy published. The audit closed clean.

The growth loop shipped: a weekly scheduled task that reads the site's analytics, proposes one copy change on a branch, and reports for approval. Underneath it, every count shown on the site started coming from registry files checked at build time, so no number can quietly go stale. Six content components shipped in support, including Timeline, which this page is built with.

A technical SEO pass hardened how the site presents itself, the analytics setup was repaired and gained an on-demand reporting script, and a new Writing section now syncs articles from Substack. The logo picked up an animated variant.

The accent colours took on evocative names, the long-standing theme-toggle flicker was finally fixed, and the contact page gained a Stripe consultation-booking section. The site also moved to the robertritacca.com domain.

The project's biggest identity shift: the site stopped being a component showcase with an about page and became Robert Ritacca's portfolio, with the design system as its flagship exhibit. A MegaNav, breadcrumbs, a contact page, and six case studies arrived in one push.

design.md, the full spec for tokens, colour, typography, and every component rule, was written down and published on the site, with CLAUDE.md joining it under a Blueprints section soon after. The documents that govern the build became content in their own right.

Three repeatable QA checks (heuristic analysis, accessibility audit, and API consistency review) were packaged as skills an AI agent can run, published on a new Skills page with copyable source. They grew into the scheduled skills system that runs parts of the site today.

Eight chart components, application shell pieces, and two dashboard demo pages that compose them: proof the system could build real product screens. The overlay tier filled out in the same push, with an accessibility sweep across the board.

A single day took the library from a handful of components to a real system: inputs, tabs, tables, badges, menus, and a dozen more, each with stories and a showcase page. Consistency passes on icons, spacing, and focus states kept the sprint from producing a pile of parts. Google Analytics went in the same day.

A separate Next.js site went up on Vercel to show the system, importing the real components so every example is live. Home, About, Components, and Foundations appeared immediately, with links from each page to its Figma frame and Storybook story.

The project began with its rules, not its components: a three-tier token architecture with light and dark values from the first commit, self-hosted icons, and a Storybook wired to the tokens. Button arrived from Figma as the first component. The constraints set in these 48 hours still govern everything since.