此样板是使用 Astro.js、React 和 TypeScript 构建的完整而专业的基础，旨在通过性能、安全性和代码质量进行扩展。它非常适合需要坚实且可维护架构的复杂大型应用程序。
项目的核心支柱是可读性、可重用性和可重构性。UI 遵循原子设计方法论，将组件组织成原子、分子、组织和模板，以获得更好的结构和一致性。
🌐 技术栈
🚀 Astro.js - 快速、现代的静态网站生成器，采用孤岛架构
⚛ React.js - 用于构建用户界面的响应式 JavaScript 库
🔥 TypeScript - 类型化的 JavaScript，可提供更好的开发者体验和代码质量
💅 CSS Modules - 用于组件样式的局部作用域 CSS
🚩 代码检查与格式化工具
- Lefthook - Git 钩子管理器
- BiomeJS - 快速的格式化与代码检查工具
- Commitlint - 检查提交信息
✅ 测试
- Vitest - 快速的单元测试框架
- Playwright - 端到端测试框架
🚩 功能特性
- 响应式设计 - 针对所有屏幕尺寸的移动优先方法
- 原子设计 - 用于可维护 UI 的结构化组件层次结构
- 可访问性 - 检测 prefers-reduced-motion 和其他 a11y 功能
- 主题化 - 使用 CSS Modules 进行主题配置，实现一致的样式
- 开发者体验
- 全局别名，无需手动导入即可引入像 clsx 这样的实用程序
- 使用 BiomeJS 即时进行代码检查和格式化
- Lefthook 仅对已更改的文件运行代码检查
- 性能
- 超优化的字体设置，每个字体通过预加载仅 2kb
- Astro 的部分水合技术，实现最少的 JavaScript
- 图标 - 可定制的图标系统，支持您自己的 SVG 以及来自 Iconify 的任何图标
- CI/CD
- 自动发布生成和版本控制
- 预配置的 GitHub Actions 工作流
该项目得到积极维护，并根据架构和开发者体验的最佳实践进行更新。预配置的脚本可以轻松地使用 pnpm 运行开发环境、测试、代码检查、格式化代码以及检查依赖项更新。
通过 Lefthook 强制执行严格的代码检查和测试规则，确保每次提交和推送的代码都是干净且可用于生产的。
这个主题非常适合希望从一个可扩展且结构良好的代码库开始，避免设置开销并专注于更快地构建功能的开发者和团队。
由 Éverton Toffanetto 创建和维护
🔗 YouTube
