utaba

Build Your First App

Learn how to create a new application using UCM guidance, micro-block patterns, and proven utaba implementations. Build maintainable systems from day one.

Prerequisites

• UCM MCP Server installed and configured
• Basic understanding of your target technology stack
• Recent version of NodeJs installed

Development Process Overview

Follow the UCM methodology to build your first application. Each phase uses proven utaba guidance and micro-block patterns for maintainable, high-quality results.

Planning Phase

Gather requirements & create specifications

Design Phase

Create architecture & implementation plans

Planning Phase

Gather requirements and create specifications

Use the Complete Prompt Template

Use this exact prompt template to start your new app creation:

# Prompt Template - Create new app with Utaba Guidance ## Step 1 - Getting started with the UCM Read the UCM Quickstart ## Step 2 - What we are doing Creating a new application using the UCM guidance. The process will include steps to understand the requirements and architecture. ## Step 3 - Define the process Use the UCM Process: `utaba/main/guidance/processes/ai-peer-process-software.md` ## Step 4 - Pre-defined descisions Pattern - `utaba/main/patterns/micro-block/README.md` Implementation - `utaba/main/implementations/micro-block-nextjs/README.md` Technology Stack: 1. NodeJs 2. TwailwindCSS (see: utaba/main/guidance/development/tailwindcss-implementation.md) 3. NextJs ## Step 5 - Start the process Start with the first phase in the Process, and apply the 'Pre-defined descisions' during relevant steps.

This template ensures the AI agent follows the complete UCM process with all necessary guidance documents and predefined technology decisions.

AI Response:

The AI will start the Planning Phase and ask you to discuss high-level requirements, including what type of application you want to build, target users, and key features. It will set up the recommended directory structure and confirm the technology stack.

Answer the Planning Questions

The AI will ask for high-level requirements. Keep your answers brief and focused. Here's an example using a TODO List application:

**What type of application:** Personal TODO List manager **Target users:** Individual developers and professionals who need task organization **Key features:** • Create, edit, delete tasks • Mark tasks as complete • Organize tasks by categories/projects • Simple, clean interface • Data persistence That's it - let's move to product specifications.

Keep it concise. The AI will use this to generate detailed product specifications and select appropriate utaba patterns.

AI Creates Product Specification

The AI will automatically create a detailed product specification document and ask to proceed to the Design Phase:

AI Response:

"Perfect! I've completed the Planning Phase and created the product specification document atspecifications/product-specification.md."

The specification includes organized core features, MVP scope, technology-agnostic approach, and clear priorities.

"Ready to move to the Design Phase? This will involve: Define Architecture (using micro-block pattern), Reference Standards and Patterns, Define Technology Stack, Generate Implementation Plan."

Yes, proceed to the Design Phase.

You can update the specification or simply confirm to move forward. The AI has documented everything and is ready for the next phase.

💡 Tip: If you update the specification, be sure to let your AI know so it can adjust the design accordingly.

Design Phase

Create architecture and implementation plans

AI Completes Design Phase

The AI will create comprehensive architecture and implementation documentation:

AI Creates These Documents:

• docs/architecture.md - System architecture using micro-block pattern
• docs/standards.md - Development standards and coding practices
• plan/implementation-plan-mvp.md - Detailed 3-phase implementation plan

Key Decisions: Micro-Block Architecture, Next.js 14+, TailwindCSS 4+, TypeScript, Contract-First Development. Implementation organized into logical phases with specific tasks.

Ready to start Phase 1 implementation.

Confirm you're ready to begin implementation. The AI has everything planned and documented.

Sprint/Increment Phase

Begin development implementation

AI Reviews Architecture Understanding

The AI will review the documentation and confirm its understanding of key architectural principles. This is your opportunity to fine-tune the approach before implementation begins:

AI Review Summary:

• Micro-Block Pattern: Command-based architecture with contract-first development
• Critical Imports: Must import BaseCommand, ServiceRegistry, CommandRegistry from UCM
• ES Modules Only: Strict requirement for import/export syntax
• Contract-First: Define Input/Output/Error interfaces before implementation
• Registry Access: Always use ServiceRegistry.getInstance()
• TailwindCSS v4: Requires @import "tailwindcss" syntax

"I have reviewed the mandatory pre-implementation reading list. Should I proceed with implementation?"

Yes, proceed with implementation. Start with Phase 1.

This review step ensures the AI understands all UCM principles before building. You can request changes or clarifications before confirming.

Complete TODO List Example Workflow

// Step 1: Use the complete prompt template

// Step 2: Answer planning questions briefly

**What type of application:** Personal TODO List manager
**Target users:** Individual developers and professionals
**Key features:** Create/edit/delete tasks, mark complete, categorize
That's it - let's move to product specifications.

// Step 3: AI creates product specification

[AI creates specifications/product-specification.md automatically]
Yes, proceed to the Design Phase.

// Step 4: AI completes design phase

[AI creates architecture.md, standards.md, implementation-plan-mvp.md]
Ready to start Phase 1 implementation.

// Step 5: AI reviews architecture understanding

[AI confirms understanding of micro-block principles, UCM imports, etc.]
Yes, proceed with implementation. Start with Phase 1.

Why This Approach Works

🎯 Surgical Accuracy

UCM guidance eliminates AI hallucination. You get proven patterns, not experimental code.

🏗️ Architecture-First

Micro-block patterns ensure maintainable, testable code from day one.

⚡ Developer Velocity

Reuse battle-tested components instead of rebuilding from scratch.

🔄 Consistent Quality

Every project follows the same proven patterns and standards.