本文へ移動
cccskills
無料GitHub で公開

fullstack-architecture

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

インストール方法を見る

含まれるファイル(2)

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

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

全栈架构选型(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 → 部署平台

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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

日本語の概要は準備中です。原文の説明を表示しています。

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

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

日本語の概要は準備中です。原文の説明を表示しています。

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

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

日本語の概要は準備中です。原文の説明を表示しています。

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

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

日本語の概要は準備中です。原文の説明を表示しています。

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

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

日本語の概要は準備中です。原文の説明を表示しています。

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

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

日本語の概要は準備中です。原文の説明を表示しています。

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

zhaoxuya520 のスキルをすべて見る

このスキルの問題を報告する