Agent-Skills.md

Agent Skills: Web App Thinking Skill

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

UncategorizedID: tikazyq/agentic-spec-forge/web-app-thinking
51

Install this agent skill to your local

pnpm dlx add-skill https://github.com/tikazyq/agentic-spec-forge/tree/HEAD/AGENTIC_SPEC_FORGE/spec_stage_skill/special/web-app-thinking

Skill Files

Browse the full folder contents for web-app-thinking.

Download Skill

Loading file tree…

AGENTIC_SPEC_FORGE/spec_stage_skill/special/web-app-thinking/SKILL.md

Skill Metadata

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

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: 待细化各技术栈的最佳实践和检查规则