vani
一个轻量、无依赖、显式更新的前端UI运行时。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：vani。 它的用途是：一个轻量、无依赖、显式更新的前端UI运行时。 完整的 Skill 内容见：https://321skill.com/skills/vani/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要用Vani创建一个简单的计数器UI，并解释其显式更新的工作流程。’ 它会为你生成相应的Vani组件代码，展示如何通过显式调用更新函数来改变计数状态并刷新UI。或者，你可以说：‘帮我将这段React的useState逻辑转换为Vani的信号（signal）和显式更新模式。’ AI会指导你进行概念映射和代码重写。
介绍
Vani 解决的是前端开发中因隐式、不可预测的重新渲染导致的性能问题和调试困难。它提供了一个小型、无依赖的UI运行时，强调更新应显式、局部且可预测，帮助开发者更精细地控制UI状态与渲染。
使用 Vani 时，开发者通过其API创建和管理UI组件，更新操作需要明确触发，而非由框架在幕后自动进行。它采用基于锚点的子树所有权模型，并提供了基于引用的DOM子树访问方式，使得在组件挂载时能灵活操作DOM。
该库非常适合追求极致性能、希望完全掌控渲染流程，或需要在非传统前端环境（如CLI工具、浏览器扩展）中构建UI的前端及全栈开发者。对于不依赖大型框架编译步骤，偏爱运行时解决方案的团队尤其有吸引力。
建议在开始前详细阅读其文档，理解其‘显式更新’和‘锚点’等核心概念。由于它不提供类似React的虚拟DOM或自动依赖追踪，开发者需要手动管理状态与视图的同步，这带来了更高的控制力，但也增加了心智负担。
核心特点
与主流框架（如React、Vue）的自动重渲染机制不同，Vani强制要求所有UI更新都必须由开发者显式触发，提供了更底层的渲染控制。同时，它完全基于运行时，无需编译步骤，且通过‘锚点’概念实现了清晰的子树所有权和DOM访问模型。
注意事项
不适合需要开箱即用的全面状态管理、虚拟DOM或大量现成组件生态的大型复杂应用快速开发。
常见问题
Vani和React/Vue有什么区别？
Vani强调显式更新和运行时优先，没有虚拟DOM和自动重渲染，给予开发者更底层的控制权，但需要手动管理更多渲染细节。
Vani适合开发什么类型的项目？
适合对性能和控制力要求高、规模可控的项目，如浏览器扩展、CLI工具的UI界面、嵌入式Web视图或作为大型应用中的特定高性能模块。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vani/raw/index.md 读取 vani 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vani/raw/index.md（查看排版版本）