SuperAPI AI 工具集

spark-app-template

设计与创作

查看项目

更新于 10-15 21:52

技能介绍

用途:Spark App Template 为构建 Web 应用提供默认约定与指导。当用户想从零创建 Web 应用、询问该用什么技术栈,或需要设计、样式、框架选择建议时启用,适用于仪表盘、交互工具、数据应用和内容站点等。

主要能力:给出统一的核心技术栈——Vite、React 19+、TypeScript、pnpm、Biome、TanStack Router/Query、react-hook-form + Zod、Tailwind CSS v4+、shadcn/ui、Lucide、Radix Colors(OKLCH)、Motion、Sonner 等;按复杂度分为微工具、内容展示、轻应用、复杂应用四类,并提供 default-webapp、data-dashboard、content-showcase、complex-application 等栈变体;还包含设计原则、排版与配色参考、性能目标(INP<200ms、LCP<2.5s、CLS<0.1)及 PRD 模板。

使用方式:按固定顺序执行,避免配置错误。先创建项目:pnpm create vite@latest my-app --template react-ts,再 pnpm install;随后配置 TypeScript 路径别名(tsconfig.json 与 tsconfig.app.json),安装 Tailwind 与工具:pnpm add -D tailwindcss @tailwindcss/vite @biomejs/biome;配置 vite.config.ts 后运行 pnpm dlx shadcn@latest init,并在编写自定义组件前先用 pnpm dlx shadcn add 安装所需组件,最后接入路由与状态管理。

适用场景与限制:适合需要统一技术选型和设计规范的 Web 应用开发。要求 Node.js 18+,推荐 pnpm。资料未提供收费、价格、平台支持范围或实际效果数据;部分配置示例基于 Vite + React + TypeScript 模板结构,具体以项目实际为准。