Agent skill

Implement Flet Extension

by flet-dev in flet-dev/flet

Implement a new Flet extension/control that wraps a third-party Flutter package end-to-end, including dependency selection, version pinning, compatibility checks, Python/Flutter integration, docs…

Apache-2.0Auto-check passedMobile

Install Implement Flet Extension

skills CLI
$ npx skills add flet-dev/flet --skill implement-flet-extension -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install flet-dev/flet implement-flet-extension --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/flet-dev/flet.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/implement-flet-extension .claude/skills/implement-flet-extension && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implement-flet-extension
GitHub stars
17k
Token cost
~2.1k tokens
SKILL.md length
893 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
Apache-2.0

At a glance

Implement a new Flet extension/control that wraps a third-party Flutter package end-to-end, including dependency selection, version pinning, compatibility checks, Python/Flutter integration, docs…

  • Works in 3 steps: Confirm package health: maintenance… → Confirm license is compatible with Flet… → Select a conservative version strategy
  • Adding any flet package backed by an external pub.dev package
  • SKILL.md covers Inputs, Third-party Dependency Gate, Control/Service Classification and API Mapping Rules, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Implement Flet Extension is an agent skill from flet-dev/flet. Implement a new Flet extension/control that wraps a third-party Flutter package end-to-end, including dependency selection, version pinning, compatibility checks, Python/Flutter integration, docs, examples, tests, and CI updates. Use when adding any flet package backed by an external pub.dev package.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps. It works with Flutter, Python and Dart. The repository describes itself as: Build realtime web, mobile and desktop apps in Python only. No frontend experience required. The licence is Apache-2.0.

When your agent uses it

  • Adding any flet package backed by an external pub.dev package
  • Tasks that involve Cross-platform mobile apps

Example prompts

  • “/implement-flet-extension”

Requirements

  • Python 3

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Confirm package health: maintenance activity, null-safety, platform support, and open issue risk.
  2. Confirm license is compatible with Flet distribution.
  3. Select a conservative version strategy

What it can do on your machine

Read from SKILL.md and the folder at commit 9748de3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implement Flet Extension loads about 2.1k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 893 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from flet-dev/flet at commit 9748de3, republished under its Apache-2.0 licence (© flet-dev). 893 words, ~2,085 tokens.

Download SKILL.mdSave it as .claude/skills/implement-flet-extension/SKILL.md (or your agent's skills folder).
name
implement-flet-extension
description
Implement a new Flet extension/control that wraps a third-party Flutter package end-to-end, including dependency selection, version pinning, compatibility checks, Python/Flutter integration, docs, examples, tests, and CI updates. Use when adding any flet_* package backed by an external pub.dev package.

Implement a Flet extension around an external Flutter package using existing flet_* packages as implementation templates.

Inputs

  • Control/service name and Python package name (flet_<extension>).
  • Target pub.dev package and intended version/range.
  • API surface to expose in Python (properties, methods, events, types/enums).

Third-party Dependency Gate

  1. Confirm package health: maintenance activity, null-safety, platform support, and open issue risk.
  2. Confirm license is compatible with Flet distribution.
  3. Select a conservative version strategy:
  • Pin exact version when behavior stability is critical.
  • Use bounded ranges when required by ecosystem constraints.
  1. Record key constraints and reasons in PR notes/commit message.

Control/Service Classification

  • Classify wrapped functionality before implementation:
  1. LayoutControl for visual controls that participate in page/layout positioning.
  2. Base Control for simple visual controls that do not require page positioning or define their own positioning rules/props (for example Draggable, Divider, MenuBar, NavigationRail).
  3. Non-visual Service when functionality is not a renderable UI control.
  • Inspect the wrapped Flutter package API to determine whether it includes non-visual/service functionality.
  • For service patterns, follow existing extension examples: sdk/python/packages/flet-audio, sdk/python/packages/flet-flashlight, sdk/python/packages/flet-secure-storage.

API Mapping Rules

  • Expose only stable and useful features first; avoid mirroring every upstream option.
  • Keep Python API idiomatic and concise; avoid redundant control-name prefixes.
  • Map upstream naming inconsistencies to Flet conventions when needed.
  • Add custom enums/types only when they improve correctness and discoverability.

Python-side Rules

  • Use LayoutControl, base Control, or Service base class according to classification.
  • Implement typed properties, methods, and events exactly for chosen public API.
  • Reuse existing serialization/event patterns from sibling controls/services.

Flutter-side Rules

  • Use parseEnum() for enums — it's exported from package:flet/flet.dart. Call it as parseEnum(MyEnum.values, widget.control.getString("attr"), MyEnum.defaultVal)!. Do NOT write a custom _parseXxx() switch helper.
  • For control attributes, prefer widget.control.getBool()/getDouble()/... accessors.
  • For non-control parsing, use shared parseSomething() helpers.
  • Do not add one-off private parser utilities when standard helpers exist.
  • Put control-specific helpers in utils/<control>.dart; shared helpers in utils/<topic>.dart.
  • Prefer parse-prefixed helper names when converting input to Flutter structures.
  • Avoid single-use local variables.
Default Value Matching (Critical)

Properties with default values on the Python side are not sent to Flutter when unchanged from the default. Every Dart property read must provide the same default as its Python counterpart:

  • control.getDouble("size", 100.0)! when Python has size: float = 100.0
  • control.getBool("animate", true)! when Python has animate: bool = True
  • parseDuration(value["dur"], const Duration(milliseconds: 500))! when Python has dur: DurationValue = field(default_factory=lambda: Duration(milliseconds=500))
  • control.get<List>("items")?.map(...).toList() ?? const [] when Python has items: list[str] = field(default_factory=list)

Without matching defaults, Dart receives null and either crashes or silently uses the wrong value. This applies to all property types: bools, numbers, strings, enums, durations, collections, and nested @ft.value types.

Integration Checklist

  • Register in the Flet client app — two files:
    1. client/pubspec.yaml: add flet_<ext>: path: ../sdk/python/packages/flet-<ext>/src/flutter/flet_<ext> under dependencies.
    2. client/lib/main.dart: add import 'package:flet_<ext>/flet_<ext>.dart' as flet_<ext>; and flet_<ext>.Extension() to the extensions list.
  • Add extension package to sdk/python/pyproject.toml in two places: the dependencies list and [tool.uv.sources] as { workspace = true }.
  • Add extension to sdk/python/packages/flet/pyproject.toml in the [dependency-groups] extensions list.
  • Add extension to sdk/python/examples/apps/flet_build_test/pyproject.toml in three places: [project] dependencies, [tool.uv.sources] as { path = "...", editable = true }, and [tool.flet.dev_packages] as a relative path string.
  • Add extension to tools/crocodocs/pyproject.toml under [tool.crocodocs.packages] as <pkg_name> = "../../sdk/python/packages/<pkg-dir>/src". This fixes "Missing API entry" errors in the docs. Note: api-data.json is gitignored (generated at build time); only the pyproject.toml change needs committing.
  • Add extension to .github/workflows/ci.yml in both places:
    • build_flet_extensions -> PACKAGES list.
    • py_publish -> for pkg in ... publish loop.
  • Add .gitignore to Flutter extension project if missing.
  • Remove [tool.uv.sources] local path overrides from example pyproject.toml files before opening a PR (they are development-only conveniences).
Show full SKILL.md (324 more words)Show less

Docs, Examples, Tests

  • Add control/service docs under website/docs/controls/<name> for controls and website/docs/services/<name> for services.
  • Always create one doc page per control, even for extensions with many similar controls. Use index.md for the overview (install instructions, examples, list of links) and individual <controlname>.md files for each control — consistent with flet-color-pickers and other extensions.
  • Use <ClassSummary name="pkg.ClassName" /> and <ClassMembers name="pkg.ClassName" /> JSX from @site/src/components/crocodocs to render API docs. Do NOT add image=, imageCaption=, or imageWidth= props to <ClassSummary> when no screenshots exist yet.
  • In the ## Examples section, do NOT add ### subtitles above <CodeExample> blocks — titles are injected automatically from the example file itself.
  • Add all custom enums/types docs and update website/sidebars.yml navigation.
  • Use markdown filenames without underscores (codeeditor.md, not code_editor.md).
  • Add examples under sdk/python/examples/extensions/<name>/ for extension controls.
  • Use import flet_<ext> as <short_alias> in examples (e.g., import flet_spinkit as spins). Keep alias short but readable.
  • Use ft.Colors.SURFACE_CONTAINER_HIGHEST for card/cell backgrounds in showcase examples — it adapts to light and dark system themes automatically.
  • Do NOT set an explicit dark theme in examples; let the app use system theme (no page.theme_mode).
  • Add integration tests under packages/flet/integration_tests/extensions/<name>/ — not inside the extension package's own directory (no tests/ folder in the package itself, matching the pattern of flet-code-editor, flet-color-pickers, etc.).
  • For controls with continuously-running animations, do NOT use assert_control_screenshot or pump_and_settle — they will timeout waiting for animations to settle. Instead use await flet_app.tester.pump(duration=ft.Duration(milliseconds=500)) which advances the clock by a fixed amount. This still runs real Flutter rendering and catches crashes, without screenshot comparison.
  • Ensure generated screenshots are suitable for docs usage when visual examples are added.

Upgrade and Compatibility Guardrails

  • Add at least one test that catches upstream behavioral changes likely to break wrapper mapping.
  • Avoid exposing experimental upstream APIs unless explicitly requested.
  • Keep wrapper surface narrow enough to maintain backwards compatibility across upstream updates.

Validation

  • Run relevant Python and integration tests for touched areas.
  • Verify Python import paths, client runtime registration, and docs navigation.
  • Verify dependency resolution and lockfile updates are intentional.

© flet-dev, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/implement-flet-extension of flet-dev/flet.

Open the folder on GitHubat commit 9748de3

Compare with similar skills

Implement Flet Extension next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implement Flet Extension compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implement Flet Extension this skillflet-dev/flet17k—~2.1kAutomated safety check: PassApache-2.0
Core API Changelibnativeapi/nativeapi157—~2.5kAutomated safety check: PassMIT
Re Flutterdslsdzc/rev-skills117—~3.5kAutomated safety check: PassApache-2.0
Flutter Pub ReleaseMixinNetwork/flutter-plugins512—~1.3kAutomated safety check: PassMIT
Liquid Glass Widgetssdegenaar/liquid_glass_widgets711—~3.8kAutomated safety check: PassMIT
Flutter Bloc and Cubitandrewyng/context-hub14k—~998Automated safety check: PassMIT

Similar skills

  • Core API Change

    libnativeapi/nativeapi

    Carry a change to the C++ public API in core/ all the way downstream — design check, header edit, six platform implementations, C ABI + Rust/Dart/C/JS/Python regeneration, per-binding verification…

    157 GitHub stars~2.5k tokensUpdated today
    MobileAuto-check passed
  • Re Flutter

    dslsdzc/rev-skills

    Flutter/Dart AOT 逆向:libapp.so 快照分区解析、符号还原、Dart VM 动态分析。触发词:Flutter、Dart、libapp.so、AOT snapshot、kernelblob、flutterassets、Dart VM

    117 GitHub stars~3.5k tokensUpdated 2 days ago
    MobileAuto-check passed
  • Flutter Pub Release

    MixinNetwork/flutter-plugins

    Prepare and draft a pub.dev release for a package in the flutter-plugins monorepo.

    512 GitHub stars~1.3k tokensUpdated 1 mo ago
    MobileAuto-check passed
  • Liquid Glass Widgets

    sdegenaar/liquid_glass_widgets

    Mastery guide and architectural rules for liquidglasswidgets.

    711 GitHub stars~3.8k tokensUpdated yesterday
    MobileAuto-check passed
  • Flutter Bloc and Cubit

    andrewyng/context-hub

    Helps choose between Bloc and Cubit in Flutter and sets defaults for packages, lifecycle, widget binding and tests.

    14k GitHub stars~998 tokensUpdated 4 mo ago
    MobileAuto-check passed
  • Solid

    nank1ro/solid

    PRIORITY — read this skill FIRST before writing Dart code when pubspec.yaml declares solidannotations or solidgenerator.

    165 GitHub stars~3.1k tokensUpdated 1 mo ago
    MobileAuto-check passed

More from flet-dev/flet

All 14 skills in this repo
  • A skill your agent uses when asked to create or update integration tests for any Flet control in sdk/python/packages/flet/integrationtests, including visual goldens and interactive behavior tests.

    17k GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • A skill your agent uses when asked to create Flet example projects from flat .py files with main.py and pyproject.toml metadata for Gallery/MCP indexing.

    17k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • A skill your agent uses when asked to build, preview, or verify the Flet documentation website, including checking for broken links, broken images, and unresolved reST cross-references.

    17k GitHub stars~557 tokensUpdated today
    Auto-check passed
  • Docs Conventions

    flet-dev/flet

    A skill your agent uses when writing or reviewing Flet documentation, including Python docstrings (Google style, reST roles, admonitions), Markdown docs (cross-references, images, code examples)…

    17k GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Flet Deprecation

    flet-dev/flet

    A skill your agent uses when adding or changing deprecations for Python controls/APIs in sdk/python/packages/, including V.deprecated fields, deprecated decorators, version lifecycle, and docs…

    17k GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Create or update a Flet release announcement blog post from changelog notes, matching existing /blog style.

    17k GitHub stars~950 tokensUpdated today
    Auto-check passed

Categories

Questions about Implement Flet Extension

What does Implement Flet Extension do?

Implement a new Flet extension/control that wraps a third-party Flutter package end-to-end, including dependency selection, version pinning, compatibility checks, Python/Flutter integration, docs…. Implement Flet Extension is an agent skill from flet-dev/flet. Implement a new Flet extension/control that wraps a third-party Flutter package end-to-end, including dependency selection, version pinning, compatibility checks, Python/Flutter integration, docs, examples, tests, and CI updates.

When should I use Implement Flet Extension?

Implement Flet Extension fits situations like: adding any flet package backed by an external pub.dev package; tasks that involve Cross-platform mobile apps.

How do I install Implement Flet Extension in Claude Code?

Run `npx skills add flet-dev/flet --skill implement-flet-extension -a claude-code`. Or copy the skill folder (.agents/skills/implement-flet-extension in flet-dev/flet) into .claude/skills/implement-flet-extension in your project. Claude Code loads it when a task matches its description.

How do I install Implement Flet Extension in Codex?

Run `npx skills add flet-dev/flet --skill implement-flet-extension -a codex`. Or copy the skill folder (.agents/skills/implement-flet-extension in flet-dev/flet) into .agents/skills/implement-flet-extension in your project. Codex loads it when a task matches its description.

Can I use Implement Flet Extension in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add flet-dev/flet --skill implement-flet-extension -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implement-flet-extension, .gemini/skills/implement-flet-extension, .github/skills/implement-flet-extension and .opencode/skills/implement-flet-extension in your project.

What does Implement Flet Extension need to run?

SKILL.md names no scripts, command-line tools or credentials: Implement Flet Extension is instructions for the agent only. Our summary lists: Python 3.

Does Implement Flet Extension access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Implement Flet Extension safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Implement Flet Extension use?

Implement Flet Extension is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implement Flet Extension use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Implement Flet Extension?

Skills that share tags, products or a category with Implement Flet Extension: Core API Change (libnativeapi/nativeapi, 157 stars), Re Flutter (dslsdzc/rev-skills, 117 stars), Flutter Pub Release (MixinNetwork/flutter-plugins, 512 stars) and Liquid Glass Widgets (sdegenaar/liquid_glass_widgets, 711 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implement Flet Extension?

flet-dev (a GitHub organization) maintains it in flet-dev/flet, which has 17,265 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.

Source: flet-dev/flet on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.