前端开发 Skill技能列表

核心组件库设计系统Skill core-components

4.5

这个技能涉及使用核心组件库和设计系统来构建一致的用户界面。它强调通过设计令牌实现样式标准化和代码可维护性,适用于前端开发项目。关键词:设计系统、组件库、设计令牌、前端开发、UI构建、代码规范、设计模式。

Relay分页技术Skill relay-pagination

4.5

Relay 分页技术是一种基于游标的分页方法,用于在 GraphQL 和 React 前端应用中高效管理和加载大数据集,支持无限滚动、加载更多模式等场景。关键词:Relay 分页, GraphQL, 光标分页, 前端开发, 数据加载, 无限滚动, 缓存管理, React 钩子。

React单页面应用开发技能Skill react

4.5

本技能专注于使用 React 19+、React Router v7、Jotai、Vite 和 Bun 构建现代单页面应用(SPA)。涵盖组件、钩子、状态管理、路由、表单、UI 架构、性能优化和测试等关键方面,适用于客户端路由、全局状态管理和异步数据加载的 React 应用开发,关键词包括 React 19、React Router、Jotai、Vite、Bun、SPA、前端开发、性能优化、可访问性。

前端可访问性Skill frontend-accessibility

4.5

前端可访问性技能涉及使用语义化HTML、ARIA、键盘导航和屏幕阅读器支持来构建符合WCAG标准的可访问Web应用程序,确保所有用户都能获得包容性的体验。

现代Web应用架构技能Skill modern-web-app-architecture

4.5

本技能提供现代Web应用架构的全面指导,涵盖SPA、SSR、SSG、RSC等渲染策略,专注于架构权衡、状态管理、性能优化、测试和团队扩展。关键词:Web应用、架构设计、前端开发、性能优化、SEO、状态管理、测试策略。

nuqs最佳实践Skill nuqs

4.5

本技能提供nuqs在Next.js应用中实现类型安全URL查询状态管理的最佳实践指南,包含42条规则,覆盖8个类别,帮助开发者进行代码生成、重构和代码审查。关键词:nuqs, Next.js, URL状态, 查询参数, 类型安全, 前端开发。

React开发避坑指南Skill pitfalls-react

4.5

React 开发避坑指南,提供 React 组件模式、表单验证、错误边界、可访问性 (a11y) 和响应式设计的常见陷阱与最佳实践。适用于前端开发、代码审查、性能优化、用户体验提升。关键词:React 组件,表单验证,错误边界,可访问性,响应式设计,前端开发,React Hook Form,Zod,ARIA,useEffect。

网页制品构建器Skill web-artifacts-builder

4.5

这是一个用于构建基于现代前端技术的复杂HTML制品的工具套件,特别适用于Claude.ai平台。它使用React、Tailwind CSS和shadcn/ui,支持状态管理、路由和组件化开发,便于创建高质量的前端制品。关键词:前端开发、React、Tailwind CSS、shadcn/ui、HTML制品构建、Claude.ai、状态管理、路由。

视觉引擎技能Skill visual-engine-skill

4.5

该技能用于构建和管理网站或应用的动态视觉体验系统。核心功能包括:创建和管理动画库(光束、剪辑、卡片、过渡等效果)、集成3D组件(Three.js)、构建灵感展示画廊和演示页面。它强调安全(如防癫痫)、可访问性(支持减少动画偏好)和性能优化,旨在通过丰富的动画和布局提升用户界面吸引力和交互体验。关键词:视觉体验引擎,网页动画,Three.js 3D,动画预设,可访问性动画,前端交互设计,UI/UX动画。

ReactWeb技能Skill react-web

4.5

React Web 开发技能,涵盖测试先行开发、组件和钩子测试模式、项目结构、组件模式、状态管理、路由、样式、表单处理、测试策略和性能优化。关键词:React, 测试先行,组件开发,状态管理,React Router,CSS 模块,Tailwind, 性能优化。

移动响应式网页开发Skill mobile-responsiveness

4.5

移动响应式网页开发技能专注于构建响应式、移动优先的网页应用,涵盖响应式布局设计、触摸交互优化、移动导航实现和屏幕尺寸适配。关键词包括移动响应式、前端开发、CSS、React、响应式设计、移动优先、断点、触摸事件、视口优化。

AnimationPatternsinReactSkill AnimationPatternsinReact

4.5

在React中使用Framer Motion、GSAP、React Spring和CSS动画创建高效、可访问的动画,包含最佳实践。