前端开发 Skill技能列表

⚡

Vue前端开发框架Skill vue

4.5

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架,基于Vue 3,提供组合式API、响应式系统和内置组件,支持TypeScript和单文件组件开发,优化前端性能。关键词:Vue,前端开发,JavaScript框架,组合式API,响应式系统,TypeScript,单文件组件,性能优化。

⚡

重构UI设计系统Skill refactoring-ui

4.5

重构UI设计系统是一个基于Refactoring UI理念的实用UI设计框架,用于帮助开发者通过系统化方法改善视觉层次、间距排版、颜色搭配、深度阴影、图像图标和布局构图,提升前端开发效率和UI专业度,适用于Tailwind CSS和响应式设计。关键词包括UI设计、前端开发、视觉层次、间距排版、颜色调色板、Tailwind CSS、界面优化、设计系统、用户体验。

⚡

Remotion渲染技能Skill remotion-render

4.5

这个技能用于通过React/Remotion组件代码渲染视频,支持所有Remotion API,如useCurrentFrame、useVideoConfig、spring、interpolate等。可配置分辨率、FPS、时长和编解码器,适用于程序化视频生成、动画图形、运动设计、数据驱动视频和React动画转视频。关键词:视频渲染、React、Remotion、代码生成视频、程序化视频、动画制作、TSX转MP4、前端动画。

⚡

前端美学设计Skill frontend-aesthetics

4.5

前端美学设计技能是一个专门用于创建高质量、独特UI界面的设计指南。它专注于避免常见的AI生成设计模式,提供专业的字体排版、色彩系统、动效设计和背景深度方案。关键词包括:UI设计、前端美学、设计系统、字体排版、色彩搭配、动效设计、Tailwind CSS、Framer Motion、设计令牌、品牌界面、仪表板设计、落地页优化。

⚡

实现命令面板Skill implementing-command-palettes

4.5

本技能详细讲解如何在React中实现高效、响应式的命令面板(Cmd+K/Ctrl+K),涵盖键盘导航、滚动行为、过滤匹配和性能优化等关键技术。关键词:React命令面板、键盘导航、scrollIntoView、快捷键匹配、防止重新渲染、前端开发、用户体验优化、React性能优化、UI组件开发。

⚡

VitePress静态站点生成器Skill vitepress

4.5

VitePress 是一款基于 Vite 和 Vue 3 的静态站点生成器,专为构建文档站点、博客和营销网站而设计。它支持文件路由、在 Markdown 中直接使用 Vue 组件、快速热更新等功能,是前端开发中用于高效创建静态网站的强大工具。关键词:VitePress, 静态站点生成器, Vite, Vue 3, 前端开发, 文档, 博客, SEO。

⚡

ReactFlow基础Skill reactflow-fundamentals

4.5

React Flow 基础技能是一个用于前端开发的 React 库,专注于构建可自定义的节点图编辑器、流程图、工作流界面和交互图表。涵盖核心概念、安装设置、节点和边配置、事件处理及插件组件,适用于数据可视化、无代码工具和 UI 设计。关键词:React Flow, 节点图表, 流程图, 交互界面, 前端开发, 数据可视化, 工作流编辑器

⚡

前端开发模式Skill frontend-patterns

4.5

前端开发模式技能专注于使用React和Next.js等现代前端框架的最佳实践,涵盖组件设计、状态管理、性能优化、表单处理、错误边界、动画和可访问性等方面,帮助开发者构建高性能、可维护的用户界面。关键词:前端开发、React、Next.js、组件模式、状态管理、性能优化、SEO、Web开发。

⚡

前端开发指南Skill frontend-dev-guidelines

4.5

Next.js 15 应用的前端开发指南,涵盖 React 19、TypeScript、Shadcn/ui、Tailwind CSS 等现代开发模式,包括 Server Components、Client Components、App Router、文件结构、组件、性能优化和 TypeScript 最佳实践。

⚡

高效库文档获取器Skill fetching-library-docs

4.5

高效库文档获取器是一款基于Context7 MCP技术的智能工具,专门用于快速获取编程库的API文档、代码示例和使用模式。通过创新的Shell管道过滤技术,实现77%的令牌节省,显著提升开发效率。主要功能包括:自动识别库名称和主题、智能过滤文档内容、提供代码示例和API签名、支持多种开发框架(React、Next.js、Prisma等)。适用于开发学习、代码参考、API查询等场景。关键词:文档获取、API参考、代码示例、令牌优化、开发工具、MCP技术、编程学习、效率工具。

⚡

Telegram生态开发技能Skill telegram-dev

4.5

全面的 Telegram 开发指南,涵盖 Bot 开发、Mini Apps(小程序)、客户端开发的完整技术栈。

⚡

Next.jsAppRouter-生产模式Skill nextjs

4.5

这个技能提供了Next.js 16 App Router的生产模式最佳实践,涵盖Server Components、Server Actions、Cache Components等,用于构建高性能的React应用,包括数据获取、表单处理、缓存优化和性能调优。关键词:Next.js 16, App Router, Server Components, Server Actions, 缓存组件, 性能优化, React 19.2, 生产部署, Web开发。