前端开发 Skill技能列表
Figma设计同步技能Skill figma-design-sync
这是一个自动化工具,用于比较和调整Figma设计与Web实现之间的视觉差异,确保设计一致性,提高前端开发效率和质量。关键词包括Figma、设计同步、CSS、Tailwind、Web开发、自动化、响应式设计。
JavaScript早期退出优化技巧Skill js-early-exit
JavaScript早期退出技巧用于在编码中尽早从函数或循环返回,以避免执行不必要的计算,从而提高代码性能和效率。适用于数据处理、输入验证、条件判断等场景。关键词:JavaScript,早期返回,代码优化,性能优化,函数设计。
SvelteKitSEO和元标签技能Skill seo-and-meta-tags-in-sveltekit
这个技能专注于在 SvelteKit 前端框架中实现 SEO 优化和元标签管理,提供指南、最佳实践、代码审查和重构建议,帮助开发者提升网站可搜索性、代码质量和一致性。关键词:SvelteKit, SEO, 元标签, 前端开发, 代码标准, 最佳实践, 性能优化。
UI组件生成技能Skill ui
此技能用于生成用户界面(UI)组件和反馈表单,支持前端开发中的英雄区域、表单设计等元素,适用于网站和应用的界面构建及用户反馈收集。关键词:UI组件,反馈表单,前端开发,用户界面设计,表单生成,可访问性,SEO优化。
UI组件生成技能Skill ui
这个技能专注于生成用户界面组件和反馈表单,用于网站和应用的前端开发。它包括约束管理、组件生成和表单创建,强调可访问性和用户体验优化。适用于UI设计、前端工程、用户反馈收集和可访问性检查。关键词:UI组件、反馈表单、前端开发、可访问性、用户体验、生成技能。
图像优化Skill optimize-images
该技能用于设计和实现响应式图像优化管道,支持多种现代图像格式(如AVIF和WebP),集成懒加载、srcset和CDN交付,适用于不同前端框架(如Next.js、Blazor),以提升网页性能、用户体验和SEO效果。关键词:图像优化、响应式设计、懒加载、srcset、WebP、AVIF、前端开发、性能优化。
图像优化Skill image-optimization
该技能专注于实现响应式图像、优化图像格式和处理图像管道,包括生成srcset、转换到WebP/AVIF、懒加载和提供图像转换API,适用于无头CMS和现代Web开发。关键词:图像优化,响应式图像,WebP转换,AVIF转换,懒加载,图像处理API,焦点裁剪,性能优化。
Makepad字体渲染技能Skill makepad-font
Makepad字体渲染技能是一个专业用于在Makepad框架中进行字体配置、文本布局和GPU-based文本渲染的工具。它利用SDF(签名距离场)技术确保文本在任何分辨率下保持清晰,支持字体家族、大小、样式配置,以及文本整形和布局管理。关键词:Makepad, 字体渲染, 文本布局, SDF, GPU, 字体配置, 文本整形, 字体图集, 前端开发, UI框架
添加实用函数Skill add-utils-function
这个技能用于在fe-tools项目中添加或修改实用程序函数,涵盖前端、后端、Canvas和AI等环境,提高开发效率,支持工具库扩展和模块化开发。关键词:实用函数、fe-tools、前端开发、工具函数、模块化开发、TypeScript、SEO。
添加实用函数技能Skill add-utils-function
此技能用于在fe-tools中添加或修改实用函数,涵盖从需求分析到代码实现的完整工作流程,包括包选择、避免重复、类型安全、文档编写、测试和验证。关键词:实用函数、前端开发、代码添加、JSDoc、单元测试。
无障碍网页开发(WCAG)Skill accessibility-wcag
此技能专注于构建遵循WCAG 2.1/2.2标准的无障碍网页应用,确保网站对所有用户可访问,包括使用辅助技术的用户。涉及语义HTML、ARIA属性、键盘导航、屏幕阅读器支持、包容性设计等关键技术。关键词:无障碍开发、WCAG合规、网页可访问性、ARIA、键盘导航、屏幕阅读器、SEO搜索。
Svelte前端开发最佳实践Skill svelte
这个技能专注于使用 Svelte 5 框架进行高效前端开发,涵盖 TanStack Query 的突变模式管理、shadcn-svelte UI 组件库的集成与最佳实践,以及组件组合和自我封装的设计模式。适用于构建现代化、响应式的单页应用,提升开发效率和用户体验。关键词:Svelte, TanStack Query, shadcn-svelte, 前端开发, 组件开发, 状态管理, UI 设计, 数据突变