Web Development

核心用法

本技能提供现代Web开发的完整知识体系，覆盖三大核心领域：基础技术（HTML语义化、CSS布局、JavaScript ES6+）、框架工程化（React/Next.js/Astro等选型决策树）、生产部署（CI/CD、性能监控、SEO优化）。采用问题驱动设计，针对高频场景（响应式适配、CORS故障、性能瓶颈）提供即查即用的解决方案。

显著优点

1. 决策框架清晰：通过「静态内容→Astro」「交互应用→Next.js」等明确路径，降低技术选型成本
2. 防御性编程导向：10条Critical Rules直击生产环境痛点（如===避免类型强制、viewport meta防移动端崩坏、环境变量泄露预警）
3. 性能与可访问性并重：CLS（布局偏移）、LCP（最大内容绘制）等核心Web指标量化指导，兼顾SEO与无障碍访问

潜在局限

• 后端深度不足：CORS解决方案仅指出「服务端配置」，未提供Node/Python等后端代码示例
• 生态更新滞后：框架推荐未涵盖2024年新兴的Rust工具链（如Turbopack替代Vite）
• 安全维度单一：聚焦XSS/CSRF前置防御，但未涉及供应链攻击（如npm包投毒）检测

适合人群

• 初级→中级前端：需系统性补全工程化认知的开发者
• 全栈转型者：快速建立前端生产标准意识的后端工程师
• 技术决策者：评估技术栈迁移成本的CTO/架构师

常规风险

| 风险点 | 说明 |

|--------|------|

| 环境变量泄露 | `NEXT_PUBLIC_*`前缀误用导致密钥暴露客户端 |

| 混合内容阻断 | HTTPS页面加载HTTP资源被浏览器拦截 |

| async/await误用 | `forEach`异步陷阱引发竞态条件 |

| 无障碍合规 | 语义化HTML缺失导致屏幕阅读器解析失败 |

核心用法

该 Skill 是一套系统化的 Web 开发知识库，采用分层文档架构覆盖全栈开发场景：

快速导航：通过 "Quick Reference" 索引表，开发者可按需求直达专项文档——HTML/CSS 问题查阅 html-css.md，JavaScript 模式参考 javascript.md，React/Next.js 等现代框架查看 frameworks.md，部署流程见 deploy.md，性能/SEO/可访问性优化参考 performance.md。

框架决策树：提供场景化技术选型指南——静态内容选 Astro 或纯 HTML；博客/文档类 MDX 项目推荐 Astro 或 Next.js App Router；需交互与鉴权的应用选 Next.js 或 Remix；追求完整 SSR/ISR 控制用 Next.js；简单 SPA 无 SEO 需求可用 Vite + React/Vue。

关键规则速查：浓缩 10 条生产级避坑指南，涵盖 DOCTYPE 声明、CSS 特异性、=== 严格相等、异步循环模式、CORS 服务端配置、viewport 响应式声明、表单事件拦截、图片尺寸防 CLS、HTTPS 混合内容拦截、环境变量泄漏防护等核心要点。

显著优点

1. 权威性：内容对标现代前端工程标准，Critical Rules 直接对应 Lighthouse 核心指标与浏览器安全策略
2. 实用性：框架决策树解决常见选型困境，避免技术债务积累
3. 零门槛：纯 Markdown 文档，无需配置即可集成到任意开发工作流
4. 安全可信：BSS 平台内置，通过六维安全检测（静态/动态/依赖/网络/隐私/威胁情报），评分 S+/98分

潜在局限

• 知识密度高：假设用户具备基础 Web 开发背景，纯新手可能需要配合官方文档学习
• 非交互式：作为静态知识库，无法自动检测项目代码问题或生成定制化方案
• 版本时效：框架生态迭代快（如 Next.js App Router 演进），建议关注官方更新同步

适合人群

• 初级→中级前端开发者：建立系统性最佳实践认知
• 全栈工程师：快速查阅部署与性能优化要点
• 技术决策者：依据场景选择合适技术栈

常规风险

极低。纯文档型 Skill 无可执行代码、无外部网络调用、无敏感信息处理。唯一需注意：文档中提及的环境变量安全规则（如 NEXT_PUBLIC_*）为教育性引用，Skill 本身不会访问任何环境变量。