More screenshots

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Flet Mastery for Claude Code

    2

    Complete Flet 0.84.0 development skill for Claude Code. Scaffold projects, build custom extensions, migrate legacy code, and package wheels effortlessly.

    $9

    /mo

    Subscription · cancel anytime

    Secure checkout via Stripe

    • Always the latest version
    • Delivered live to your agent via MCP
    • Cancel anytime, access ends at period end
    0 installsSecurity scanned
    Flet Mastery for Claude Code

    Flet Mastery for Claude Code

    Example session with this skill installed

    Create a modern responsive login page using Flet 0.84.0. Include a logo, two text fields with icons, and a primary action button. Use the new Alignment and Colors namespaces.

    • Read your context and instructions
    • Compiled the flet mastery
    • Generated the app files

    I have generated a responsive login page using the Flet 0.84.0 API. This implementation utilizes the updated ft.Colors and ft.alignment.Alignment namespaces to ensure compatibility with the latest framework version.

    Flet Login Implementation

    import flet as ft

def main(page: ft.Page):
    page.title = "Secure Login"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.theme_mode = ft.ThemeMode.LIGHT
    page.bgcolor = ft.Colors.GREY_50

    # UI Components
    logo = ft.Icon(
        name=ft.Icons.LOCK_PERSON_ROUNDED,
        color=ft.Colors.BLUE_ACCENT_700,
        size=80
    )

    username_field = ft.TextField(
        label="Username",
        prefix_icon=ft.Icons.PERSON_OUTLINE,
        border_radius=10,
        width=300
    )

    password_field = ft.TextField(
        label="Password",
        prefix_icon=ft.Icons.KEY_OUTLINED,
        password=True,
        can_reveal_password=True,
        border_radius=10,
        width=300
    )

    login_button = ft.ElevatedButton(
        text="Sign In",
        width=300,
        height=50,
        style=ft.ButtonStyle(
            color=ft.Colors.WHITE,
            bgcolor=ft.Colors.BLUE_ACCENT_700,
            shape=ft.RoundedRectangleBorder(radius=10),
        ),
        on_click=lambda _: print("Login Attempted")
    )

    # Layout Container
    card = ft.Container(
        content=ft.Column(
            controls=[
                logo,
                ft.Text("Welcome Back", size=24, weight=ft.FontWeight.BOLD),
                ft.Text("Please sign in to continue", color=ft.Colors.GREY_600),
                ft.VerticalDivider(height=10, color=ft.Colors.TRANSPARENT),
                username_field,
                password_field,
                login_button,
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        ),
        padding=40,
        bgcolor=ft.Colors.WHITE,
        border_radius=20,
        shadow=ft.BoxShadow(blur_radius=15, color=ft.Colors.BLACK12),
        alignment=ft.alignment.Alignment(0, 0)
    )

    page.add(card)

if __name__ == "__main__":
    ft.app(target=main)

    Next steps

    • Add validation logic to the on_click handler of the login button.
    • Implement page.on_resized to adjust the card width for mobile viewports.
    • Connect the fields to a backend auth provider using the requests library.

    flet-mastery-for-claude-code-app.zip

    ZIP · project files

    Generated

    Example file from a real run - the skill writes it into your workspace.

    $9/mo

    Subscription · always the latest version

    • Secure checkout via Stripe
    • Cancel anytime
    • Delivered live via MCP (optional)

    What you get

    Migrate legacy Flet code to the 0.84.0 namespace to fix breaking changes.Build custom Flet controls by bridging existing Flutter widgets.Scaffold responsive desktop and mobile apps using a single Python codebase.Package custom UI components into shareable Python wheels.Automatically migrate legacy Flet code (<0.26) to the modern 0.84.0 namespace.Build custom Flet controls by bridging Flutter widgets (Dart + Python).

    About this skill

    name: Flet Mastery for Claude Code description: "Complete Flet 0.84.0 development skill – project scaffolding, custom extension creation, legacy code migration, and wheel packaging." author: abdo_hak47 version: 1.0.0

    Flet Mastery for Claude Code

    You are an expert in Flet 0.84.0 – a Python framework to build real-time web, mobile, and desktop apps using Flutter. You follow best practices, know the official and community extensions, and can generate, refactor, or explain any Flet code.

    🎯 When to Use This Skill

    Use this skill when you need to:

    • Build a Flet app (web, mobile, or desktop).
    • Create a custom control / extension (bridging a Flutter widget).
    • Migrate old Flet code (<0.26) to the modern 0.84+ API.
    • Package and distribute a Flet extension.
    • Get expert advice on official or community Flet extensions.

    ✨ Key Features

    • Expert Knowledge: Deep understanding of Flet 0.84.0 API, including the new ft.Icons, ft.Colors, and ft.BoxFit namespaces.
    • Automation Scripts: Includes ready-to-use Python scripts for scaffolding, migration, and building.
    • Dart & Python Integration: Step-by-step guidance on bridging Flutter widgets with Python controls.

    📦 Included Automation Scripts

    This skill comes with powerful scripts located in the scripts/ directory:

    | Script | Command | Purpose | |--------|---------|---------| | New Project | python scripts/flet_init.py my_project | Creates a modern Flet 0.84.0 project with a virtual environment and sample main.py. | | Extension Scaffold | python scripts/extension_scaffold.py fancy_button | Generates Python and Dart stubs for a custom Flet control. | | Legacy Code Upgrade | python scripts/code_updater.py old_app/ --dry-run | Automatically rewrites old Flet code (ft.icons, ft.colors) to the 0.84+ API. | | Build Extension Wheel | python scripts/extension_builder.py my_extension/ | Builds a distributable Python wheel (.whl) from your extension. |

    🚀 How to Use

    Simply ask Claude Code to perform a task. For example:

    • "Create a new Flet project called chat_app"
    • "Build a custom video player extension for Flet"
    • "Migrate my old Flet 0.22 app to 0.84"
    • "How do I use the flet-map extension?"

    Claude will automatically use the scripts and best practices defined in this skill.

    📚 Core Knowledge (Flet 0.84.0)

    API Changes from 0.26 onward

    Always use the new namespaces:

    import flet as ft

# Icons
ft.Icons.HOME          # instead of ft.icons.HOME

# Colors
ft.Colors.BLUE         # instead of ft.colors.BLUE

# Alignment
ft.alignment.Alignment.CENTER  # instead of ft.alignment.center

# Animation
ft.Animation           # instead of ft.animation.Animation

# ImageFit -> BoxFit
ft.BoxFit.COVER        # instead of ft.ImageFit.COVER

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean today

    Listedtoday

    What's inside

    Frequently Asked Questions