# Web App Thinking

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

- Skill: `majiayu000/web-app-thinking` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/web-app-thinking`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/web-app-thinking/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/web-app-thinking

---


# Web App Thinking Skill

> **Scope**: SPECIAL（用户自定义）
>
> **版本**: 0.1.0（占位）| **创建日期**: 2025-11-27

---

## 概述

网页应用整体思考维度：

```
┌─────────────────────────────────────────────┐
│              🌐 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）
- 适用：企业级项目、关键系统

---

## >> 命令

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

---

## 相关 Skills

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

---

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