- 45M
- students and 4.5M educators reached across 100 countries and territories
- 6
- dimensions of UI rigor: visual polish, i18n/l10n, tracking, responsiveness, a11y, API flexibility
- 3
- generations of the library: Comet (2016), Nebula (2020), nebula-nuxt (2026)
- 124
- components and utilities managed across Nebula and nebula-nuxt
- 12
- product teams consuming the systems
- $3.05
- cost to create a component, doc page, and release end to end
- Three generations of one company's design system: founding team for Comet (2016), builder of its successor Nebula (2020), and sole architect of nebula-nuxt (2026), a themed component layer that lets twelve product teams replace legacy UI incrementally while migrating to Nuxt.
- nebula-nuxt
- Proposal Stage
- Architected nebula-nuxt: Nuxt UI plus custom components, themed to match the legacy Nebula brand, letting teams replace legacy UI incrementally while migrating to Nuxt and separating visual-language changes from component rebuilds. Deliberately transitional, not the end state. Payoff: post-migration, the org can shift visual language via a theme change alone, with no component rebuild needed.
- Led migration audit and stakeholder roadmap: analyzed legacy Nebula components, flagged highest-priority candidates, determined Nuxt UI equivalent vs. custom rebuild per component, assigned points per component, compiled into timeline.
- nebula-nuxt was selected over competing proposals as the quarter's committed deliverable; legacy Nebula support was separately recognized as its own committed item.
- Product Integration
- Of the 46 legacy components on the roadmap, 26 had been migrated to nebula-nuxt when I moved on: I built 25 of them and a teammate built the other. The remaining 20 had not yet been started.
- Teammates also contributed to nebula-nuxt, adding updates and new components alongside my work.
- Integrated nebula-nuxt into the platform layer with ten production components, including Global Nav, Page Shell, and Modal; added pages to the platform team's playground showing those components under a live theme switcher, legacy Nebula vs. nebula-nuxt side by side, proving they stayed themable inside the production shell.
- Doc Site Designer
- Built the new playground doc site for nebula-nuxt with searchable documentation via Nuxt Content; designed and implemented the entire layout and UI, and added robust scaffold, theming, and localization documentation displayed through Nuxt Content.
- Extended Nuxt UI with custom components: Tabs with responsive nav+panel variants, and Breadcrumbs with dropdowns that convert into a searchable command palette past 7 options, powered by a custom rowCollapse composable not provided by Nuxt UI/Reka out of the box.
- Created a live Theme Editor in the nebula-nuxt doc site that switches between the default Nuxt UI theme, legacy Nebula, and another unique theme, with editing granular down to color scale, spacing, font, and border radii and other theme tokens; the theme persists across all component pages until changed or reset.
- Note: nebula-nuxt is internal; not publicly viewable.
- Nebula Components
- Builder and maintainer of Nebula Components, predecessor to nebula-nuxt. Managed both design systems simultaneously. Nebula docs (opens in a new tab)
- Built MegaMenu for a Back-to-School product deliverable. Core technical feature: detects at runtime when to collapse into a linked drill-down list view, rather than relying on fixed breakpoints. Component adapts its own layout based on available space and content, rather than hiding items past a hardcoded width. MegaMenu demo (opens in a new tab)
- Designed the responsive collapsed view myself: a linked drill-down list, not an accordion, that lets users tap into a category and navigate back out.
- Initial build: 3 days. Product then underwent significant redesign; updated MegaMenu delivered in 3 more days, matching new design.
- Built NebulaContainerTable, an enhanced NebulaTable that uses container queries instead of media queries, so the table adapts to its own container size rather than the viewport — more flexible across layouts. ContainerTable demo (opens in a new tab)
- AI Tooling
- Claude Skills
- Wrote a Claude planning skill that picks the build approach per component: themed primitive, wrapped primitive, or fully custom component, running at about $1.75 per run.
- Wrote a Claude release-automation skill for the migration, running at about $0.02 per run.
- Wrote a Claude skill to port existing component doc-page examples from Nebula Components to nebula-nuxt, ensuring new components stayed backward compatible, running at about $1.30 per run.
- Wrote Claude Skill to audit and fix localization across the platform, refined against 9 company repos and used successfully in production.
- Extensions
- Built prompt-cache timer extension for VS Code because company experienced runaway Claude spend and began limiting monthly allowance per engineer. No such extension existed for VS Code at the time. Built one to fill the gap, tracking and surfacing prompt-cache timing directly in-editor. Shared with team to help others manage spend under new budget constraints.
- Slash Commands
- Built plan-create/plan-update slash commands for Claude Code: structured markdown plan docs (executive summary, phases, success criteria, known issues) generated conversationally, with approval-gated drafts and diff-style updates. Enforces consistent status markers and preserves historical context across iterations, turning ad hoc dev notes into a living, reviewable spec.