前端开发 Skill技能列表
设计系统入门工具Skill design-system-starter
这个技能是一个设计系统入门工具，用于快速创建和管理设计系统，提供设计令牌、组件架构、可访问性指南和文档模板。它帮助确保用户界面的一致、可扩展和可访问，适用于前端开发者和设计师，提升开发效率和用户体验。关键词：设计系统、UI组件、前端开发、可访问性、设计令牌、React、主题化、文档、原子设计、WCAG合规。
核心网页指标优化Skill core-web-vitals
这个技能专注于优化LCP（最大内容绘制）、INP（交互到下一次绘制）和CLS（累积布局偏移）这三个核心网页指标，以提升页面体验和搜索引擎排名。适用于前端开发、SEO优化和网站性能监控。关键词：核心网页指标、LCP、INP、CLS、页面体验优化、前端性能、搜索排名。
VercelReact最佳实践Skill vercel-react-best-practices
这是一个由Vercel工程团队提供的React和Next.js性能优化技能指南，包含57条规则，分为8个优先级类别，用于指导开发者编写、审查和重构代码，以消除性能瓶颈、优化包大小、提升服务器和客户端性能。关键词：React, Next.js, 性能优化, Vercel, 前端开发, 代码重构, 包优化, 数据获取
组件故事生成技能Skill generate-component-story
这个技能用于创建UI组件的故事示例，帮助开发者在编写文档、创建示例或演示组件用法时提供结构化指导，提升前端开发效率和组件可维护性。关键词：组件故事、前端开发、UI组件、故事示例、文档生成、代码示例。
前端设计技能Skill frontend-design
前端设计技能专注于创建独特、生产就绪的前端用户界面，结合设计思维与代码执行，适用于网页、组件和应用程序的开发。关键词：前端设计、UI/UX、网页开发、React、Vue、HTML/CSS/JS。
零构建前端开发Skill zero-build-frontend
零构建前端开发是一种前端技术，通过CDN直接加载React、Tailwind CSS等库，无需本地构建工具，适用于快速开发静态网站、地图应用、数据驱动应用和浏览器扩展。关键词：零构建、前端开发、CDN、React、Tailwind CSS、JavaScript、静态网站、浏览器扩展、Google Sheets、Leaflet。
组件包装架构Skill component-wrapper-architecture
这个技能用于在React项目中包装现有的shadcn/ui组件，以添加8位复古风格，同时确保向后兼容性和代码重用。关键词包括：组件包装、8位风格、shadcn/ui、React、TypeScript、前端开发、复古UI。
TailwindCSS配置Skill tailwind-configuration
Tailwind CSS配置技能专注于通过tailwind.config.js文件自定义Tailwind CSS框架，包括内容路径设置、主题扩展、插件集成和构建优化，适用于前端开发项目，关键词包括Tailwind CSS、配置、主题定制、插件、前端开发、CSS框架。
表单验证Skill form-validation
使用 React Hook Form, Formik, Vee-Validate 和自定义验证器实现表单验证，包括客户端验证、服务器端同步和实时错误反馈。
React19性能优化Skill react
这个技能提供React 19应用程序的性能优化指南，涵盖并发渲染、服务器组件、表单操作、数据获取、状态管理、记忆化和组件模式等关键主题，帮助前端开发者提升应用性能、减少重新渲染和优化开发效率，关键词包括React 19、性能优化、并发渲染、服务器组件、表单操作、数据获取、状态管理。
TypeScriptJSDoc文档编写Skill typescript-jsdoc
TypeScript JSDoc 文档编写技能专注于为TypeScript代码生成高效、清晰的JSDoc注释。它提供关于注释格式、最佳实践、策略性放置的指导，帮助开发者提升代码可读性、可维护性，并增强IDE的智能提示和文档支持。关键词：TypeScript, JSDoc, 代码文档, 注释规范, 开发工具, API文档, 代码维护, 编程规范。
Web工件构建器Skill web-artifacts-builder
Web Artifacts Builder是一个专为Claude.ai平台设计的HTML工件生成工具套件。该工具使用React、TypeScript、Tailwind CSS和shadcn/ui等现代前端技术，帮助用户快速创建复杂、交互式的多组件HTML工件。支持状态管理、路由功能，并能将完整的前端应用打包为单个HTML文件，便于在对话中直接分享和使用。适用于需要高级UI组件和复杂交互的Claude.ai工件开发场景。 关键词：Claude.ai工件开发、React前端工具、HTML打包工具、shadcn/ui组件库、Tailwind CSS主题、前端自动化构建、单文件HTML应用、AI助手工具开发