🎯

vani-keyed-lists

🎯Skill

from itsjavi/vani

|

What it does

Renders dynamic lists with unique keys, enabling efficient and predictable updates of list elements in the Vani UI runtime.

vani-keyed-lists

Installation

Install skill:

npx skills add https://github.com/itsjavi/vani --skill vani-keyed-lists

4

AddedJan 27, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Overview

# Vani

> Rendering should be explicit, local, and predictable.

Vani is a small, dependency-free UI runtime. It is runtime-first and DOM-anchored, with explicit

updates and opt-in fine-grained state.

Core principles

Explicit updates (no hidden re-rendering)
Subtree ownership via anchors
Runtime-first, no compiler
Opt-in signals for fine-grained updates
Ref-based and Ref-free DOM subtree access on mount.

Installation

```bash

pnpm add @vanijs/vani

# or

npm install @vanijs/vani

# or

yarn add @vanijs/vani

# or

bun add @vanijs/vani

# or

deno add @vanijs/vani

```

Documentation

The full project's documentation, including the core concepts, usage examples, and API reference, is

located in the [DOCS.md](https://github.com/itsjavi/vani/blob/main/DOCS.md) file.

You also have instructions there to add skills to your AI Agents to make them experts in Vani.

More from this repository10

vani-scheduling🎯Skill

vani-scheduling skill from itsjavi/vani

vani-async-client-only🎯Skill

Provides Claude with specialized knowledge about asynchronous client-side rendering and state management techniques specific to the Vani UI runtime.

vani-incremental-mount🎯Skill

vani-incremental-mount skill from itsjavi/vani

vani-forms-inputs🎯Skill

vani-forms-inputs skill from itsjavi/vani

vani-jsx-setup🎯Skill

Configures and sets up JSX support and transpilation for the Vani UI runtime, enabling developers to use JSX syntax with Vani components.

bench-test-suite🎯Skill

Benchmarks and tests the performance and rendering capabilities of the Vani UI runtime across different scenarios and configurations.

vani-ssr-hydration🎯Skill

Enables server-side rendered (SSR) web pages to become interactive by attaching client-side event handlers and state management to pre-rendered HTML elements.

vani-global-store🎯Skill

vani-global-store skill from itsjavi/vani

bench-implement🎯Skill

Generates benchmarking implementation templates and performance testing boilerplate for Vani UI runtime projects.

vani-spa-app🎯Skill

Provides a Claude Code skill for creating single-page applications (SPAs) using the Vani UI runtime with explicit rendering and state management.