前端开发 Skill技能列表
图像优化Skill image-optimization
这项技能涉及对网站图像进行优化，以减少文件大小而不牺牲质量，包括压缩、使用现代格式和响应式技术，以加快加载速度，提升网站性能和用户体验。
shadcn-ui组件约定Skill shadcn-ui-conventions
这个技能提供了在 shadcn/ui 框架下开发 UI 组件的约定，特别适用于创建和修改 8 位复古风格的组件。它涵盖了导入模式、类型定义、引用处理和样式管理，确保代码的一致性和可维护性。关键词：shadcn/ui, UI 组件, 8 位复古风格, 前端开发, 组件约定, 代码规范。
注册组件模式Skill registry-component-patterns
该技能涉及在shadcn/ui框架中注册和管理8位风格的前端组件，包括定义组件和块的注册模式、管理依赖关系、设置分类等，适用于游戏UI和复古主题的前端开发。关键词：shadcn/ui, 8位组件, 组件注册, 前端开发, 游戏UI。
FumadocsMDX结构指南Skill fumadocs-mdx-structure
该技能用于创建和管理Fumadocs平台的MDX文档文件，包括前置元数据设置、组件导入、安装命令生成和代码示例编写，适用于前端开发中的8-bit组件文档化工作。关键词：MDX文档、前端开发、组件集成、Fumadocs、8-bit组件、文档结构。
组件包装架构Skill component-wrapper-architecture
这个技能用于在React项目中包装现有的shadcn/ui组件，以添加8位复古风格，同时确保向后兼容性和代码重用。关键词包括：组件包装、8位风格、shadcn/ui、React、TypeScript、前端开发、复古UI。
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助手工具开发
WP区块主题Skill wp-block-themes
WP区块主题技能专注于WordPress区块主题的开发、配置与调试。核心内容包括theme.json全局设置与样式管理、模板与模板部件创建、模式注册、样式变体应用，以及解决站点编辑器中的样式覆盖、缓存等常见问题。适用于WordPress开发者、主题设计师进行现代区块主题开发与维护。关键词：WordPress区块主题，theme.json配置，模板开发，样式变体，站点编辑器调试，WordPress主题开发。
WordPress交互性APISkill wp-interactivity-api
本技能用于WordPress交互性API的开发与调试，涵盖data-wp指令、状态管理、模块化视图脚本集成、水合作用及性能优化。适用于WordPress 6.9+版本，帮助开发者解决指令不触发、状态更新异常、构建集成等问题。关键词：WordPress交互性API, data-wp指令, viewScriptModule, 水合作用, 状态管理, 前端交互, WordPress开发
BetterAuthIntegrationSkill auth-integration
使用Better Auth/NextAuth v5进行身份验证实现的专家指导，包括登录/注册表单、Zustand会话管理、通过中间件的受保护路由和ERP系统的角色基础访问控制。
Next.jsAppRouter前端开发专家Skill frontend-nextjs-app-router
Next.js App Router前端开发专家技能，专注于现代React应用架构。提供Next.js 13+ App Router完整解决方案，包括服务器组件优化、动态路由配置、嵌套布局实现、性能优化策略和ERP系统开发。关键词：Next.js App Router、React服务器组件、前端架构、动态路由、性能优化、TypeScript、shadcn/ui、SEO优化、企业级应用开发。
React组件开发技能Skill react-component
React组件开发技能是专门用于创建React UI组件的专家指导体系，涵盖函数组件、钩子、自定义钩子和组件组合模式。该技能专注于TypeScript类型安全、性能优化、可访问性设计和现代React最佳实践，适用于构建ERP系统、仪表板、KPI卡片、表单、模态框等企业级UI组件。关键词：React组件开发、TypeScript、函数组件、自定义钩子、组件组合、性能优化、可访问性、UI设计、前端开发、React最佳实践
TailwindCSS样式设计技能Skill tailwind-css
Tailwind CSS样式设计专家指南，专注于移动优先响应式设计、自定义主题和实用优先方法。提供组件样式、响应式布局、深色模式支持、可访问性优化和性能调优。适用于前端开发、UI组件设计、仪表板布局、Web应用界面开发。关键词：Tailwind CSS, 移动优先设计, 响应式布局, 深色模式, 实用优先, 组件样式, 前端开发, UI设计, 可访问性, 性能优化