awesome-shadcn-ui
收集并筛选公开支持 shadcn CLI 或兼容 Registry 的 UI 组件库。
- Next.js
- React
- TypeScript
- Tailwind CSS
Tuntun
@tuntun0609
TECHNOLOGIES / 24-KEY MACRO PAD
HTML
语义结构、可访问性与页面骨架
TECHNOLOGIES / 24-KEY MACRO PAD
Learn more. Understand more.
学的东西 说不定什么时候就用上了
SELECTED PROJECTS
正在构建的东西
dranimo
本地优先的手绘动画工具：在浏览器中绘制、预览笔画过程，并导出图片或视频。
- Next.js
- React
- TypeScript
- Tailwind CSS
blog
这个持续记录前端开发、开源项目与学习笔记的个人网站，使用 MDX 构建内容。
- Next.js
- MDX
- TypeScript
infographic-ai
用自然语言创建和编辑信息图、幻灯片，并将成果导出为 PPTX。
- Next.js
- React
- TypeScript
- Tailwind CSS
easy-saas-next
把认证、数据库、文档、国际化和 AI 能力整理成可组合的 Next.js 起点。
- Next.js
- React
- TypeScript
- Tailwind CSS
tun-bili-tool
重新整理 Bilibili 首页、视频和直播页面，让高频观看操作更顺手。
- Chrome Web Store
- TypeScript
- React
leafer-x-snap
为 Leafer 画布加入元素吸附、参考线和过滤能力，让对齐自然发生。
- TypeScript
- JavaScript
portrait-shot-director
围绕人像分析、生图与后期处理的 Agent Skills 集合，覆盖提示词、深度、配色与姿态。
- Agent Skills
- Python
- TypeScript
WRITING
最近写下的内容
AI
Agent 的 Harness 是什么：模型之外的工程系统
从一次 Coding Agent 的修复任务出发，拆解 System Prompt、Tools、Agentic Loop 与模型适配层。
后端开发
PostgreSQL 快速入门：从建表到事务与索引
用一个迷你电商案例，从建表、CRUD、JOIN 和聚合，一路掌握事务、索引与 EXPLAIN。
前端开发
网页端如何制作一个检测帧率的组件
使用 requestAnimationFrame 统计页面帧率，并封装一个可以直接使用的 React FPS 检测组件。
前端开发
用距离驱动智能圆角形变动画
拆解标签页拖拽时的智能圆角形变：用伪元素补出切口，再把拖拽距离映射为圆角进度。
前端开发
用安全三角形解决二级菜单误触
使用 CSS clip-path、CSS 变量和指针坐标，为二级菜单增加不会拖慢交互的安全区域。
前端开发
Next.js 添加顶部加载进度条及其原理
使用 nextjs-toploader 为路由跳转增加顶部加载反馈，并拆解 NProgress 的启动、结束与路由监听机制。
OPEN SOURCE
在 GitHub 上保持公开构建。
正在读取 GitHub 活动…
CONTACT
一起做点有用的东西。
有项目想法、开源协作或只是想聊聊前端工程，都可以直接发邮件。