前端开发 Skill技能列表
JSON-UI报告渲染器Skill json-ui
JSON-UI 是一个强大的 JSON 到 HTML 报告渲染器，支持 React 组件和双语国际化。它允许开发者通过定义 JSON 结构快速生成美观、交互式的学术或数据报告网页。核心功能包括组件化架构、Zod 模式验证、静态 HTML 输出、React 组件库以及无缝的中英文语言切换。适用于学术论文展示、数据分析报告、自动化文档生成等场景。关键词：JSON渲染，HTML报告，React组件，双语国际化，i18n，学术报告，数据可视化，前端开发工具。
Vue组合式APISkill vue-composition-api
Vue组合式API是Vue 3框架的核心功能，用于通过组合式函数构建响应式、可维护和可复用的前端应用程序。它提供ref、reactive、computed、watch等核心特性，支持更好的代码组织、逻辑复用和TypeScript集成，适用于现代Vue开发，提高开发效率和代码质量。关键词：Vue 3, Composition API, 前端开发, 响应式编程, TypeScript, 组件化开发, 可复用逻辑, 生命周期钩子, 状态管理。
React最佳实践指南Skill react-best-practices
这是一份关于 React 框架性能优化与开发最佳实践的权威指南。它系统性地总结了来自官方文档和一线工程团队的经验，涵盖代码审查、性能调试、打包优化、副作用管理、状态设计等核心场景。关键词包括：React 性能优化、重渲染、代码分割、useEffect 最佳实践、状态管理、React 编译器、SSR、不可变更新、前端开发。
Context7高效文档获取器Skill context7-efficient
Context7高效文档获取器是一款专为开发者设计的智能文档检索工具，通过创新的shell管道过滤技术实现高达86.8%的令牌节省。该工具能够智能获取JavaScript、Python、Go、Rust等主流编程语言的库文档、API参考、代码示例和最佳实践。核心功能包括智能库解析、代码示例提取、API签名过滤和概念解释，特别适用于React hooks查询、Next.js路由语法、Prisma使用模式等框架学习场景。主要关键词：文档获取、令牌优化、代码示例、API参考、开发工具、智能过滤、MCP技术、编程学习、框架文档、效率提升。
Mermaid流程图Skill mermaid-flowchart
Mermaid流程图是一种基于文本的图表工具，它允许用户使用文本和代码来创建和维护流程图。它支持多种节点形状、链接样式、方向配置以及交互功能，非常适合软件开发和数据可视化领域。
原子设计：夸克Skill atomic-design-quarks
原子设计：夸克技能专注于使用原子设计方法论中的夸克级别来构建和维护设计系统的基础。它包括定义和管理设计令牌（如颜色、间距、字体大小、阴影等原始值），并将它们导出为CSS自定义属性，以实现样式一致性和主题支持。此技能适用于前端开发中的设计系统建设，确保可维护性和可扩展性，适用于创建可主题化的组件库、大型代码库一致性维护以及多品牌应用开发。关键词：原子设计、夸克、设计令牌、CSS变量、前端开发、设计系统、样式一致性、主题化。
Zustand存储模式Skill zustand-store-patterns
这个技能是关于使用Zustand进行React状态管理的存储模式，用于优化应用性能和组织代码结构，包括存储定义、选择器、动作分离、性能优化等。关键词：Zustand, React, 状态管理, 存储模式, 前端开发, 性能优化。
算法艺术生成Skill algorithmic-art
这个技能专注于使用p5.js创建算法艺术，通过种子随机性和交互式参数探索生成独特的视觉作品。它涉及计算美学、噪声函数、粒子系统和流动场，允许用户调整参数并探索无限的艺术变体。关键词：算法艺术、生成艺术、p5.js、交互式参数、种子随机性、计算美学。
Figma组件代码生成Skill figma-generate-component
此技能通过Figma MCP服务器自动将Figma设计图中的组件和框架转换为生产级前端代码，支持React、Vue、HTML/CSS等多种框架，优化设计到开发的工作流，提升效率。关键词：Figma, 组件代码生成, 设计到代码, 前端开发, 自动化工具, 设计系统, 可访问性, 响应式设计。
ChatKitWidget集成技能Skill chatkit-widget
在Next.js/React应用中安全配置和自定义OpenAI/ChatKit聊天小部件的专家集成。
前端开发前指南阅读Skill before-frontend-dev
该技能用于在开始前端开发任务前，系统阅读和理解相关开发指南，以确保代码质量、一致性并遵循最佳实践，关键词包括前端开发、指南阅读、编码标准、代码规范、SEO优化。
GSAPHUD动画开发技能Skill gsap
本技能提供GSAP（GreenSock动画平台）专业知识，用于在JARVIS AI助手HUD中创建平滑、专业的动画。主要应用包括HUD面板入场/出场动画、状态指示器过渡、数据可视化动画、滚动触发效果和复杂时间线序列。强调测试驱动开发、性能优化、内存管理、可访问性和高质量代码实践，适用于前端开发场景。关键词：GSAP, 动画, JARVIS, HUD, 前端开发, Vue.js, 性能优化, TDD, 可访问性。