Capability lens / 11

Frontend & design engineering

Cross-device UI, component and state systems, data flow, testing, deployment, and recovery.

This lens prioritizes traceable ownership, architectural use, engineering challenges, and verification boundaries rather than a technology-logo wall.

01 / Start here

4 verified technical evidence entries

  • Open project: Money

    Money

    A private, local-first personal ledger

    A private and recoverable PWA built around years of real bookkeeping habits, combining fast mobile entry, cross-device sync, and progressive access to the full ledger history.

  • Open project: Excalicord

    Excalicord

    A whiteboard explainer workspace with teleprompter and recording built in

    A desktop-first explainer workspace that combines an Excalidraw-style canvas with scenes, teleprompter, reference media, camera bubble, recording frame, and GitHub sync.

  • Open project: Cleaner

    Cleaner

    Explainable, selective, and safer macOS cleanup

    A local-first macOS cleanup and prevention tool that attributes storage and machine load before offering risk-aware cleanup, managed .noindex roots, and explicit temporary-item migration.

  • Open project: Speech Transcription

    Speech Transcription

    A quieter way to hold spoken thoughts

    Some ideas arrive more honestly in voice than in text. I built this to catch those moments before they disappear, then return to them later with less friction.

02 / Capability index

Every technology maps back to real use

  1. 01

    React + TypeScript

    responsive PWA and cross-device interaction

  2. 02

    IndexedDB

    immediate local reads for history

  3. 03

    Worker + D1

    authentication, relational data, and cloud truth

  4. 04

    React

    desktop presenter workspace and layered interaction state

  5. 05

    Excalidraw

    an editable whiteboard canvas

  6. 06

    GitHub API

    project push / pull / restore and conflict protection

  7. 07

    SwiftUI

    native macOS UI and high-risk confirmation flow

  8. 08

    SwiftPM

    CleanerApp / CleanerCore module boundaries

  9. 09

    Local diagnostics

    disk, process, indexing, and browser-residue diagnostics

  10. 10

    Next.js + React

    home, Quick Capture, history, detail, and settings surfaces

  11. 11

    Web Speech API

    browser transcription and recording state

  12. 12

    localStorage + IndexedDB

    separate transcript metadata and raw audio blobs

03 / Continue

Other forms of the same capability

  • Open project: HTML Board for macOS

    HTML Board for macOS

    Menu bar app with global floating window for local HTML boards

    A macOS menu bar utility that turns scattered local HTML reports into a persistent searchable dashboard with hotkey launch and system notifications.

  • Open project: Token

    Token

    Quota status in your menu bar

    A tiny menu bar status utility that polls quota APIs and keeps remaining allowance visible in the top bar to reduce dashboard context switching.

  • Open project: MermaidFlow

    MermaidFlow

    Free Online Mermaid Diagram Editor

    An online Mermaid editor with syntax highlighting, live preview, and export support for text-first diagram workflows.

  • Open project: Jianpu Player

    Jianpu Player

    Numbered notation player with Web Audio

    Enter numbered notation with BPM, lyrics, ties, dots, and slides, then audition it with sampled piano tone, transposition, and note-name conversion.

  • Open project: Motion Atlas

    Motion Atlas

    Frontend motion library with preview-first browsing

    A motion gallery for web interfaces that starts with visible previews, then helps select reusable templates and implementation guidance.

  • Open project: Vercel Projects Analytics Board

    Vercel Projects Analytics Board

    Team-level project analytics and allprojects cross-check

    A governance board that consolidates Vercel projects, Web Analytics, Speed Insights, and allprojects mappings to surface coverage gaps and drift quickly.

  • Open project: Next.js Upgrade Board

    Next.js Upgrade Board

    Multi-repo version scanning with upgrade guidance

    A Next.js upgrade governance board that scans local repositories, summarizes version distribution and Vercel linkage, and outputs executable upgrade commands.