AgentSkillsCN

web-app-thinking

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

中文原作
SKILL.md
--- frontmatter
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

概述

网页应用整体思考维度：

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

>> 命令

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

相关 Skills

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

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