Frontend Developer focused on Interactive UI & Performance
- I’m passionate about visual presentation and currently focusing on interactive UI.
- With DJing as my hobby, I also have a deep interest in music. Listen here
- Core: TypeScript, Vue, React, Next.js
- UI & Motion: Framer Motion, CSS Architecture
- DX & Build: Vite/Rollup, Storybook, Design System, Tree-shaking & bundle analysis
- Hyundai Capital | Frontend Developer (2023.01 ~ )
- ssafy (2022.01~2022.12)
- v-f-labs v-f-labs(wip)
- magicui (Maintainer) Maintaining and improving Magic UI through component fixes, rendering stability improvements, and community support.
- @magicuidesign/mcp (Maintainer) MCP server for discovering and retrieving Magic UI registry items, with contributions in architecture, generic registry tools, and release automation.
- @ui-layouts/mcp (Creator & Maintainer)
@ui-layouts/mcpprovides AI assistants with several valuable tools to help them search, understand, and retrieve UI components from ui-layouts.com
I actively contribute to the tools I use in production — especially UI libraries, build tools, and DX utilities.
I enjoy turning real-world UI/UX issues (especially around responsiveness, Safari/iOS quirks, and DX) into reusable fixes in the open-source ecosystem.
- fix(mockup-phone): make layout responsive with aspect-ratio #4108
→ Improvedmockup-phoneresponsiveness usingaspect-ratio, fixing layout issues across screen sizes.
- fix(safari): resolve iOS device video masking issue with DOM overlay (breaking change) #782
- fix(iphone-15-pro): resolve iOS device video masking issue with DOM overlay (breaking change) #780
→ Refactored video rendering to a DOM overlay to fix Safari/iOS masking issues. - Chore: Fix build:docs&build:registry script loop & add engines field for consistency #806
→ Stabilized docs/registry build scripts and aligned Node.js engine constraints. - fix: AnimatedGridPattern hydration + effect loop + invalid DOM prop #858
→ Fixed hydration mismatch + React warning, and prevented an effect-induced render loop.
- refactor: migrate docs config from JSON to TypeScript with type safety #56
- refactor: migrate from docsJson.dataArray to AllComponents and simplify component code #58
- refactor:Docs Structure and Navigation System #61
- refactor: reorganize component categories and simplify navigation groups #65
- fix: remove duplicate components and fix malformed URLs in labs section #66
- fix: add missing sparkles components and filter invalid recent pages #67
- fix: revalidate confirmPassword field on password change #69
- fix: resolve media modal component name inconsistency #71
- refactor: implement global color token system for centralized theming #75
- fix: resolve hydration mismatch in ThemeSwitch component #76
- refactor: implement group-based pagination in DocsNavigation #77
- fix: prevent drag icon scale from persisting during reordering #79
- fix: improve reorder icon scale reset and add aria/touch optimizations #81
- fix: restore marquee animation after Tailwind v4 migration #82
- fix: restore Marquee animation and Tailwind v4 compatibility #83
- fix: move @property declaration to top-level for gradient-border comp… #84
→ Long-term contributor to theui-layoutsdesign system: docs architecture, navigation, animation fixes, and theming via global color tokens.
- fix: misaligned layout in PricingSection by adjusting description height (minor issue) #39
→ Polished card layout alignment for a cleaner pricing section.
- fix(control-ui): resolve header logo when gateway.controlUi.basePath is set #7178
→ Fixed a production-only UI bug in OpenClaw’s Control UI where static assets broke under a configured basePath, ensuring consistent asset resolution across AI dashboard deployments.
- examples: Remove redundant border declaration #11042
→ Simplified example styles by removing redundant border declarations.
- fix(isFinite): implement type predicate to narrow type to number #1511
- fix(isSafeInteger): implement type predicate to narrow type to number #1510
- fix(toCamelCaseKeys): improve toCamelCaseKeys type inference for uppercase keys #1538 → Improved type safety by turning utility functions into proper type guards, enabling better inference in TypeScript codebases.
- fix(example): format-helpers import path #1309
→ Fixed example import paths to prevent confusion for new users. - feat(utils): add sort option to formattedVariables #1611
→ Added options.sort to formattedVariables for deterministic ordering - fix(examples): resolve directory path in matching-build-files tokens for ESM #1630
