前端开发 Skill技能列表
核心网页指标优化Skill core-web-vitals
该技能专注于优化核心网页指标（LCP、INP、CLS），通过技术手段提升网页加载速度、交互响应性和视觉稳定性，从而改善用户体验和搜索引擎排名。关键词：核心网页指标、LCP优化、INP优化、CLS优化、性能优化、SEO、页面体验、前端性能。
主题化组件设计系统Skill theming-components
这个技能提供了设计令牌系统和主题框架，用于跨所有组件实现一致、可定制的UI样式。它包括完整的令牌分类（颜色、排版、间距、阴影、边框、动画、z索引）、主题切换（亮暗模式、高对比度、自定义品牌）、RTL/i18n支持和可访问性功能，是前端开发中UI设计的基础层。关键词：设计令牌、主题系统、CSS变量、UI样式、前端开发、可访问性、RTL支持、品牌定制。
React最佳实践Skill react-best-practices
这个技能提供了Vercel Engineering维护的React和Next.js性能优化指南，包含45个规则，帮助开发者优化代码性能，涉及数据获取、包大小优化、渲染优化等关键领域，适用于前端开发，提升应用程序加载速度和用户体验。关键词：React性能优化, Next.js最佳实践, 前端开发指南, Vercel工程, 代码重构, 性能改进, SEO优化。
规划指南Skill planning-guidelines
Portfolio Buddy 2 开发规划指南，提供代码保留、移动/桌面端优化、需求澄清等核心原则。适用于软件开发、量化金融、前端开发、代码重构、项目管理、敏捷开发、React TypeScript、投资组合分析、金融科技应用开发。
ChromeDevTools调试Skill chrome-devtools-debugging
Chrome DevTools调试技能允许开发者通过Chrome DevTools协议连接来调试和分析Web应用程序，主要功能包括查看控制台日志、监控网络请求、性能分析以及执行JavaScript代码，特别适用于调试需要认证的会话。
Vue.js3开发Skill vue-development
Vue.js 3 开发技能专注于使用Composition API、TypeScript、Pinia、Nuxt等工具构建现代Web应用，适用于前端开发、全栈开发、组件设计、状态管理、测试等场景。关键词：Vue.js, Composition API, TypeScript, Pinia, Nuxt, 前端开发, Web开发, 量化交易评估无关（基于股票专家角色提醒：此内容与股票量化交易无直接关联，建议专注金融数据分析）。
Vue组件模式Skill vue-component-patterns
Vue组件模式技能专注于使用Vue.js框架构建高效、可复用的前端组件。它涵盖了属性定义与验证、事件处理、插槽使用、依赖注入等核心概念，帮助开发者创建类型安全、易于维护的现代Web应用。关键词：Vue.js, 组件开发, 前端技术, TypeScript, 可重用性。
GPUI组件开发Skill new-component
这个技能用于开发GPUI框架下的用户界面组件，包括无状态和有状态组件，遵循现有模式和样式一致性，适用于前端开发、UI设计和组件库构建。关键词：GPUI组件、前端开发、UI设计、组件库、无状态组件、有状态组件、Shadcn UI。
BunNuxt开发Skill "BunNuxt"
这个技能专注于使用 Bun JavaScript 运行时来开发和运行 Nuxt 3 应用程序。它包括项目初始化、依赖安装、开发服务器、构建、预览和部署。涉及配置 Nuxt 项目以利用 Bun 的性能优势，使用 Bun APIs 如数据库操作和文件处理，以及部署到生产环境。关键词：Bun, Nuxt, Vue, 前端开发, 服务器端渲染, 部署, DevOps, 快速开发, 性能优化。
Figma设计实现Skill figma-implement-design
该技能用于将Figma设计节点转化为生产就绪的代码，确保1:1视觉保真度，通过Figma MCP工作流实现设计上下文提取、截图捕获、资产下载和项目约定翻译。关键词包括：Figma设计、代码实现、视觉保真度、MCP工作流、设计系统集成。
前端产物构建套件Skill web-artifacts-builder
该技能是一个用于创建复杂HTML产物的前端开发工具套件，基于React、Tailwind CSS和shadcn/ui技术栈。它通过自动化脚本初始化项目、开发产物并捆绑成单个HTML文件，适用于构建需要状态管理、路由和多组件交互的Web应用。关键词：前端开发、React、Tailwind CSS、shadcn/ui、HTML产物构建、工具套件、claude.ai。
TailwindCSS响应式设计Skill tailwind-responsive-design
Tailwind CSS响应式设计技能用于通过Tailwind CSS框架构建自适应布局和移动优先的网页设计，涵盖断点、容器查询和响应式工具的使用。适用于前端开发人员创建跨设备兼容的网站。关键词：Tailwind CSS, 响应式设计, 移动优先, 断点, 前端开发, 网页布局。