Skip to content
View uxderrick's full-sized avatar
🎯
Focusing
🎯
Focusing

Block or report uxderrick

Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
uxderrick/README.md

Hi, I'm Derrick πŸ‘‹

πŸ“ Accra, Ghana | πŸ› οΈ Product Designer and Design Engineer | πŸŽ™οΈ Edge Cases Podcast Co-host

TypeScript React Next.js Tailwind SwiftUI Claude

Started in Figma, ended up shipping software. Still not sure how that happened, but I'm not stopping.

🌐 uxderrick.com - Portfolio & work

Apps

  • πŸͺž Mirror - Virtual try-on for iOS; screenshot any outfit, see yourself wearing it in seconds (App Store)
  • πŸ”” Chime - macOS menubar app that blocks your entire screen so you never miss a meeting again (App Store)
  • 🧠 MECE Agent Skill - Structured thinking and decomposition for AI agents

Current Projects

  • πŸ’° PennyWatch - Personal finance tracker that reads bank SMS, parses with AI, and gives spending insights via Telegram
  • 🧩 Components.lol - Chrome extension that extracts design tokens and components from any website
  • πŸ—ΊοΈ Mappd - See your entire React app at once. All screens rendered live on an infinite canvas with navigation flows
  • 🧭 Navii - Navigation tooling and interface experiments
  • πŸ”” ChimeAlert - ADHD-friendly, impossible-to-miss full-screen alert system for macOS. Extracted from Chime
  • πŸŽ™οΈ Edge Cases Podcast - Design challenges, career growth, and the future of product design

Agent Skills & Developer Tools

  • 🧠 MECE Skill - MECE validation and decomposition skill for AI agents. Works with Claude Code, Cursor, Copilot, Codex, Gemini CLI
  • 🎨 Colorless - Color tooling for design and interface work
  • ✍️ Marginalia - Interface and annotation experiments

What I'm Doing

  • Designing healthcare and fintech tools - Product work for essential medicine access, banking operations, and underserved markets
  • Shipping AI agent tooling - Skills and frameworks for Claude Code, Cursor, Codex, and other AI coding agents
  • Building design tools - Solving problems I've hit myself as a product designer
  • Shipping indie software - Web, iOS, and macOS products from idea to release
  • Growing communities - Led Ghana's Figma Community for 2 years, spoke at Figma Config '22
  • Mentoring designers - Sharing what I know on ADPlist

Connect

Twitter LinkedIn Behance Medium Portfolio


"Design is how it works" - I build tools that solve real problems, then open-source the parts worth sharing.

Pinned Loading

  1. Web Animation Best Practices & Guide... Web Animation Best Practices & Guidelines - A comprehensive guide to creating great web animations
    1
    # Web Animation Best Practices & Guidelines
    2
    
                  
    3
    ## Document Purpose
    4
    This is a comprehensive reference guide for creating high-quality web animations. Use this as a knowledge base for implementing animations in web applications. All principles, timing values, and easing functions provided here are production-tested and ready to use.
    5
    
                  
  2. mece-skill mece-skill Public

    MECE (Mutually Exclusive, Collectively Exhaustive) validation and decomposition skill for AI agents. Works with Claude Code, Cursor, Copilot, Codex, Gemini CLI.

    17 4

  3. ChimeAlert ChimeAlert Public

    ADHD-friendly, impossible-to-miss full-screen alert system for macOS. Extracted from Chime app.

    Swift 5

  4. pennywatch-oss pennywatch-oss Public

    Personal finance tracker that reads bank SMS, parses with AI, and gives spending insights via Telegram

    TypeScript 10 3

  5. mappd mappd Public

    See your entire React app at once. All screens rendered live on an infinite canvas with navigation flows.

    TypeScript 11 1

  6. marginalia marginalia Public template

    A modern Renaissance folio β€” open-source portfolio template. React + Vite + framer-motion + Lenis.

    JavaScript 10 1