Keyed Lists and Item Updates

Instructions for rendering lists where each row updates independently.

When to Use

Use this when a list needs item-level updates without re-rendering the whole list.

Steps

1. Represent items by id and store them in a Map or array with stable ids.
2. Create a row component that reads an item by id.
3. Use key on each row to preserve identity across reorders.
4. For item-level updates, choose one:

- Store a ComponentRef per id and call ref.current?.update() (or ref.current?.update({ onlyAttributes: true }) for class/attr changes). - Use signals with text() / attr() for fine-grained row updates.

1. Call the list handle only when list structure changes (add/remove/reorder).

Arguments

• itemTypeName - name for the list item type (defaults to Item)
• listName - component name for the list (defaults to List)
• useMapStore - whether to store items in a Map (defaults to true)

Examples

Example 1 usage pattern:

Implement a todo list with keyed rows and per-row updates on toggle.

Example 2 usage pattern:

Reorder items by id while preserving row identity with key.

Output

Example output:

Created: src/list.ts
Notes: Row updates call ref.current?.update() or use signals.

Present Results to User

Describe the list data structure, how refs/signals are stored, and when the list handle updates.

name: vani-keyed-lists description: Build scalable Vani lists with keyed rows and per-item updates. argument-hint: "[list feature]"

Vani Keyed Lists Command

When to use

Use this skill when building lists or collections that require efficient updates.

Instructions

Follow these steps:

1. Model list items by id (Map or array with stable ids).
2. Create a Row component and pass key, ref, and item accessors.
3. Update a single item via ref.current?.update() or signals with text() / attr().
4. Call the list handle only when structure changes (add/remove/reorder).

Output expectations

• Use ComponentRef or signals for per-row updates.
• Use update({ onlyAttributes: true }) for class/attr-only changes.
• Avoid re-rendering the entire list for single-item changes.
• If $ARGUMENTS is provided, map it to the list domain and update flows.