前端开发 Skill技能列表

⚡

Next.jsBetterAuth集成方案Skill next-js-better-auth-integration

4.5

本技能提供了一套完整的 Next.js 应用身份验证集成方案,专门针对 App Router 架构,使用 Better Auth 库实现。核心功能包括:JWT令牌管理、会话状态同步、受保护路由中间件、社交登录集成以及安全的身份验证流程。适用于需要用户登录、权限控制和安全会话管理的现代Web应用开发。关键词:Next.js身份验证、Better Auth集成、JWT令牌、会话管理、受保护路由、App Router、前端安全、用户登录、社交登录、身份验证中间件。

⚡

Angular组件开发Skill angular-component

4.5

Angular组件开发技能,专注于使用Angular v20+最新特性构建现代化、高性能、可访问的UI组件。涵盖信号式输入输出、OnPush变更检测、宿主绑定、内容投影、生命周期钩子等核心概念,遵循最佳实践,提升前端开发效率与代码质量。关键词:Angular, 组件开发, 信号, 前端框架, UI组件, 可访问性, 性能优化。

⚡

Vite前端构建工具Skill vite

4.5

Vite 是一款现代化的前端构建工具,专为提升开发效率和构建性能而设计。它通过原生 ES 模块实现极速的服务器启动和热更新(HMR),并利用 Rolldown/Rollup 进行高效的打包优化。Vite 开箱即用地支持 TypeScript、JSX、CSS 预处理器,拥有丰富的插件生态系统,适用于配置项目、开发调试和生产部署。关键词:Vite 构建工具,前端开发,热更新 HMR,Rollup 打包,TypeScript 支持,插件生态,开发服务器,生产优化。

⚡

OrvalAPI客户端生成技能Skill generate-api-client

4.5

该技能用于从OpenAPI规范文档(如api-docs.yaml)自动生成类型安全的API客户端代码。它通过Orval工具链执行,确保前端应用能够以强类型、可维护的方式调用后端API,提升开发效率和代码质量。关键词:OpenAPI,API客户端,类型安全,自动生成,前端开发,TypeScript,代码生成。

⚡

WebPerformanceAuditSkill web-performance-audit

4.5

进行综合性的网站性能审计,测量页面加载速度,识别性能瓶颈,并推荐优化措施以提升用户体验和搜索引擎优化(SEO)。

⚡

TypeScript技能Skill typescript

4.5

TypeScript 技能涵盖了使用 TypeScript 进行严格模式编程,结合 ESLint 和 Jest 进行代码质量和测试保障的最佳实践。关键词包括:TypeScript, ESLint, Jest, 代码质量,测试覆盖率。

⚡

响应式设计模式Skill responsive-design-patterns

4.5

响应式设计模式是一种专注于移动设备优先的响应式用户界面设计方法。它包括断点系统、流体布局、自适应组件和触摸友好模式等关键元素,确保网站在不同设备上都能良好显示。适用于前端开发,提升用户体验和开发效率。关键词:响应式设计、移动优先、断点、流体布局、自适应组件、前端开发、用户体验。

⚡

前端设计技能Skill frontend-design

4.5

这个技能用于创建独特、生产级别的前端界面,注重高设计质量,避免通用AI美学,适用于构建Web组件、页面或应用程序。关键词包括前端开发、UI设计、代码实现、创意美学、生产级代码。

⚡

等轴测技术图解Skill anatomy

4.5

把算法、系统或组件的技术概念转译成一台可识别的等轴测物理机器(测试台架、千分表、抽屉柜、绘图仪、锁),用数十到上百个精细实体零件、四段色调与正确的画家绘制顺序生成可交互 SVG 图解;不依赖框架(TypeScript/JS 直接输出 SVG+HTML),也支持 React/Next.js,可叠加与等轴测相机同一世界空间的 WebGL 着色器(火焰、排气、水、焦散、灯光)以及可选 3D 旋转模式,并附带几何审计、线端检查、无头浏览器截图与录制的验证工具链。关键词:等轴测插画, isometric SVG, 技术图解, 可交互解说图, 数据可视化, 前端可视化, WebGL 着色器, React/Next.js, SVG 绘图套件, 画家算法, 几何审计, 3D 转盘, Linear 风格技术绘图, 文档配图, 博客插图, 落地页插图

⚡

服务器操作Skill server-actions

4.5

Next.js Server Actions 是一种技术,允许在Next.js应用中定义服务器端函数来处理表单提交、数据变异等操作,无需编写API路由。它简化了前端与后端的交互,提高了开发效率和用户体验。关键词:Next.js、服务器操作、表单处理、数据变异、useFormState、useFormStatus、revalidatePath、revalidateTag。

⚡

FumadocsMDX结构指南Skill fumadocs-mdx-structure

4.5

该技能用于创建和管理Fumadocs平台的MDX文档文件,包括前置元数据设置、组件导入、安装命令生成和代码示例编写,适用于前端开发中的8-bit组件文档化工作。关键词:MDX文档、前端开发、组件集成、Fumadocs、8-bit组件、文档结构。

⚡

动态导入懒加载技术Skill bundle-dynamic-imports

4.5

这个技能涉及使用 Next.js 框架的 `next/dynamic` 功能实现组件懒加载,以优化网页性能和用户体验。适用于在初始渲染时不需要的大型组件,如代码编辑器、图表、富文本编辑器等。通过动态导入,可以减少初始加载时间,提升应用响应速度。关键词:动态导入、懒加载、Next.js、前端优化、性能提升、组件加载、代码分割。