mcpField
W
web-application-developer

web-application-developer

github.com/rade-nugroho开发1237 次安装23 周前更新
代码仓库

关于 web-application-developer

用于开发基于浏览器的应用，并处理 API、身份验证、安全和发布检查的技能。涵盖 SSR、SPA 和混合架构，不涉及原生移动端或桌面客户端。

主要功能

  1. 01SSR、SPA 和混合应用架构
  2. 02HTTP API 集成与错误处理
  3. 03浏览器身份验证和会话模式
  4. 04表单、文件上传与输入验证
  5. 05CORS、CSRF 和 CSP 安全检查
  6. 06单元、集成及端到端测试

适用场景

  1. 01规划 Web 应用的路由和渲染方式
  2. 02将浏览器界面连接到 HTTP API
  3. 03实现登录、会话和令牌处理
  4. 04检查 Web 安全与关键用户流程

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rade-nugroho/agentic-enteprises-skill --skill web-application-developer

安装后在 Claude Code 中输入/web-application-developer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
api_integration.md
auth_sessions.md
web_app_architecture.md
web_security.md

详细介绍

Web 应用开发者

适用场景

  • 构建或扩展基于浏览器的 Web 应用（非原生移动应用）
  • 在 Web 环境中实现身份验证流程、会话或令牌处理
  • 将 UI 连接到 HTTP API，并正确处理错误和加载状态
  • 处理浏览器与服务端之间的 CORS、Cookie、CSRF 或缓存行为
  • 实现 SSR、SPA 或混合式（例如 Next.js）路由和数据加载

不适用场景

  • 原生 iOS/Android 或仅限桌面端的客户端 → 特定技术栈的移动端/桌面端指南
  • 纯基础设施或流水线工作 → devops、infrastructure-engineer
  • 仅进行 UX 调研和线框图设计 → product-designer
  • 组织范围的安全计划 → cybersecurity
  • 面向资深人员的跨服务 RFC → senior-software-engineer

相关技能

需求技能
全栈 IC 功能（通用）fullstack-software-engineer
资深全栈交付senior-fullstack-developer
仅限前端架构senior-frontend-software-engineer
根据设计规格制作 UI 页面ui-software-engineer
UX 规格和流程product-designer
流水线和托管devops
流水线安全扫描devsecops

核心工作流

1. Web 应用结构

明确选择渲染模式：

模式适用场景
SSR / hybridSEO、快速呈现首屏、需身份验证的仪表板
SPA需要大量客户端交互、登录后使用的应用
Static + API营销网站 + 独立的应用子域名

记录：路由、身份验证门槛、全局布局、错误边界。

路由和环境模式请参阅 references/web_app_architecture.md。

2. HTTP API 集成
  • 使用类型化客户端或通过 OpenAPI 生成的类型
  • 处理 401 → 刷新或重定向到登录页
  • 仅对幂等 GET 请求设置超时和重试
  • 对列表端点进行分页；避免在浏览器中加载无界数据

客户端模式请参阅 references/api_integration.md。

3. 浏览器中的身份验证
  • 会话 Cookie 优先使用 HttpOnly、Secure、SameSite Cookie
  • 或在内存中保存短期访问令牌，并轮换刷新令牌
  • 高风险应用绝不将密钥存储在 localStorage 中
  • 使用 Cookie 时，使用 CSRF 令牌保护会更改状态的路由

流程图请参阅 references/auth_sessions.md。

4. 表单和上传
  • 客户端验证用于改善 UX；服务端验证不可或缺
  • 文件使用 multipart/form-data；设置进度提示和大小限制
  • 清理文件名；如果策略要求，则在服务端扫描
5. Web 安全基线
  • 转义输出；未经清理，不要使用 dangerouslySetInnerHTML
  • 设置 CSP 标头；限制脚本来源
  • CORS 明确列出允许的来源；不要在携带凭据时使用 *
  • 安全标头：HSTS、X-Frame-Options 或 frame-ancestors

检查清单请参阅 references/web_security.md。

6. 测试和发布
  • 单元测试：验证器、钩子、API 映射器
  • 集成测试：使用测试数据库测试 API 路由
  • E2E：登录和一个关键流程（Playwright/Cypress）
  • 部署后在预发布环境 URL 上进行冒烟测试

环境和配置请参阅 references/web_app_architecture.md。

何时加载参考资料

  • 架构和环境 → references/web_app_architecture.md
  • API 客户端 → references/api_integration.md
  • 登录和会话 → references/auth_sessions.md
  • CSRF、CSP、CORS → references/web_security.md

评论

支持 Markdown