메뉴
FivFold UI Kits conventions for React/Next.js projects. Use when working with FivFold Kits (Email, Kanban, Chat, Auth, Media Uploader), import paths, theming, Tailwind CSS v4, shadcn/ui components, or kit customization.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | fivfold-kits |
| description | FivFold UI Kits conventions for React/Next.js projects. Use when working with FivFold Kits (Email, Kanban, Chat, Auth, Media Uploader), import paths, theming, Tailwind CSS v4, shadcn/ui components, or kit customization. |
| license | MIT |
| metadata | {"author":"Fivex Labs","version":"1.0.0"} |
Conventions for using FivFold UI Kits in React and Next.js projects.
| Purpose | Import Path |
|---|---|
| shadcn/ui components | @/components/ui/<component> (or config aliases.ui) |
| FivFold Kits | @/components/ui/kits/<name> (or config aliases.kits) |
| Utilities (cn) | @/lib/utils (or config aliases.utils) |
"use client" at the topcn() for conditional class merging@import "tailwindcss" in CSS; no tailwind.config.jsbg-background, text-foreground, bg-card, text-muted-foregroundnpx @fivfold/ui list # see all available Kits
npx @fivfold/ui add <name> # add a Kit
npx @fivfold/ui add <name> --theme zinc # add with specific theme
| Kit | Description |
|---|---|
| Full-featured email client with folders, threads, compose | |
| Kanban | Drag-and-drop board with columns, tasks, priorities |
| Chat | Threads, Socket.IO-ready kit: dropdown menus, inline composer (poll/emoji/GIF), search — wire optional ChatKit callbacks to your API |
| Auth | Login, Register, ForgotPassword (Firebase, Cognito, Auth0, JWT) |
| Media Uploader | MediaUploaderKit: presign + finalizeUpload, optional simulateTransport for demos; pair with @fivfold/api add media-uploader |
FivFold UI Kits conventions for React/Next.js projects. Use when working with FivFold Kits (Email, Kanban, Chat, Auth), import paths, theming, Tailwind CSS v4, shadcn/ui components, or kit customization.
FivFold API scaffolding conventions for Express/NestJS backends. Use when working with FivFold API modules (Email, Kanban, Push, Chat, Media Uploader), Hexagonal architecture, ORM patterns (TypeORM, Prisma, Mongoose), or backend scaffolding.
Update the docs search index when adding or modifying documentation pages. Use when adding a new docs page, creating new documentation, or when asked to "update search" or "add to search".
FivFold API scaffolding conventions for Express/NestJS backends. Use when working with FivFold API modules (Email, Kanban, Push, Chat), Hexagonal architecture, ORM patterns (TypeORM, Prisma, Mongoose), or backend scaffolding.