AI 摘要：Animata 是一套免费且开源（open-source）的 React 动画组件集合，旨在通过简单的“复制粘贴”为 Web 项目添加高质量的交互（interactions）与视觉特效。它并非像 MUI 那样的全功能 UI 框架，而是专注于背景、按钮、文本及功能性小组件（widgets）的动画增强。该库深度集成 Tailwind CSS，允许开发者在保留核心动画逻辑的同时，灵活自定义颜色和字体等样式细节。

1. 项目定位与核心理念
• 非全量 UI 框架：Animata 定位为现有项目的动画增强工具，而非替代传统的 UI 库（如 Chakra-UI）。
• 技术栈支持：核心基于 React 和 Tailwind CSS，重点处理复杂的布局与交互逻辑，将设计细节（如颜色、字体）留给开发者。
• 易用性：主打开源（open-source）与免费，通过代码片段复制即可快速部署。

2. 庞大的组件生态系统
• 背景与布局：提供动画光束（Animated Beam）、交互式网格（Interactive Grid）以及 Bento 网格（Bento grid）等多种视觉背景。
• 交互元素：包含 AI 风格按钮、卡片展开（card spread）、3D 旋转效果及各种鼠标跟随（cursor tracker）交互。
• 文本与内容：内置故障文本（glitch text）、打字机效果（typing text）和滚动揭示（scroll reveal）等 20 余种文字特效。
• 功能小组件（Widgets）：包含 30 多种模拟真实应用的功能模块，如电池电量显示、日历插件、音乐播放器堆栈等。

3. 开发指南与贡献规范
• 快速入门：提供详细的安装（setup）教程及本地运行（running locally）环境配置。
• 贡献流程：明确了组件添加规范、文件夹结构以及编写代码的最佳实践（best practices）。
• 变更日志：持续更新组件库，记录新增功能与性能优化。

animata

Hand-crafted animated components that you can copy and paste into your apps. Free & Open Source.

我们原本以为技能测试能够解决编码代理学习框架特定知识的问题。但在构建了专注于 Next.js 16 API 的评估系统后，我们发现了一些意想不到的情况。

直接嵌入 AGENTS.md 中的 8KB 压缩文档索引实现了 100% 的通过率，而即使有明确的指令告知代理使用技能，技能的最高通过率也仅为 79%。如果没有这些指令，技能的表现甚至不如完全没有文档。

AI 编码代理依赖于会过时的训练数据。Next.js 16 引入了诸如 'use cache' 、 connection() 和 forbidden() 等 API，而这些 API 并不包含在当前的模型训练数据中。当代理不了解这些 API 时，它们会生成错误的代码或回退到旧的模式。
反过来也可能出现这种情况，即您运行的是较旧的 Next.js 版本，而模型却建议使用项目中尚不存在的较新 API。我们希望通过让代理访问版本匹配的文档来解决这个问题。

Vercel

AGENTS.md outperforms skills in our agent evals

A compressed 8KB docs index in AGENTS.md achieved 100% on Next.js 16 API evals. Skills maxed at 79%. Here's what we learned and how to set it up.

Zola Chat 和 prompt-kit 作者 @Ibelick 沉淀了他使用 Tailwind + shadcn-ui 生态（Base UI）+ framer-motion 进行 AI 编程时的 Skill , 用来约束 AI 过度设计和给出明确的设计方向。

或许每个项目都应该又一个类似的 UI Skill 来约束项目的设计风格，我准备给项目也加一下