New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Imperative To Declarative Flet

by flet-dev in flet-dev/flet

Convert an imperative Flet Python app in which controls are mutated and then page.update is called to declarative style using flet.component, flet.observable and state hooks.

Apache-2.0Auto-check passed

Install Imperative To Declarative Flet

skills CLI
$ npx skills add flet-dev/flet --skill imperative-to-declarative-flet -a claude-code

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

GitHub CLI
$ gh skill install flet-dev/flet imperative-to-declarative-flet --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/imperative-to-declarative-flet .claude/skills/imperative-to-declarative-flet && 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
imperative-to-declarative-flet
GitHub stars
17k
Token cost
~829 tokens
SKILL.md length
366 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
Apache-2.0

At a glance

Convert an imperative Flet Python app in which controls are mutated and then page.update is called to declarative style using flet.component, flet.observable and state hooks.

  • Works in 6 steps: Create a new declarative copy → Switch to components mode entrypoint → Centralize routing in App → …
  • SKILL.md covers Outcomes, Choose a state strategy, Workflow and Common pitfalls (and fixes)
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Imperative To Declarative Flet is an agent skill from flet-dev/flet. Convert an imperative Flet Python app in which controls are mutated and then page.update is called to declarative style using flet.component, flet.observable and state hooks.

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

It works with Python. 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.

Example prompts

  • “/imperative-to-declarative-flet”

Requirements

  • Python 3

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Create a new declarative copy
  2. Switch to components mode entrypoint
  3. Centralize routing in App
  4. Componentize UI
  5. Dialogs: reduce page.update() usage
  6. Assets/fonts checklist

What it can do on your machine

Read from SKILL.md and the folder at commit 9352719. 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

Imperative To Declarative Flet loads about 829 tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 366 words of instructions outside code blocks.

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

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 9352719, republished under its Apache-2.0 licence (© flet-dev). 366 words, ~829 tokens.

Download SKILL.mdSave it as .claude/skills/imperative-to-declarative-flet/SKILL.md (or your agent's skills folder).
name
imperative-to-declarative-flet
description
Convert an imperative Flet Python app in which controls are mutated and then page.update is called to declarative style using flet.component, flet.observable and state hooks.
metadata.short-description
Port Flet app to declarative

Imperative → Declarative (Flet Python)

Port an existing imperative Flet app to “components mode” with @ft.component, hooks, and (optionally) @ft.observable models.

Outcomes

  • Original folder unchanged; new sibling folder created.
  • Entry point uses page.render(App) (components mode).
  • UI is derived from state; minimal/zero manual page.update() for normal UI updates.

Choose a state strategy

  • Use @ft.observable for nested app data you mutate in place (boards/lists/cards, drag+drop reorder).
  • Use ft.use_state for local ephemeral UI state (hover flags, input text, dialog selection).
  • Avoid storing live Control/component objects in state; store ids/enums and create controls during render.

Workflow

1) Create a new declarative copy
  • Copy the existing app folder to a new one (e.g. trolli → trolli-declarative-*).
  • Keep assets/ with the new folder.
2) Switch to components mode entrypoint
  • Create a root component @ft.component def App(): ....
  • Run with:
    • ft.run(lambda page: page.render(App), assets_dir=...)
  • Set page globals either:
    • in a main(page) function before page.render(App), or
    • in ft.on_mounted(...) (works, but ordering can be less obvious).
3) Centralize routing in App
  • Keep app.route: str as source of truth.
  • In one place, define:
    • route_change(e) to normalize/redirect/validate routes and set app.route
    • a render-time match app.route (or a derived active_screen) to pick content
  • Prefer: route_change mutates route state; App() render chooses UI based on that state.
4) Componentize UI
  • Move UI chunks into src/components/*.py.
  • Each component:
    • takes only the model(s) it needs
    • uses hooks for local UI state
    • mutates observable models for app data changes
Show full SKILL.md (136 more words)Show less
5) Dialogs: reduce page.update() usage

If a dialog mutates existing controls and calls page.update(), convert it to:

  • @ft.component dialog content with ft.use_state for error, selected_color, etc.
  • event handlers call setters (no explicit updates)
  • show it via page.show_dialog(ft.AlertDialog(content=DialogContent(...)))
6) Assets/fonts checklist
  • Prefer an absolute assets_dir derived from __file__.
  • If running via flet run, be aware it can set FLET_ASSETS_DIR and override assets_dir=.
  • Font registration uses the dict key as the font family name:
    • page.fonts = {"Pacifico": "Pacifico-Regular.ttf"}
    • use font_family="Pacifico".

Common pitfalls (and fixes)

  • Event handler typing is invariant (Event[Sub] ≠ Event[Base]):
    • If on_click is declared on Button, annotate e as ft.Event[ft.Button] (or use def handler(): ...).
  • TemplateRoute params are dynamic:
    • raw = getattr(troute, "id", None) then isinstance(raw, str) before int(raw).
  • controls=[*[...], ...] can confuse type checkers with components:
    • build lists in two steps and annotate/cast, or return raw controls from non-component factories.

© 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/imperative-to-declarative-flet of flet-dev/flet.

Open the folder on GitHubat commit 9352719

Compare with similar skills

Imperative To Declarative Flet 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.

Imperative To Declarative Flet compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Imperative To Declarative Flet this skillflet-dev/flet17k—~829Automated safety check: PassApache-2.0
MCP Server Builderanthropics/skills180k64 repos~2.3kAutomated safety check: PassApache-2.0
PDF Processinganthropics/skills180k48 repos~2kAutomated safety check: PassProprietary
NotebookLM Research AssistantPleasePrompto/notebooklm-skill7.8k14 repos~2.4kAutomated safety check: NotesMIT
Manim Video Productionbrowser-use/video-use28k6 repos~3kAutomated safety check: PassMIT
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT

Similar skills

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 64 repos~2.3k tokens
    Agent WorkflowsAuto-check passed

  • PDF Processing

    anthropics/skills

    Official

    Handles everyday PDF jobs in Python and on the command line: extract text and tables, merge, split, rotate, watermark, fill forms, encrypt and OCR.

    180k GitHub starsUsed in 48 repos~2k tokens
    Documents & OfficeAuto-check passed

  • NotebookLM Research Assistant

    PleasePrompto/notebooklm-skill

    Lets Claude Code ask questions of your Google NotebookLM notebooks through browser automation and return answers grounded in your uploaded sources.

    7.8k GitHub starsUsed in 14 repos~2.4k tokens
    Knowledge ManagementAuto-check: notes

  • Manim Video Production

    browser-use/video-use

    Produces math and technical explainer videos with Manim Community Edition: concept animations, equation derivations, algorithm walkthroughs and data stories.

    28k GitHub starsUsed in 6 repos~3k tokens
    Media & CreativeAuto-check passed

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed

  • PPT Master

    hugohe3/ppt-master

    Generates editable PowerPoint decks, rebuilds slides from images, fills .pptx templates and polishes existing presentations through routed workflows.

    58k GitHub starsUsed in 1 repo~2.5k tokens
    Documents & OfficeAuto-check passed

More from flet-dev/flet

All 14 skills in this repo

  • Create Flet Control Integration Tests

    flet-dev/flet

    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

  • Create Flet Example Projects

    flet-dev/flet

    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

  • Docs Build And Verify

    flet-dev/flet

    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

  • Flet Release Announcement

    flet-dev/flet

    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

Works with

Questions about Imperative To Declarative Flet

What does Imperative To Declarative Flet do?

Convert an imperative Flet Python app in which controls are mutated and then page.update is called to declarative style using flet.component, flet.observable and state hooks. Imperative To Declarative Flet is an agent skill from flet-dev/flet.observable and state hooks.

How do I install Imperative To Declarative Flet in Claude Code?

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

How do I install Imperative To Declarative Flet in Codex?

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

Can I use Imperative To Declarative Flet 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 imperative-to-declarative-flet -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/imperative-to-declarative-flet, .gemini/skills/imperative-to-declarative-flet, .github/skills/imperative-to-declarative-flet and .opencode/skills/imperative-to-declarative-flet in your project.

What does Imperative To Declarative Flet need to run?

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

Does Imperative To Declarative Flet 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 Imperative To Declarative Flet 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 Imperative To Declarative Flet use?

Imperative To Declarative Flet 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 Imperative To Declarative Flet use?

About 829 tokens (SKILL.md is roughly 3.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 Imperative To Declarative Flet?

Skills that share tags, products or a category with Imperative To Declarative Flet: MCP Server Builder (anthropics/skills, 180k stars), PDF Processing (anthropics/skills, 180k stars), NotebookLM Research Assistant (PleasePrompto/notebooklm-skill, 7.8k stars) and Manim Video Production (browser-use/video-use, 28k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Imperative To Declarative Flet?

flet-dev (a GitHub organization) maintains it in flet-dev/flet, which has 17,266 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 8, 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.