Skip to main content
Mobile Launcher
Your First Feature

Create Your First Feature

Learn how to build a complete feature using AI-assisted development with the boilerplate

Create Your First Feature

This tutorial walks you through the standard workflow for building a new feature. We'll use a simple "Daily Quote" feature as an example of implementing a missing item from your app_features_list.md.

Prerequisites: You must have completed the Environment Setup and Boilerplate Installation.

The Workflow and Example

We will follow the standard U-AMOS cycle: Initialize → Prompt → Verify → Integrate.

Step 1: Initialize Your Session

Before asking the AI to build anything, you must load the context. This ensures the AI knows about your project structure, existing components, and coding rules.

  1. Open your project in Cursor, Windsurf, or Claude Code.
  2. Open your chat and type the initialization command for your current task.

Example: "I want to implement the Daily Quote feature. Initialize context."

First Initialization Defining the task and initializing the session context

The AI will read your .memory/ files and confirm it understands the current state.

Step 2: Prompt for the Feature

Now that the AI has context, ask it to build the feature. Be specific about Integration (where it lives) and Persistence (state).

The Prompt:

"Create a Daily Quote feature for the app:

  1. Create src/features/dailyQuote/ matching our feature folder structure.
  2. It needs a DailyQuoteCard component to display on Home.
  3. Add a Redux slice to store the quote and 'favorite' status.
  4. Use redux-persist to save favorites offline.
  5. Use existing UI components from src/ui/."

For more advanced prompts and examples, check the Prompt Engineering Guide.

Step 3: Review & Generate

The AI will generate the files. Verify it follows the boilerplate patterns:

  • Structure: src/features/dailyQuote/ (components, hooks, store)
  • State: Uses @reduxjs/toolkit and react-redux
  • UI: Uses src/ui components (Box, Text, Card)
  • i18n: Uses t('dailyQuote.title'), no hardcoded text

Step 4: Integrate & Test

The feature exists, but the app doesn't know about it yet.

  1. Add to Store: Import quoteReducer in src/store/index.ts.
  2. Add to Screen: Import <DailyQuoteCard /> in src/screens/home/HomeScreen.tsx.
  3. Add Translations: Add keys to src/locales/en.json.

Run the app (yarn ios or yarn android) and verify:

  • Quote appears on Home Screen
  • Tapping "Heart" saves it
  • Restarting app keeps the favorite saved

Step 8 - Internationalization

Setup multi-language support with AI

MCP Servers

Supercharge your AI assistant with direct access to your tools

On this page

Create Your First FeatureThe Workflow and ExampleStep 1: Initialize Your SessionStep 2: Prompt for the FeatureStep 3: Review & GenerateStep 4: Integrate & Test