adding-a-feature

Verify agent and UI parity across UI, actions, skills, and app-state.

3|Updated Jun 10, 2026

Search Tags:#documentation #governance #agents.md #skill.md #feature-development #parity #agent-ui

Ready to run

npx skills add https://github.com/BuilderIO/builder-agent-native-starter --skill adding-a-feature

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: adding-a-feature
Source: https://github.com/BuilderIO/builder-agent-native-starter/tree/main/.agents/skills/adding-a-feature
Command: npx skills add https://github.com/BuilderIO/builder-agent-native-starter --skill adding-a-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The four-area checklist ensures that every new feature updates the UI, agent, and their shared state to maintain parity between what the UI can do and what the agent can perform.

Core Features & Use Cases

UI Component: Build a UI that reflects agent-driven state changes and use useActionQuery / useActionMutation to render in real time.
Action: Introduce and align actions (defineAction) that cover reads and writes, avoiding raw API routes and ensuring parity.
Skills / Instructions: Document behavior in AGENTS.md or add a dedicated skill in .agents/skills with visibility settings.
App-state sync: Update navigation state and view-screen data to reflect the new feature.

Quick Start

Review the four-area checklist and update UI components, actions, skills, and app-state to add a new feature.

Frequently Asked Questions about adding-a-feature

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I ensure UI and agent parity when developing a new feature?▼

To ensure UI and agent parity, apply a four-area checklist that synchronizes UI components, agent actions, skill documentation, and app-state navigation. This workflow guarantees end-to-end parity between UI capabilities and agent actions during feature development.

What is the four-area checklist for feature development parity?▼

The four-area checklist is a governance workflow for feature development that requires updating UI components, defining actions, documenting skills in AGENTS.md, and syncing app-state navigation to maintain complete UI and agent parity.

How do I document agent behavior and instructions for a new feature?▼

Document agent behavior by adding explicit guidance in SKILL.md frontmatter and recording instructions in AGENTS.md. Alternatively, add a dedicated skill file in the .agents/skills directory with appropriate visibility settings.

Can I use raw API routes for agent actions instead of defineAction?▼

No, you should avoid raw API routes. To maintain UI-agent parity, introduce and align actions using defineAction to cover both reads and writes, ensuring the UI and agent share the same action-driven state changes.

How do I render real-time agent-driven state changes in the UI component?▼

Render real-time agent-driven state changes in the UI component by using useActionQuery and useActionMutation hooks. This ensures the UI accurately reflects state updates triggered by the agent during feature operation.

What do I need to update in app-state navigation when adding a new feature?▼

When adding a new feature, update the app-state navigation state and view-screen data to reflect the new functionality. This ensures the agent and UI share synchronized navigation context and maintain end-to-end parity.