前端开发 Skill技能列表
构件构建器Skill artifacts-builder
构件构建器是一个前端开发工具套件,专门用于创建和打包复杂、多组件的Claude.ai HTML构件。它集成了React、TypeScript、Vite、Tailwind CSS和shadcn/ui,支持状态管理、路由和组件化开发,并能将项目捆绑成单个HTML文件,便于分享和部署。关键词:前端开发、HTML构件、React、Tailwind CSS、shadcn/ui、构件构建、Vite、Parcel。
Algolia搜索集成技能Skill algolia-search
此技能提供Algolia搜索的集成解决方案,涵盖React InstantSearch hooks使用、Next.js服务器端渲染、数据同步和索引策略。适用于开发者在Web应用中添加高效的搜索功能。关键词:Algolia搜索、React、InstantSearch、Next.js、SSR、索引策略、数据同步。
无障碍设计Skill accessibility
这个技能用于审计和改善网站的无障碍访问,遵循WCAG 2.1指南,确保内容对所有用户包括残障人士可用。涉及文本替代、颜色对比、键盘导航、屏幕阅读器支持等关键方面。关键词:无障碍访问、WCAG、屏幕阅读器、键盘导航、a11y、颜色对比、ARIA、HTML有效性。
Figma到React代码转换技能Skill design-to-code
这个技能用于将Figma设计文件自动转换为高质量的React + TypeScript组件代码,确保像素完美的视觉还原。它通过辅助脚本简化流程,支持错误恢复,提高前端开发效率。关键词包括Figma、React、TypeScript、代码生成、前端开发、自动化、像素完美。
前端设计Skill frontend-design
此技能用于创建独特、生产级的前端界面,专注于高质量UI设计和创意编码,避免通用AI美学,适用于网页组件、React、HTML/CSS开发、美学设计、创意布局等场景,提升用户体验和视觉冲击力。关键词:前端开发、UI设计、网页界面、创意编码、美学设计、生产级代码、React组件、HTML/CSS布局、用户体验优化。
FigmaMCP集成Skill figma
Figma MCP 是一个技能,用于通过 Figma MCP 服务器将 Figma 设计自动化转换为生产代码。它允许用户根据 Figma URL 或节点 ID 获取设计上下文、截图和资产,然后按照项目规范(如 React 和 Tailwind)实现代码,确保视觉和行为与设计一致。关键词:Figma, MCP, 设计到代码, 前端开发, React, Tailwind, 自动化集成。
算法艺术Skill algorithmic-art
这个技能用于创建算法艺术,通过p5.js库实现种子随机性和交互式参数探索,生成独特的生成式艺术作品。关键词:算法艺术、生成式艺术、p5.js、交互式参数、前端开发、艺术生成、计算美学、Web技术、创意编程、数字艺术
网页无障碍审计专家Skill AccessibilityAuditor
这个技能用于网页可访问性审计,确保网站符合WCAG 2.1 AA/AAA标准,实现ARIA属性,测试屏幕阅读器兼容性,并提供无障碍设计指导。关键词:网页可访问性、WCAG合规、ARIA实现、无障碍设计、屏幕阅读器测试、ADA合规。
网页构件构建器Skill web-artifacts-builder
网页构件构建器是一个前端开发工具套件,专门用于创建复杂的Claude.ai HTML artifact。它利用React、TypeScript、Vite、Parcel、Tailwind CSS和shadcn/ui等现代技术,支持状态管理、路由和组件化开发,适合需要高级前端功能的项目。关键词:前端开发、React、HTML artifact、Claude.ai、状态管理、路由、shadcn/ui。
Vite使用指南Skill vite
此技能提供Vite构建工具的全面指导,覆盖从入门设置到高级配置、插件选择、API使用和部署优化,适用于前端开发项目以提升开发效率和性能。关键词:Vite, 构建工具, 前端开发, HMR, 插件, SSR, 配置, 依赖预捆绑, 资产。
uCharts图表库使用指南Skill ucharts
此技能提供uCharts图表库的全面使用指导,涵盖安装、配置、图表类型、API文档和最佳实践,适用于uni-app、微信小程序、H5和APP等平台的数据可视化开发。关键词:uCharts, 图表库, 数据可视化, uni-app, 微信小程序, 前端开发, 图表配置。
Svelte框架开发指导Skill svelte
此技能提供Svelte前端框架的全面学习与应用指导,涵盖组件开发、响应式编程、状态管理、动画过渡和编译等核心功能,帮助用户快速掌握Svelte进行高效Web应用开发。关键词:Svelte、前端框架、组件开发、响应式编程、Web开发、存储管理、编译优化。