前端开发 Skill技能列表
前端开发模式Skill frontend-patterns
前端开发模式技能专注于使用React和Next.js框架，涵盖组件设计、状态管理、性能优化、UI最佳实践等，帮助开发者构建高性能、可维护的前端应用。关键词：前端开发、React、Next.js、状态管理、性能优化、UI设计、组件模式、量化交易应用。
PortfolioBuddy2架构参考Skill architecture-reference
Portfolio Buddy 2 是一个用于量化交易分析和投资组合管理的Web应用程序。本技能文档提供了该项目的完整架构参考，包括组件层次结构、关键钩子（如useMetrics、usePortfolio）、实用函数（如dataUtils.ts中的指标计算和数据处理）、数据流、状态管理策略以及性能优化模式。它详细说明了如何添加新功能、重构大型组件（如PortfolioSection），并强调了TypeScript最佳实践以避免使用any类型。该文档是开发人员添加功能、修改组件、理解数据流或新成员熟悉代码库的必备指南。关键词：量化交易、投资组合分析、React架构、TypeScript、Chart.js、性能优化、代码重构、数据流、钩子模式。
前端设计Skill frontend-design
前端设计技能专注于创建独特、高质量的前端界面，使用HTML、CSS、JavaScript、React等技术实现，避免通用AI美学，适用于构建网页组件、页面、应用程序等场景。强调创意设计、美学优化和代码精细化。关键词：前端设计、UI设计、网页开发、创新代码、美学界面、生产级前端、避免AI美学、设计思维。
MUI无头UI组件库最佳实践Skill mui-base
这个技能提供了MUI Base UI的最佳实践指南，专为构建无头React组件库设计。它涵盖了组件模式、命名约定、组织方式、错误处理和样式规则，帮助开发者创建无样式UI组件、复合组件、实现无障碍优先模式，并支持受控和非受控组件模式。关键词：MUI, React, 组件库, 无头UI, 前端开发, 最佳实践。
Web框架技能组Skill web-frameworks
本技能组提供综合指南，用于使用Next.js、Turborepo和RemixIcon构建现代全栈Web应用程序。适用于React应用开发、服务器端渲染、单仓库管理、构建性能优化和图标库集成。关键词：Next.js, Turborepo, RemixIcon, 全栈开发, 前端框架, 单仓库, 图标库, SEO优化。
SEO处理技能Skill seo-handler
SEO处理技能是一个针对Next.js框架的搜索引擎优化管理工具。它专注于站点地图管理、元数据配置、结构化数据生成、服务器端渲染优化和爬虫控制，旨在提升网站在Google、百度等搜索引擎中的排名和可见性。核心功能包括自动生成站点地图、优化OpenGraph标签、注入JSON-LD结构化数据、配置ISR缓存策略以及管理robots.txt文件。适用于前端开发者、SEO工程师和网站管理员，帮助实现技术SEO的最佳实践。
TailwindCSSV4MasterySkill tailwind-css-v4-mastery
Tailwind CSS V4 Mastery技能提供了专家级的指导，用于利用Tailwind CSS V4的新Oxide引擎、CSS优先配置和现代样式范式。这项技能将用户转变为Tailwind V4架构专家，能够设计组件系统、优化性能，并以精确度执行复杂的样式挑战。
功能性setState更新Skill rerender-functional-setstate
React功能性setState更新是用于优化React组件中状态管理的技术，通过使用函数形式的setState来更新基于当前状态的状态值，防止闭包陈旧问题并减少不必要的性能开销。关键词：React，setState，闭包，性能优化，状态管理，前端开发。
shadcn/ui前端组件库开发技能Skill shadcn
这个技能提供了shadcn/ui组件库的全面最佳实践指南，覆盖项目设置、组件架构、可访问性、样式主题、表单模式、数据展示、布局导航、组件组合、性能优化和状态管理，适用于前端开发者使用React、Tailwind CSS、Radix UI等技术进行高效、可访问和性能优化的Web开发。关键词：shadcn/ui, 前端开发, React, Tailwind CSS, 可访问性, 性能优化, 组件库。
AI前端构件构建器Skill artifacts-builder
AI前端构件构建器是一个专门用于创建复杂、交互式Claude.ai HTML构件的工具套件。它基于现代前端技术栈（React、TypeScript、Tailwind CSS、shadcn/ui），提供完整的项目初始化、开发、打包流程。该工具支持状态管理、路由和丰富的UI组件，能够将复杂的React应用打包成单个自包含的HTML文件，方便在Claude对话中直接分享和使用。主要功能包括：一键项目初始化、现代化前端开发环境、shadcn/ui组件库集成、智能打包工具、自包含HTML输出。关键词：Claude构件、前端开发、React应用、HTML打包、AI工具、shadcn/ui、Tailwind CSS、Vite、Parcel、交互式构件
设计系统入门工具Skill design-system-starter
这个技能是一个设计系统入门工具，用于快速创建和管理设计系统，提供设计令牌、组件架构、可访问性指南和文档模板。它帮助确保用户界面的一致、可扩展和可访问，适用于前端开发者和设计师，提升开发效率和用户体验。关键词：设计系统、UI组件、前端开发、可访问性、设计令牌、React、主题化、文档、原子设计、WCAG合规。
VercelReact最佳实践Skill vercel-react-best-practices
这个技能提供了Vercel维护的React和Next.js应用程序性能优化指南，包含57条规则，涵盖8个类别，适用于前端开发中的代码优化和性能提升。关键词：React, Next.js, 性能优化, 前端开发, Vercel, 代码重构, 包优化, 数据获取。