Design library
The @nge/ui-design-library— standalone, OnPush components with signal input()/output(), themed through CSS-variable tokens, with zero Angular Material.
Portfolio
About
I'm a front-end engineer focused on Angular architecture and design systems — component libraries, data visualization, and the scaffolding that lets teams ship quickly without piling up cruft. I lean on standalone components, signals, and framework-pure patterns over heavy dependencies.
Focus
Selected work
Charts library
The @nge/charts library — a config-driven D3 charting system where each chart type composes optional layers over a shared base, so new types are added by composition rather than by rewriting a renderer.
Table library
The @nge/table library — a data table over the headless TanStack engine, with column pinning, row virtualization, cell ranges and inline editing built on four extension seams; the core was declared finished only once two addons could be added without touching a core file.
Theming
A persona token system — Professional, Home & Service Provider personas in light and dark, built entirely from --dlc-* CSS variables and swappable at runtime.
Cognition
A study companion, live on the web, the App Store, Google Play and the Chrome Web Store, that writes quizzes from a course syllabus and keeps notes and deadlines beside the coursework. It is built on the design library, charts and calendar presented above.
Got You
An Android app, live on Google Play, in which a private circle of family and friends organizes meals, rides and check-ins for someone in a difficult season and follows every sign-up on a shared calendar. It is built on the design library, calendar and table presented above.
Claude Code Design Library Guidelines
The conventions Claude Code follows when building components in the design library — selector & host patterns, --dlc-* token discipline with literal fallbacks, accessibility and type-safety — distilled from a 100+ issue refactor.
Claude Code skills
Custom Claude Code skills that encode the workspace's conventions — scaffolding domains & Storybook stories, placing NgRx state, verifying theming & accessibility — so agent-assisted work stays on-pattern.
Claude Code Instructions
The instruction set Claude Code reads before working here — procedures, standards, and reference docs that define how code in this repo is written, tested, and reviewed.
Context architecture for AI agents
Repository architecture that keeps an AI agent accurate and cheap — normative standards tracked with the code, observational memory in a repository of its own shared by every clone on the machine, and ticket plans as files rather than tracker fields.
ngx-experiments
A clean-room Angular design system & experiments workspace — a custom component library, an extensible charts library, and a Ledger demo, all under the @nge namespace.