跳到正文
cccskills
免费在 GitHub 公开

fullstack-architecture

选择全栈技术栈时使用。适用于新项目启动、框架选型、Monorepo vs 分仓决策。覆盖 Next.js / Nuxt / T3 / SvelteKit / Rails / Laravel / Django。

中文简介正在准备中。当前显示原文说明。

集成工具Vercel
查看安装方法

包含的文件(2)

  • SKILL.md3.4 KB
  • templates/architecture-decision.md557 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

全栈架构选型(Fullstack Architecture)

适用场景

  • 新项目技术栈选型
  • 全栈框架对比
  • Monorepo vs 分仓决策
  • 项目初始化模板

核心原则

1. 选熟悉的 > 选最新的
2. 选生态大的 > 选性能最高的
3. 全栈框架 > 自己拼装
4. TypeScript 端到端 > 多语言
5. 部署简单 > 架构复杂

全栈框架速查

框架语言前端后端DB部署适合
Next.js 15TSReactServer Actions / API RoutesPrismaVercelSaaS / 内容
T3 StackTSNext.jstRPCPrismaVercel类型安全极致
Nuxt 3TSVue 3NitroPrisma / DrizzleVercel / CF国内 / 中小
SvelteKitTSSvelteEndpointsPrismaVercel / CF性能
RemixTSReactLoaders / ActionsPrismaFly.io表单密集
Rails 8RubyHotwireRailsActiveRecordRender / Fly快速 MVP
Laravel 11PHPLivewire / InertiaLaravelEloquentForge / VaporPHP
DjangoPythonHTMX / ReactDjangoDjango ORMRailwayAI / 数据

选型决策树

TypeScript 团队?
  YES → 类型安全重要?
    极致 → T3 Stack
    一般 → Next.js / Nuxt
  NO → Ruby → Rails / Python → Django / PHP → Laravel

SEO 重要?
  YES → Next.js / Nuxt / SvelteKit(SSR)
  NO → 任意

交付时间 < 1 周?
  YES → Rails / Laravel / Django(约定多、脚手架快)
  NO → Next.js / Nuxt / T3

团队 > 5 人?
  YES → 考虑拆分 backend + frontend
  NO → 全栈框架 OK

Monorepo vs 分仓

Monorepo(推荐小团队):
  ✅ 类型共享方便
  ✅ 一次 PR 改前后端
  ✅ 统一 CI
  工具:pnpm workspaces + Turborepo

分仓(大团队):
  ✅ 独立部署
  ✅ 独立版本
  ✅ 团队边界清晰
  工具:独立 repo + OpenAPI 契约

项目初始化模板

Next.js + Prisma + Tailwind

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
cd my-app
pnpm add prisma @prisma/client
pnpm add -D @types/node
npx prisma init

T3 Stack

pnpm create t3-app@latest my-app
# 选:TypeScript + tRPC + Prisma + Tailwind + NextAuth

Nuxt 3

npx nuxi@latest init my-app
cd my-app
pnpm add @prisma/client
pnpm add -D prisma

配套模板

  • templates/architecture-decision.md — 选型决策记录 + 对比表 + 理由

质量自检

□ 选型有明确理由(不是"最火")
□ 团队熟悉度评估
□ 生态评估(Stars / 维护 / 文档)
□ 部署方案确定
□ TypeScript 端到端
□ 项目初始化完成
□ 基础配置(Lint / Format / Git hooks)
□ 第一天就部署

常见坑

  1. 自己拼装——浪费时间在胶水代码
  2. 选不熟的框架——学习成本 > 收益
  3. 不用 TypeScript——联调地狱
  4. 不用 ORM——手写 SQL 容易注入
  5. 过早微服务——1 人团队不需要
  6. 不评估部署——选了框架部署不了

与其他 skill 的协作

下游:
  e2e-feature-delivery → 用选定的栈实现
  database-schema-impl → ORM 选型
  deploy-preview → 部署平台

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

A/B 测试设计与分析时使用。适用于产品实验、功能验证、转化率优化。融合假设驱动 + 样本量计算 + 置信度判断。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow542026年5月19日 更新

上线前业务方/产品方验收时使用。适用于功能交付确认、UAT、发布会签。融合 BDD Given-When-Then、Specification by Example、ATDD。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow542026年5月19日 更新

设计无障碍可访问的界面时使用。适用于满足 WCAG 标准、键盘导航、屏幕阅读器支持。优先使用 WCAG 2.2 AA 级标准 + 键盘 + 焦点 + 对比度 + ARIA。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow542026年5月19日 更新

实现可访问性(无障碍)时使用。覆盖 WCAG 2.2 AA / ARIA / 键盘导航 / 屏幕阅读器 / 颜色对比 / 焦点管理。融合 React Aria / Radix UI / Headless UI 实践 + axe-core 自动化测试。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow542026年5月19日 更新

AI 模型部署时使用。适用于推理服务 / GPU / TensorRT / 监控 / 扩缩容。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow542026年5月19日 更新

数据分析报告输出时使用。适用于业务分析报告、周报、专项分析、决策支持。融合洞察 + 建议 + 行动项。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow542026年5月19日 更新

查看 zhaoxuya520 的全部技能

报告此技能的问题