前端开发 Skill技能列表

4.5

服务器操作Skill server-actions

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

4.5

Next.js中的身份验证模式Skill auth-patterns

这个技能用于在Next.js应用程序中实现身份验证和授权功能,涵盖多种策略和库,包括NextAuth.js、中间件保护、会话管理和JWT等。关键词:Next.js, 身份验证, NextAuth, Auth.js, 中间件, 会话管理。

4.5

应用路由器Skill app-router

此技能提供Next.js App Router的全面指导,帮助开发者创建和管理路由、布局、加载状态、错误边界等,优化前端应用结构。关键词:Next.js, App Router, 路由, 布局, 组件, 前端开发。

4.5

字体选择器Skill typography-selector

字体选择器技能用于帮助设计师和前端开发者浏览Google Fonts字体、生成字体配对和前端代码,优化设计项目的字体排版。关键词:字体选择、Google Fonts、前端设计、Tailwind配置、字体排版。

4.5

灵感分析器Skill inspiration-analyzer

这个技能通过分析指定网站的URL,自动提取设计元素如颜色、字体、布局和UI模式,生成结构化灵感报告,帮助设计师快速获取并应用设计灵感。关键词:网站设计分析、颜色提取、字体识别、布局模式、UI灵感提取、设计工具、前端开发辅助。

4.5

设计向导Skill design-wizard

这是一个交互式设计向导,用于指导用户完成完整的前端设计流程,包括发现需求、研究趋势、选择美学方向、配色、排版和生成代码,最终创建独特且生产就绪的UI。关键词:前端设计、交互式向导、UI设计、代码生成、设计流程、美学选择、颜色排版、自审查。

4.5

颜色策展人Skill color-curator

这个技能帮助用户浏览和选择颜色调色板,特别针对前端设计项目。它可以从Coolors网站获取趋势调色板,提取十六进制代码,映射到Tailwind配置,并提供策展的后备方案。适用于设计师和开发人员,方便快速选择和应用颜色方案。关键词:颜色调色板、前端设计、Coolors、Tailwind、CSS变量、颜色映射、调色板策展。

4.5

构件构建器Skill artifacts-builder

该技能用于构建交互式、自包含的HTML/JavaScript构件,包括数据可视化、计算器、迷你应用和工具,支持嵌入到网站或作为独立应用使用。适用于创建交互式演示、原型、教育内容及任务特定工具。关键词:HTML, JavaScript, 交互式构件, 数据可视化, 前端开发, Claude.ai, 迷你应用构建, Web开发工具, SEO优化, 交互设计。

4.5

Makepad小部件技能Skill makepad-widgets

这个技能专注于Makepad框架的UI组件开发,帮助用户编写代码、解答问题,并提供详细的文档和模式。关键词包括:Makepad, 小部件, UI组件, Rust, 前端开发, UI设计, 富文本渲染。

4.5

ArkUISkill ark-ui

Ark UI是一个用于快速开发Web用户界面的前端框架,提供丰富的UI组件和工具,支持响应式设计和跨平台兼容性。它帮助开发者简化界面构建过程,提升开发效率和应用性能。关键词:Ark UI, 前端开发, UI框架, 组件库, Web应用, 响应式设计, 开源框架

4.5

前端导入优化技巧Skill bundle-barrel-imports

这个技能用于通过避免使用桶文件导入来优化前端项目的捆绑大小和性能。它能减少不必要的模块加载,提高开发启动速度、构建效率和冷启动性能,适用于使用React等现代前端框架时的库导入优化。关键词:前端优化、捆绑大小、导入优化、性能提升、barrel files。

4.5

组件包装架构Skill component-wrapper-architecture

这个技能用于在React项目中包装现有的shadcn/ui组件,以添加8位复古风格,同时确保向后兼容性和代码重用。关键词包括:组件包装、8位风格、shadcn/ui、React、TypeScript、前端开发、复古UI。