Agent skill

web-app-thinking

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

View SKILL.md on GitHub Repository
Stars 5
Forks 1

Install this agent skill to your Project

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

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

tikazyq/agentic-spec-forge

code-review

执行代码审查流程（提交PR→自查→同行审查→反馈修改→合并），覆盖功能正确性、代码质量、测试完整性、安全合规四大维度。当提交Pull Request、进行结对编程、执行代码走查、需要知识共享时使用。支持L1/L2/L3三级审查深度。

5 1
Explore
tikazyq/agentic-spec-forge

code-quality

执行代码质量门禁检查（测试通过→覆盖率→Lint→GOAL追溯→可提交），验证单元测试覆盖率≥80%、集成测试通过率≥95%、代码规范零错误。当完成代码实现、准备提交代码、需要质量验证、进行提交前自检时使用。确保代码可合并。

5 1
Explore
tikazyq/agentic-spec-forge

tdd-cycle

执行 TDD 红绿重构循环（RED→GREEN→REFACTOR→REPEAT），通过先写失败测试、最小代码实现、保持绿色重构的节奏驱动开发。当启动功能开发、需要测试驱动节奏、进行迭代编码、追求高测试覆盖率时使用。提供检查清单和节奏控制。

5 1
Explore
tikazyq/agentic-spec-forge

refactoring

执行代码重构（识别坏味道→选择手法→小步修改→运行测试），在保持外部行为不变前提下改进内部结构。当TDD进入REFACTOR阶段、发现代码坏味道、需要消除重复代码、优化代码结构时使用。支持提取方法、类、参数对象等重构手法。

5 1
Explore
tikazyq/agentic-spec-forge

arch-options-compare

比较多个架构方案（单体/微服务等），从SOLID原则、成本、复杂度等维度评分，生成对比表和推荐方案。当需要向客户解释架构选择或ADR决策时使用。

5 1
Explore
tikazyq/agentic-spec-forge

dev-tech-view-supplement

根据设计补充Dev视角的技术细节（数据库/API/通信协议），帮助Dev快速进入实施。当L1/L2设计缺乏技术细节、或准备向Dev交付前使用。

5 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results