前端开发 Skill技能列表
Next.js服务器组件Skill nextjs-server-components
Next.js服务器组件是一种在服务器端渲染React组件的技术，用于优化Web应用性能、减少客户端JavaScript包大小、支持直接数据库访问，适用于构建高效、SEO友好的应用，关键词包括Next.js、服务器渲染、性能优化、React、前端开发。
编码标准与最佳实践Skill coding-standards
这个技能提供了适用于TypeScript、JavaScript、React和Node.js开发的编码标准、最佳实践和模式，旨在提高代码质量、增强可读性和可维护性，适用于前端和后端软件开发。关键词包括编码标准、最佳实践、TypeScript、JavaScript、React、Node.js、代码质量、可维护性、软件开发。
弹簧动画Skill spring-animation
弹簧动画技能用于在Remotion视频制作中实现弹簧物理效果，创造自然、有弹性的运动，包括弹跳入场、弹性轨迹、过冲稳定等。关键词：弹簧动画、Remotion、视频制作、物理模拟、弹跳效果、动画技能、前端开发、影视后期、弹簧物理、动态图形。
Next.js16AppRouter性能优化技能Skill nextjs
此技能提供Next.js 16 App Router的全面性能优化指南，涵盖构建优化、缓存策略、服务器组件、路由、SEO等关键领域，帮助前端开发者提升应用性能和效率，适用于Next.js项目开发和性能调优。
程序化SEO页面模板技能Skill pseo-templates
此技能用于创建程序化SEO页面模板，通过动态路由和结构化数据渲染，为每个页面生成独特、意图匹配的内容，包括差异化标题、描述和FAQ。适用于大规模生成高质量SEO页面，提升搜索排名和用户体验。关键词：程序化SEO，页面模板，动态路由，SEO优化，内容生成，E-E-A-T信号，大规模页面生成。
Figma设计同步Skill figma-design-sync
Figma设计同步技能是一个自动化工具，用于比较Figma设计图和Web实现，自动检测视觉差异并提供修复建议。它支持响应式设计优化、Tailwind CSS调整，并确保像素完美对齐，适用于前端开发、自动化质量保证和设计到代码的高效转换。关键词：Figma，设计同步，前端开发，CSS，Tailwind，自动化测试，像素完美，Web开发。
严格TypeScript模式Skill strict-typescript-mode
此技能用于在TypeScript开发中强制执行严格编码规范，包括禁止未文档化的`any`类型、要求公共API显式类型、使用泛型约束、工具类型、只读属性和区分联合等，旨在提升代码质量、类型安全和可维护性。适用于TypeScript项目、新功能开发、代码审查和重构场景。关键词：TypeScript，严格模式，编码规范，类型安全，前端开发，代码审查。
条件渲染技巧：使用三元运算符Skill rendering-conditional-render
这个技能用于在前端开发中优化条件渲染，特别是在 React 和 TypeScript 环境中。通过使用显式三元运算符替代逻辑与运算符，避免当值为 0、NaN 或其他假值时意外渲染，提升代码可靠性和用户体验。关键词包括：条件渲染、三元运算符、React、TypeScript、前端开发、假值处理、优化技巧。
组件包装架构Skill component-wrapper-architecture
这个技能用于在React项目中包装现有的shadcn/ui组件，以添加8位复古风格，同时确保向后兼容性和代码重用。关键词包括：组件包装、8位风格、shadcn/ui、React、TypeScript、前端开发、复古UI。
NuxtSEO优化模块Skill nuxt-seo
Nuxt SEO优化模块是一个用于Nuxt.js框架的SEO工具集，提供配置SEO、生成robots.txt和sitemap.xml、创建动态OG图像、添加JSON-LD结构化数据等功能，帮助提升网站搜索排名和用户体验。关键词：Nuxt SEO、SEO优化、站点地图、OG图像、结构化数据。
RSC数据获取优化器Skill rsc-data-optimizer
该技能用于优化Next.js应用的数据获取性能，通过使用React Server Components（RSC）将慢速客户端数据获取转换为快速服务器端数据获取，提高页面加载速度、SEO和用户体验。关键词：RSC、Next.js、数据获取、优化、服务器端渲染、React Server Components、前端开发。
泳道可视化Skill swimlane-visualization
泳道可视化技能用于设计泳道用户界面模式，以实时可视化AI Developer Workflow的执行。适用于构建观测性仪表板、监控代理工作流进度和创建实时状态显示。关键词包括：泳道可视化、UI设计、前端开发、实时更新、AI工作流、WebSocket集成、事件监控、工作流调试。