前端开发 Skill技能列表
可访问性基础Skill accessibility-fundamentals
这个技能提供了可访问性基础知识,涵盖WCAG标准、ARIA属性、键盘导航等关键方面,适用于前端开发中构建表单、按钮、模态框等交互元素时确保对所有用户可访问。关键词:可访问性、WCAG、ARIA、键盘导航、屏幕阅读器、前端开发。
熊猫CSSSkill panda-css
熊猫CSS是一个前端CSS框架,用于通过CSS-in-JS技术管理Web样式,提高开发效率和性能。关键词:前端开发,CSS框架,CSS-in-JS,原子CSS,Web性能。
ArkUISkill ark-ui
Ark UI是一个用于快速开发Web用户界面的前端框架,提供丰富的UI组件和工具,支持响应式设计和跨平台兼容性。它帮助开发者简化界面构建过程,提升开发效率和应用性能。关键词:Ark UI, 前端开发, UI框架, 组件库, Web应用, 响应式设计, 开源框架
图像优化Skill image-optimization
该技能专注于实现响应式图像、优化图像格式和处理图像管道,包括生成srcset、转换到WebP/AVIF、懒加载和提供图像转换API,适用于无头CMS和现代Web开发。关键词:图像优化,响应式图像,WebP转换,AVIF转换,懒加载,图像处理API,焦点裁剪,性能优化。
设计主题系统Skill design-theme-system
这个技能用于为多站点/多租户 CMS 设计和实现主题化架构,包括设计 tokens、CSS 变量、Tailwind 配置等,支持品牌定制和前端开发集成。适用于网站主题管理、品牌一致性维护和用户体验优化。关键词:主题设计、设计 tokens、CSS 变量、Tailwind、多站点、CMS、前端开发。
定义字体排版系统Skill define-typography
此技能用于定义和生成全面的字体排版系统,包括字体比例、文本样式、响应式规则和CSS代码。它支持模块化、音乐和自定义比例,适用于博客、应用和营销等场景,确保可访问性和设计一致性。关键词:字体排版、模块化比例、文本样式、响应式设计、CSS、前端开发、设计系统、可访问性。
创建样式指南Skill create-style-guide
这个技能用于从设计令牌和主题配置生成全面的样式指南文档,支持markdown、HTML和Figma Tokens格式。关键词包括样式指南、设计令牌、主题配置、前端开发、文档生成。
快速类型生成器Skill quicktype
这个技能用于从 JSON 数据快速生成编程语言类型定义,支持 TypeScript、Go、Python 等多种语言,适用于 API 响应类型、配置文件定义等开发场景。关键词:JSON 转换、类型生成、开发工具、代码生成、API 类型定义、快速类型。
tsdown库打包工具Skill tsdown
tsdown是一个基于Rolldown和Oxc的快速、优雅的TypeScript和JavaScript库打包工具,用于构建前端库、生成类型声明文件、支持ESM、CJS、IIFE、UMD等多种输出格式,优化打包大小通过树摇和压缩,适用于库构建、项目迁移和前端开发,关键词包括TypeScript打包、JavaScript库构建、快速Bundler、Rolldown工具、tsdown用法。
AnthonyFu的JavaScript/TypeScript项目工具惯例Skill antfu
这个技能涉及使用Anthony Fu推荐的工具和最佳实践来设置和配置JavaScript/TypeScript项目。它包括代码组织、TypeScript配置、ESLint设置、Git hooks、包管理工具(如pnpm)等,旨在提高开发效率和代码质量。关键词:JavaScript, TypeScript, 项目配置, 开发工具, Anthony Fu, ESLint, Prettier, monorepo, 库发布。
最佳实践Skill best-practices
这个技能用于应用现代网页开发的最佳实践,专注于安全、浏览器兼容性和代码质量改进。关键词:网页开发、前端安全、兼容性优化、代码审核、HTTPS、CSP、语义HTML、错误处理、性能优化。
前端可访问性开发Skill accessibility
这个技能用于审计和提升网站的可访问性,遵循WCAG 2.1指南,确保内容对所有用户(包括残障人士)都可访问。它涵盖文本替代、颜色对比、键盘导航、屏幕阅读器支持等关键方面,帮助开发者创建无障碍的Web应用。关键词:Web可访问性、WCAG 2.1、无障碍开发、前端可访问性、A11Y、屏幕阅读器支持、键盘导航。