---

name: web-app-thinking description: 提供网页应用全栈架构思考框架，涵盖前端渲染策略、后端 API 设计、基础设施部署、安全防护、性能优化五大维度。当需要设计完整 Web 应用、评审网页系统架构、或需要全局视角审视前后端协同设计时使用。支持 SPA/MPA、SSR/CSR、REST/GraphQL、容器/Serverless 等多种技术栈决策。 stage: SPECIAL level_supported: [L1-STREAMLINED, L2-BALANCED, L3-RIGOROUS]

Web App Thinking Skill

Scope: SPECIAL（用户自定义）

版本: 0.1.0（占位）| 创建日期: 2025-11-27

---

概述

网页应用整体思考维度：

Copy┌─────────────────────────────────────────────┐
│              🌐 Web Application             │
├─────────────┬─────────────┬─────────────────┤
│  Frontend   │   Backend   │  Infrastructure │
│  ─────────  │  ─────────  │  ─────────────  │
│  • SPA/MPA  │  • API      │  • CDN          │
│  • SSR/CSR  │  • Auth     │  • Cloud        │
│  • State    │  • Database │  • CI/CD        │
│  • UI/UX    │  • Cache    │  • Monitoring   │
└─────────────┴─────────────┴─────────────────┘

---

思考维度

1. 前端架构

• 渲染策略（SSR/CSR/SSG/ISR）
• 状态管理方案
• 路由设计
• 组件化策略

2. 后端架构

• API 设计（REST/GraphQL）
• 认证授权（JWT/会话/OAuth）
• 数据库选型（SQL/NoSQL）
• 缓存策略（Redis/CDN）

3. 基础设施

• 部署方案（容器/Serverless）
• CDN 配置
• CI/CD 流水线
• 监控告警

4. 安全考量

• XSS/CSRF 防护
• HTTPS/CORS
• 输入验证
• 敏感数据处理

---

分级思考深度

L1-STREAMLINED

• 每维度选择 1 个关键决策
• 快速架构评审（15-30 分钟）
• 适用：小型项目、MVP、PoC

L2-BALANCED

• 每维度覆盖 2-3 个决策点
• 标准架构评审（1-2 小时）
• 包含技术选型对比
• 适用：中型项目、团队协作

L3-RIGOROUS

• 全维度深入分析
• 完整架构评审（半天+）
• 包含性能/安全/可扩展性评估
• 生成架构决策记录（ADR）
• 适用：企业级项目、关键系统

---

>> 命令

Copy>>webapp_review_l1     # Web 应用架构快速审视
>>webapp_checklist     # 生成检查清单

---

相关 Skills

• 设计: vertical-slice, layer-design, component-boundary（架构设计）
• 技术: tech-selection（技术栈选型）
• 安全: security-check（Web 安全检查）
• 同类: mobile-app-thinking, microservice-thinking（其他应用类型）

---

TODO: 待细化各技术栈的最佳实践和检查规则