前端开发 Skill技能列表
VueRouter4最佳实践Skill vue-router-best-practices
本技能专注于Vue Router 4的最佳实践,涵盖导航守卫的使用、路由参数管理、组件生命周期交互等核心知识点。帮助开发者避免常见陷阱,如无限重定向、数据陈旧问题,提升Vue.js单页面应用的开发效率和代码质量。关键词包括Vue Router、导航守卫、路由参数、组件生命周期、Vue.js开发、前端开发。
TailwindUI重构Skill tailwind-ui-refactor
该技能用于基于Tailwind CSS的UI重构,提供52条规则和最佳实践,优化前端开发中的视觉设计、间距、排版、颜色和可访问性,提升代码质量和用户体验。关键词包括:Tailwind CSS, UI重构, 设计模式, 前端开发, 响应式设计, 视觉层次, 可访问性, 代码优化。
NuxtUIv4前端组件库技能Skill nuxt-ui-v4
这个技能是用于使用 Nuxt UI v4 组件库进行前端开发,构建响应式、可访问的 Nuxt v4 应用程序。它提供了 125+ 个组件,支持 Tailwind CSS v4、AI 集成、主题定制和 TypeScript,适用于仪表板、AI 聊天界面、页面布局、表单、定价页面等多种场景。关键词:Nuxt UI、前端开发、Vue.js、Tailwind CSS、组件库、AI 集成、主题定制、TypeScript。
React组件生成器Skill react-component
这是一个用于自动生成高质量、现代化React组件的技能工具。它专注于使用TypeScript、React Hooks和状态管理,并遵循无障碍(a11y)最佳实践。核心功能包括:一键生成函数组件、自定义Hooks和Context Provider,支持Props类型定义、样式配置和加载状态处理。适用于前端开发人员快速构建可复用、类型安全且易于维护的UI组件库,提升开发效率和代码质量。关键词:React组件生成,TypeScript,Hooks,前端开发,无障碍设计,状态管理,UI库。
Figma设计同步Skill figma-design-sync
Figma设计同步技能是一个自动化工具,用于比较Figma设计图和Web实现,自动检测视觉差异并提供修复建议。它支持响应式设计优化、Tailwind CSS调整,并确保像素完美对齐,适用于前端开发、自动化质量保证和设计到代码的高效转换。关键词:Figma,设计同步,前端开发,CSS,Tailwind,自动化测试,像素完美,Web开发。
国际化管理器Skill i18n-manager
国际化管理器是一个自动化工具,用于扫描项目代码中的硬编码用户字符串,提取并生成翻译文件,支持React、Vue、Python等多种框架,简化国际化流程。关键词:国际化、字符串提取、翻译文件、代码扫描、前端开发、后端开发、多语言支持。
Vue响应性系统Skill vue-reactivity-system
Vue响应性系统是Vue.js框架的核心部分,基于JavaScript Proxies实现数据响应式更新,包括ref、reactive、computed、watch等API,用于前端开发中的状态管理、性能优化和复杂数据流处理,关键词包括Vue、响应性、ref、reactive、computed、watch、状态管理、前端开发。
TailwindCSSv4性能优化最佳实践Skill tailwind
此技能提供Tailwind CSS v4的全面性能优化和最佳实践指南,帮助开发者在编写、审查或重构代码时优化构建性能、最小化CSS输出,并正确使用v4特性。适用于前端开发中的样式管理、响应式设计和性能提升。关键词:Tailwind CSS v4, 性能优化, 最佳实践, CSS生成, 构建配置, 前端开发, 响应式设计, 工具类。
Ink组件生成器Skill ink-component-generator
Ink组件生成器是一个专门用于为命令行界面(CLI)快速生成基于React的终端UI组件的工具。它能够自动化创建交互式组件(如选择列表、文本输入框、加载动画)、自定义状态管理钩子以及布局组件,并支持设置项目结构和测试。适用于开发命令行仪表盘、交互式表单、监控面板等终端应用程序。关键词:Ink组件,React CLI,终端UI,命令行界面,组件生成,前端开发,Node.js,交互式应用。
重构UI设计系统Skill refactoring-ui
重构UI设计系统是一个基于Refactoring UI理念的实用UI设计框架,用于帮助开发者通过系统化方法改善视觉层次、间距排版、颜色搭配、深度阴影、图像图标和布局构图,提升前端开发效率和UI专业度,适用于Tailwind CSS和响应式设计。关键词包括UI设计、前端开发、视觉层次、间距排版、颜色调色板、Tailwind CSS、界面优化、设计系统、用户体验。
Qt翻译工作流Skill qt-translation-workflow
Qt翻译工作流技能专门用于配置和管理Qt应用程序的国际化(i18n)和本地化流程。该技能提供完整的Qt Linguist集成方案,包括字符串提取、翻译文件管理、多语言编译和CMake自动化配置。关键词:Qt国际化、Qt Linguist、.ts文件、lupdate、lrelease、多语言支持、本地化工作流、CMake翻译集成、Qt应用程序翻译、i18n自动化
VercelReact最佳实践Skill vercel-react-best-practices
这个技能提供React和Next.js应用程序的性能优化最佳实践指南,由Vercel维护。它包含57条规则,分为8个优先级类别,帮助开发者在编写、审查或重构代码时确保高性能模式。关键词包括React性能优化、Next.js优化、数据获取、包大小、重新渲染控制、服务器端性能、客户端性能、JavaScript优化。