SKILLS & AGENTS/Skill 与 Agent·COLLECTION

kokonutui

kokonut-labs/kokonutui

用Tailwind和Motion让网页组件动起来，一行命令安装，界面瞬间生动Add smooth animations to your Tailwind components with Motion.

用 Tailwind CSS 和 shadcn/ui 打造的开源组件库，能帮你快速搭出好看的网页界面。A free collection of animated UI components for React, Tailwind CSS, and shadcn/ui.

打开仓库Open repository 官网Homepage 上升中Rising

怎么装：Install: npx @next/codemod@latest <transform> <path>

02 / 现在的位置02 / Why now

它现在处在什么位置Where it stands right now

首次发现FIRST SEEN

03 OCT 202603 OCT 2026

增长GROWTH

+0.2%+0.2%

2.1k → 2.1k stars · 3 个快照2.1k → 2.1k stars · 3 snapshots

状态STATUS

持续活跃Active

已有 2137 个 star，说明社区认可度高。Launched in November 2024 and updated through August 2026.

03 / 它能帮你做什么03 / What it helps you do

它能帮你做成什么What it helps you do

01
用现成组件快速搭出漂亮页面
02
按Next.js官方推荐写法写代码
03
把项目升级到最新Next.js
04
设计高品质前端界面
05
复用可访问的UI组件

01
Add animated components with a single shadcn command line command
02
Use pre-built cards, modals, and motion effects in your React app
03
Follow guides for building accessible, composable UI components
04
Get design guidelines and code reviews for web interfaces
05
Update Next.js projects and follow best practices

04 / 安装04 / Install

怎么装How to install

NPX

$

README 里给出的安装方式。The installation method given in the README.

NPM

$

Node 用户的安装方式。The install route for Node users.

两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.

运行 npx shadcn@latest add @kokonutui/card-flip 来安装组件。Run `npx shadcn@latest add @kokonutui/card-flip` to add a component, after setting up the project with `npx shadcn@latest init`.

05 / 限制与风险05 / Limits and risk

限制与风险Limits and risk

风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.

限制LIMITS

需检查Needs review

01需要 API KeyREQUIRES API KEY: 未在文档中发现Not found in the docs
02需要本地环境NEEDS LOCAL RUNTIME: 是Yes
03需要 DockerNEEDS DOCKER: 未在文档中发现Not found in the docs
04难度DIFFICULTY: 需要本地环境Needs a local runtime

PROVENANCE · 这些结论的依据是什么Where these conclusions come from

来源 URLSource URL: https://github.com/kokonut-labs/kokonutui
原始数据哈希Raw data hash: 7aa5355bed561e663c16b67476374f74
解析时间Parsed at: 2026-10-05T22:13:43.181Z
最后一次验证Last verified: 2026-10-05T13:45:39.240Z
增长测量时间Growth measured: 2026-10-05T22:16:26.213Z
发现查询Discovery queries: focus:design:repo:tailwind-ui, focus:motion:repo:topic-framer-motion, focus:web:repo:shadcn, focus:web:repo:topic-tailwindcss
分类来源Category source: rules
焦点

完整解析证据 JSONFull parse evidence JSON

{
  "agents": [],
  "apiKey": null,
  "docker": null,
  "taxonomy": {
    "scores": {
      "design": 3,
      "ai-tools": 0,
      "dev-tools": 0,
      "indie-web": 0,
      "skill-agent": 0,
      "productivity": 0
    },
    "primary": "skill-agent",
    "secondary": "collection"
  },
  "localRuntime": "nimation (HIGH) - `animation-gpu-properties` - Animate only transform an",
  "skillMdTotal": 10,
  "skillMdErrors": [],
  "treeTruncated": false,
  "categoryScores": {
    "data": 0,
    "agent": 0,
    "media": 0,
    "design": 17,
    "browser": 0,
    "devtool": 0,
    "security": 0,
    "marketing": 0,
    "productivity": 0
  },
  "classification": [
    {
      "signal": "10 SKILL.md with name + description",
      "weight": 0.95
    }
  ],
  "scannedSources": [
    "readme",
    ".agents/skills/building-components/SKILL.md",
    ".agents/skills/frontend-design/SKILL.md",
    ".agents/skills/next-best-practices/SKILL.md",
    ".agents/skills/next-cache-components/SKILL.md",
    ".agents/skills/next-upgrade/SKILL.md",
    ".agents/skills/vercel-composition-patterns/SKILL.md",
    ".agents/skills/vercel-react-best-practices/SKILL.md",
    ".agents/skills/vercel-react-native-skills/SKILL.md",
    ".agents/skills/web-design-guidelines/SKILL.md",
    "public/.well-known/agent-skills/install-component/SKILL.md"
  ],
  "skillMdFetched": 10
}