前端开发 - SkillsBot AI Skill技能库

PiniaVue状态管理Skill pinia

Pinia 是 Vue 的官方状态管理库，提供类型安全、可扩展性和直观的 API，适用于 Vue 应用中的状态管理、存储定义和组件通信。关键词：Vue 状态管理、Pinia、TypeScript、可扩展、前端开发、Vue 插件。

Canvas 设计技能专注于使用 HTML Canvas API 和设计工具（如 Figma、Adobe Creative Suite）进行视觉创作，涵盖数据可视化、交互式图形、图表制作、游戏图形、动画、图像处理和视觉编辑器开发。关键词包括：HTML Canvas、数据可视化、交互式图形、动画设计、游戏开发、图像处理、视觉编辑器、前端开发。适用于前端项目、数据可视化、游戏设计和视觉内容制作，提升用户体验和视觉效果。

Context7高效文档获取器Skill context7-efficient

Context7高效文档获取器是一个智能开发工具，通过shell管道过滤技术实现86.8%的令牌节省，专门用于快速获取JavaScript、Python、Go、Rust等编程语言的库文档、代码示例和API参考。该工具支持React、Next.js、Prisma、Express等主流框架，提供智能过滤、代码示例提取和API签名识别功能，帮助开发者高效学习和使用各种开发库。

构建聊天界面Skill building-chat-interfaces

本技能专注于构建生产级的AI聊天界面，提供完整的全栈解决方案。涵盖前端React组件集成、后端Python服务器开发、身份验证机制（JWT/JWKS）、上下文注入、数据库持久化、SSE流式响应、Next.js集成以及MCP工具认证等核心功能。适用于需要将AI智能体嵌入到Web应用、实现个性化对话体验、管理用户会话历史的企业级应用场景。关键词：AI聊天界面、ChatKit集成、全栈开发、身份验证、上下文注入、流式响应、Next.js代理、MCP工具、生产级部署。

谷歌TypeScript代码规范指南Skill ts-google

这个技能提供谷歌的TypeScript风格指南，帮助开发者编写高质量、类型安全的代码。它覆盖模块组织、类型安全、类设计、函数模式等关键领域，适用于代码编写、审查和重构，提升代码一致性和可维护性。关键词：TypeScript、代码风格、Google、最佳实践、前端开发、类型安全、模块化、错误处理、命名规范。

TypeScript打包工具Skill tsdown

tsdown是一个基于Rolldown和Oxc的TypeScript打包工具，用于快速构建TypeScript库、生成.d.ts声明文件、支持ESM/CJS双输出、包验证和插件开发。适用于TypeScript库开发、npm包发布、Vue/React组件库构建等场景，提升开发效率和代码质量。关键词：TypeScript打包、tsdown、库构建、ESM/CJS、d.ts生成、插件开发、前端工具。

Avue表单配置与验证技能Skill avue-form

本技能提供Avue-form表单组件的全面指导，包括在Vue项目中安装、配置表单选项和列、处理表单验证、使用动态表单、事件和方法等。适用于Vue开发者快速上手和管理表单。关键词包括Avue-form、Vue表单、表单验证、动态表单、表单配置、前端开发。

SlidevSkill slidev

Slidev是一款面向开发者的现代化演示文稿制作工具，基于Vite、Vue和Markdown构建。它支持实时代码演示、语法高亮、交互式组件、数学公式、图表绘制和演讲录制，能够将技术文档、会议演讲和教学材料转化为精美的Web幻灯片，并支持导出为PDF、PPTX等多种格式。

VueRouter4最佳实践Skill vue-router-best-practices

本技能专注于Vue Router 4的最佳实践，涵盖导航守卫的使用、路由参数管理、组件生命周期交互等核心知识点。帮助开发者避免常见陷阱，如无限重定向、数据陈旧问题，提升Vue.js单页面应用的开发效率和代码质量。关键词包括Vue Router、导航守卫、路由参数、组件生命周期、Vue.js开发、前端开发。

UI设计与样式技能Skill ui-styling

该技能用于创建美观、可访问的用户界面，结合shadcn/ui组件库、Tailwind CSS实用样式和canvas-based视觉设计系统，适用于前端开发、UI设计、响应式布局和可访问性优化。关键词：UI设计、前端开发、响应式布局、可访问性、Tailwind CSS、shadcn/ui、视觉设计、React框架、深色模式、设计系统。