# Adding A Feature

The four-area checklist every new feature must complete.

- Repository: https://github.com/BuilderIO/agent-native (7579 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add BuilderIO/agent-native --skill adding-a-feature -g -a claude-code -y`
Codex: `npx skills add BuilderIO/agent-native --skill adding-a-feature -g -a codex -y`
Cursor: `npx skills add BuilderIO/agent-native --skill adding-a-feature -g -a cursor -y`
Gemini CLI: `npx skills add BuilderIO/agent-native --skill adding-a-feature -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add BuilderIO/agent-native`

## Description

The four-area checklist every new feature must complete. Use when adding any feature, integration, or capability to ensure the agent and UI stay in parity.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Adding a Feature, The Four-Area Checklist

## Rule

Every new feature MUST update all four areas. Skipping any one breaks the agent-native contract, the agent and UI must always be equal partners.

Scope check first: this is the checklist for a feature that adds app data or a new capability. A restyle, a copy change, or a screen with no new data model and no new agent-visible operation only needs the areas it actually touches, do not manufacture actions, state keys, or a skill for it.

## Why

Agent-Native apps are defined by parity: everything the UI can do, the agent can do, and vice versa. A feature that only has UI is invisible to the agent. A feature that only has scripts is invisible to the user. A feature without app-state sync means the agent is blind to what the user is doing.

## The Checklist

When you add a new feature, work through these four areas in order:

### 1. UI Component

Build the user-facing interface, a page, component, dialog, or route. Use `useActionQuery` and `useActionMutation` from `@agent-native/core/client/hooks` to call actions for data fetching and mutations. Do not create a custom REST endpoint just so React can call action-backed data; the action endpoint already exists.

**Agent edits must refresh the UI without a background poll.** Local chat-run
tool completions invalidate action queries and source counters after each
side-effecting tool and again at run end. There are two query paths:

The rest: https://github.com/BuilderIO/agent-native/blob/HEAD/.agents/skills/adding-a-feature/SKILL.md