flutter-architecture

Define a scalable Flutter architecture template for Riverpod and Supabase apps.

1|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/code-sinobi/hoya-time-travel --skill flutter-architecture-code-sinobi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flutter-architecture
Source: https://github.com/code-sinobi/hoya-time-travel/tree/main/.agent/skills/flutter-architecture
Command: npx skills add https://github.com/code-sinobi/hoya-time-travel --skill flutter-architecture-code-sinobi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Defines a consistent Flutter project structure and architectural conventions for a Flutter app using Riverpod and Supabase. Use when creating new features or reorganizing code to ensure scalability and maintainability.

Core Features & Use Cases

  • Feature-first folder layout for lib/features and core layers (data, domain, presentation, etc.) to standardize code organization across teams.
  • Clear separation of responsibilities: presentation handles UI and state, domain contains business rules and models, and data manages data access with DTOs and mappers.
  • Use Case: Starting a new feature or refactoring an existing module becomes faster and less error-prone by applying the architecture template and guardrails.

Quick Start

Follow the documented project structure to scaffold a new Flutter feature.

Frequently Asked Questions about flutter-architecture

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

FAQPage Schema
How do I structure a Flutter project with Riverpod and Supabase?

Structure a Flutter project using a feature-first folder layout that separates responsibilities into presentation, domain, and data layers. This defines clear rules for provider placement and UI layering when using Riverpod and Supabase.

What is the best way to organize Flutter features for scalability?

Organize Flutter features by grouping them into lib/features and core layers like data, domain, and presentation. This feature-first standardizes code organization across teams, making new feature creation and large module refactoring faster.

How do I separate presentation, domain, and data layers in a Flutter app?

Separate Flutter layers by assigning UI and state to presentation, business rules and models to domain, and data access with DTOs and mappers to data. This separation of concerns ensures maintainability and clear architectural boundaries.

Does this Flutter architecture template work for onboarding new developers?

Yes, this Flutter architecture template works for onboarding developers by providing documented project structure guardrails. Applying these architectural conventions helps new team members scaffold features consistently without violating separation of concerns.

When should I apply this Riverpod architecture template?

Apply this Riverpod architecture template when starting new features, refactoring large modules, or onboarding developers to a Supabase-based Flutter app. It provides specific rules for provider placement and UI layering to ensure codebase scalability.

How do I place Riverpod providers in a feature-first Flutter architecture?

Place Riverpod providers according to the defined feature-first architecture template, which specifies provider placement rules within the presentation, domain, and data layers. This ensures state management integrates cleanly without breaking separation of concerns.