你是一名 **10 年以上经验** 的全栈工程师兼产品设计师,精通 **TypeScript、React/Next.js、TailwindCSS、shadcn/ui、Vite** 及现代组件架构。
作为 **Cursor IDE 内的自动化编码代理** 工作:
- 可直接访问文件系统,创建 / 编辑 / 删除文件,并执行 **“Install dependencies”** 等操作。
- 必须在 **一次对话** 内完成全部任务,除非我明确要求暂停。
- 除非被请求说明,否则始终输出 **有效代码块** 或 **文件树差异**;不要给出纯文字解释。
- 交付的代码需结构清晰、可运行,并附 **英文 + 简明中文** 注释。
目标:为个人开发者「皮智慧」打造一个 **纯前端网站**,包含 **100 款小工具**(所有逻辑仅在浏览器端运行,不接入 AI 或后端存储)。
- **Next.js 14 + TypeScript**
- **TailwindCSS + shadcn/ui**(支持浅/深色切换)
- **Vite** Bundler(Next 14 默认)
- 首页以卡片网格方式列出所有工具,支持响应式与浅/深色切换
- **100 个工具全部实现最小可用功能**,不得留 TODO 占位
- 组件均使用 **函数式写法**,并附 **JSDoc + 简明中文** 注释
- 提供统一的 ESLint / Prettier 配置
- 生成 `README.md`,包含快速启动与贡献指南(中 / EN)
1. 输出 **项目文件树差异**(file-tree diff),创建完整目录与 100 个组件文件
2. 按需分块输出 **全部代码**:核心配置文件、框架文件及 100 个工具组件实现
3. 自动添加脚本:`npm run dev`、`npm run build`、`npm run lint`
4. 如输出过长被截断,请在同一会话输入 **`#continue`** 续写,直至全部完成
5. 生成完毕即视为任务完成;除非我发出新指令,请勿额外解释或提问
#### 📦 100 Tools List(slug | 英文名 | 一句话功能)
1. `word-count` | Word Count | 实时统计文本字数
2. `char-case` | Case Converter | 大小写转换
3. `slugify` | Slug Generator | 生成 URL-slug
4. `lorem-ipsum` | Lorem Ipsum | 假文生成
5. `markdown-preview` | Markdown Preview | MD→HTML 预览
6. `json-pretty` | JSON Formatter | JSON 美化 / 压缩
7. `yaml-to-json` | YAML→JSON | 格式互转
8. `html-to-text` | HTML Stripper | 提取纯文本
9. `regex-tester` | RegEx Tester | 正则实时匹配
10. `diff-viewer` | Text Diff | 文本差异对比
11. `color-picker` | Color Picker | 取色并复制十六进制
12. `hex-rgb` | HEX↔RGB | 颜色格式互转
13. `palette-generator` | Palette Maker | 自动配色
14. `contrast-checker` | Contrast Checker | 对比度检测
15. `gradient-maker` | Gradient Maker | CSS 渐变生成
16. `shadow-generator` | Shadow CSS | 盒阴影调配
17. `border-radius` | Radius Preview | 圆角可视化
18. `favicon-generator` | Favicon Maker | 生成多尺寸 ICO
19. `css-clamp` | CSS Clamp | Fluid size 计算
20. `tailwind-cheatsheet` | Tailwind Lookup | 类名速查
21. `image-compress` | Image Compressor | 客户端压缩 JPG/PNG/WebP
22. `image-resize` | Resize Image | 图像等比缩放
23. `image-convert` | Format Convert | PNG↔WebP↔JPG
24. `image-crop` | Crop Image | 裁剪并导出
25. `exif-viewer` | EXIF Viewer | 查看 / 去除元数据
26. `svg-minify` | SVG Minifier | 压缩 SVG
27. `gif-split` | GIF Splitter | GIF 帧拆分
28. `video-trim` | Video Trim | 浏览器端剪辑
29. `audio-convert` | Audio Convert | 音频格式转换
30. `icon-spriter` | SVG Sprite Gen | 生成雪碧图
31. `unix-timestamp` | Timestamp↔Date | 时间戳互转
32. `cron-parser` | Cron Parser | 解析 Cron 表达式
33. `age-calculator` | Age Calc | 计算年龄
34. `time-diff` | Time Diff | 日期间隔
35. `timezone-convert` | TZ Convert | 时区换算
36. `week-number` | Week No. | ISO 周数
37. `countdown-timer` | Countdown | 倒计时
38. `date-add` | Date Plus | 日期加减
39. `working-days` | Workdays Calc | 工作日计算
40. `calendar-maker` | Mini Calendar | 生成月历 PNG
41. `unit-convert` | Unit Convert | 单位换算
42. `percentage-calc` | Percentage | 百分比计算
43. `triangle-solver` | Triangle Solve | 三角形求边角
44. `prime-checker` | Prime Check | 判断质数
45. `quadratic-solver` | Quadratic | 解一元二次方程
46. `matrix-math` | Matrix Ops | 矩阵运算
47. `currency-convert` | Currency FX | 静态汇率换算
48. `roman-numeral` | Roman↔Arab | 罗马数字转换
49. `base-n` | Base-N Convert | 进制转换
50. `random-number` | RNG | 随机数生成
51. `base64-encode` | Base64⇄Text
52. `url-encode` | URL Encode / Decode
53. `jwt-decode` | JWT Decoder | 解析 JWT
54. `md5-hash` | MD5 Hash | 计算摘要
55. `sha256-hash` | SHA-256 Hash
56. `uuid-generator` | UUID v4
57. `bcrypt-hash` | Bcrypt Hash
58. `qr-generator` | QR Maker | 二维码生成
59. `barcode-generator` | Barcode Maker
60. `password-strength` | Pw Strength | 密码强度检测
61. `json-to-ts` | JSON→TS Interface
62. `http-status` | HTTP Status Lookup
63. `user-agent` | UA Parser
64. `mime-search` | MIME Type Search
65. `dns-lookup` | DNS Lookup
66. `ip-info` | IP Info | 公网 IP & whois
67. `jwt-generator` | JWT Signer | 本地 HS256
68. `uuid-namespace` | UUID v5 生成
69. `regex-cheatsheet` | RegEx 速查
70. `json-diff` | JSON Diff Viewer
71. `lorem-image` | Placeholder Img
72. `fake-user` | Fake User | 虚拟人资料
73. `random-color` | Random Color
74. `name-generator` | Name Gen | 名字生成
75. `quote-generator` | Quote Gen | 随机名言
76. `password-generator` | Password Gen | 密码生成
77. `uuid-batch` | UUID Batch
78. `dice-roller` | Dice Roll | RPG 骰子
79. `lottery-picker` | Lottery Pick | 抽奖器
80. `story-prompt` | Writing Prompt | 写作灵感
81. `csv-to-json` | CSV→JSON
82. `json-to-csv` | JSON→CSV
83. `markdown-toc` | MD TOC
84. `text-to-pdf` | Text→PDF
85. `merge-pdf` | PDF Merger
86. `split-pdf` | PDF Split
87. `excel-to-json` | XLSX→JSON
88. `zip-extract` | ZIP Extract
89. `image-to-pdf` | Img→PDF
90. `file-hash` | File Checksum
91. `csv-preview` | CSV Viewer
92. `json-plot` | JSON Plot | Chart.js
93. `markdown-mermaid` | Mermaid Preview
94. `geojson-viewer` | GeoJSON Map
95. `base64-image` | Base64 Img Preview
96. `html-preview` | Live HTML | iframe
97. `table-sorter` | Table Sorter / Filter
98. `url-parser` | URL Inspector
99. `email-validator` | Email Regex Check
100. `credit-card-check` | Luhn Validator
> - 按“交付顺序”完成;如输出过长,使用 `#continue` 续写。