claude-flet-plugin: Skill for Claude Code

Flet App Workflow

You are guiding the user through building a Flet declarative app step by step. Follow these 5 phases in order.

Before starting, confirm the app's purpose and target platforms with the user.

---

Phase 1: Requirements

Ask the user about:

1. App purpose — What does the app do?
2. Target platforms — Web, mobile (Android/iOS), desktop (macOS/Windows/Linux)?
3. Pages needed — List the main screens/pages
4. External services — Any Flet extensions or APIs needed?
5. State shape — What data needs to be shared across pages?

Summarize the requirements before proceeding.

---

Phase 2: Project Setup

For non-trivial apps, use the Clean Architecture layout (mirrors Flutter's lib/ convention, validated in production Flet apps). For 1–2-page prototypes, use the flat fallback below.

Clean Architecture (recommended)

my_app/
├── assets/                    # fonts/, icons/, images/
├── config.py                  # Project-root config
├── pyproject.toml             # [tool.flet.app] path = "src"
├── tests/                     # conftest.py, unit/, widget/, integration/
└── src/
    ├── main.py                # ft.run(create_app, assets_dir="assets")
    ├── app.py                 # create_app(page): theme, DI, page.render_views(...)
    ├── core/                  # constants.py, enums.py, exceptions.py, logger.py
    ├── data/                  # sources/, models/, repositories/
    ├── domain/                # entities/, repositories/, services/, usecases/
    ├── presentation/          # components/, pages/, navigation/, themes/, hooks/, state_management/
    ├── services/              # api_service.py, storage_service.py, ...
    └── utils/                 # validators.py, text_utils.py, ...

Flat (prototype / very small app)

my_app/
├── pyproject.toml          # [tool.flet.app] path = "src"
└── src/
    ├── main.py
    ├── config.py
    ├── state.py
    ├── context.py
    ├── components/
    │   └── __init__.py
    └── pages/
        └── __init__.py