Adding A Feature
The four-area checklist every new feature must complete.
Install
npx skills add BuilderIO/agent-native --skill adding-a-feature -g -a claude-code -y- Repository
- BuilderIO/agent-native7.6k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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:
