Skill 资源库

AI Skill 资源库

把 Skill 的源码、资源快照、README、包体和安装信号放进一个可搜索、可筛选的公开目录。

personjakexiao无需 Key

Next.js + FastAPI Full-Stack Expert

专家指导使用Next.js前端和FastAPI后端构建全栈应用程序。在将React/Next.js与Python FastAPI集成、构建API路由或使用Python后端实现SSR/SSG时,请参考此指南。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-knowledge-skill

提供结构化的Next.js知识:App Router模式、RSC使用、渲染/数据策略以及现代Next.js最佳实践。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-module-builder

在Next.js 15 (App Router)中构建新模块的完整工作流程,后端使用Supabase。当创建CRUD功能、数据管理模块或遵循5层架构(类型→服务→钩子→组件→页面)的任何新功能模块时,请使用此流程。涵盖了TypeScript类型、Supabase服务、React钩子、Shadcn/UI组件以及基于权限的路由。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-monorepo

使用Turborepo和pnpm工作区的Next.js单体仓库模式。在处理多包Next.js项目、跨包管理依赖项、优化构建流水线或配置Turborepo时应用此技能。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-pr-workflow

使用pr-creation-workflow、jira-git-integration和linting-workflow框架完成Next.js的PR工作流程

download12deployed_codestar0
personjakexiao无需 Key

nextjs-project-scaffolding

有观点的Next.js 14+项目结构和配置,用于搭建新项目。主动激活用于:(1) 设置新的Next.js项目,(2) 配置带有严格模式的tsconfig.json,(3) 建立文件夹结构模式。触发词:“新项目”,“脚手架”,“项目结构”

download12deployed_codestar0
personjakexiao无需 Key

"nextjs-frontend-testing"

当用户想要为一个使用Vitest/Jest、React Testing Library和Playwright的Next.js(App Router)+ TypeScript + Tailwind + shadcn/ui项目设置、改进或运行前端测试(单元测试、组件测试和端到端测试)时,请使用此技能。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-fsd-starter

创建一个新的Next.js项目,采用FSD(Feature-Sliced Design)架构,TypeScript,Tailwind CSS,ESLint(扁平配置),Prettier和Husky。当用户要求创建/搭建/初始化一个具有FSD架构的Next.js项目时使用,或者当他们想要一个带有现代工具设置、适合生产的Next.js样板时。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-on-vercel

创建一个运行在Bun上的Next.js应用,配置开发环境,并设置在推送到代码仓库时自动部署到Vercel。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-gherkin-generator

Next.js/TypeScript项目用Gherkin场景自动生成技能。 用于以下情况:(1) 从用户故事创建BDD场景时 (2) 从PRD/规格书生成测试场景时 (3) 定义API端点的行为时 (4) 场景化页面跳转·UI交互时

download12deployed_codestar0
personjakexiao无需 Key

nextjs-frontend-design

当用户要求'构建Next.js应用'、'创建仪表板'、'设计登录页面'、'构建SaaS前端'、'创建React组件'、'为我的应用添加样式'、'设计系统'、'UI组件',或需要独特的前端设计时,应使用此技能。涵盖App Router、React Server Components、类型安全API、服务器操作以及现代样式设计。避免使用通用的'AI烂摊子'美学(如Inter字体、紫色渐变、可预测布局)…

download12deployed_codestar0
personjakexiao无需 Key

nextjs-pathname-id-fetch

在Next.js中使用URL参数获取数据的专注模式。涵盖创建动态路由([id],[slug])以及在服务器组件中访问路由参数以从API获取数据。当根据URL参数构建显示单个项目(如产品页面、博客文章、用户资料)的页面时使用。与nextjs-dynamic-routes-params互补,提供了一种简化且常见的模式。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-seo-optimization

在Next.js应用程序中实施SEO最佳实践。包括元数据、Open Graph标签、规范URL、站点地图生成、模式标记以及针对搜索排名的性能优化。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-localstorage-persistence

在Next.js 14应用路由器中实现支持SSR安全模式的localStorage持久化。当需要在localStorage中存储数据、处理水合错误、实现状态持久化或创建类型安全的存储工具时使用。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-integration

完整的Next.js集成模式,用于Clerk认证与App Router和Pages Router的结合。在Next.js中设置Clerk、配置认证中间件、实现受保护的路由、设置带有认证功能的服务端/客户端组件时使用;或者当用户提到Clerk Next.js设置、App Router认证、Pages Router认证或Next.js认证集成时使用。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-on-aws

本文档比较了Next.js应用程序的各种AWS部署选项,分析了成本、优势、局限性,并根据不同的使用场景提供了建议。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-page-creator

创建带有加载和错误状态的Next.js 16应用路由器页面。在被要求创建新的路由、页面或视图时使用。

download12deployed_codestar0
personjakexiao无需 Key

"nextjs-performance-optimizer"

每当用户希望在一个Next.js(App Router)+ TypeScript + Tailwind + shadcn/ui项目中分析、改进或实施性能最佳实践时,包括包大小、数据获取、缓存、流式传输、图片、字体以及客户端/服务器边界等方面,请使用此技能。

download12deployed_codestar0
personjakexiao无需 Key

"nextjs-routes-and-layouts"

当用户想要在TypeScript + Tailwind + shadcn/ui项目中设计、重构或扩展Next.js App Router的路由、布局和导航模式(包括路由组、动态路由以及服务端/客户端组件边界)时,使用此技能。

download12deployed_codestar0
personjakexiao无需 Key

nextjs-react-implementation

根据设计规范生成可用于生产的Next.js/React组件。当您拥有一份设计规范文档,并需要创建带有Tailwind CSS样式、Vitest测试和Storybook文档的React/TypeScript组件时,可以使用此技能。

download12deployed_codestar0