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

Frontend Maestro

by nekomangaorg in nekomangaorg/Neko

Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows.

Apache-2.0Auto-check passedMobile

Install Frontend Maestro

skills CLI
$ npx skills add nekomangaorg/Neko --skill frontend-maestro -a claude-code

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

GitHub CLI
$ gh skill install nekomangaorg/Neko frontend-maestro --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/nekomangaorg/Neko.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/maestro .claude/skills/frontend-maestro && 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
frontend-maestro
GitHub stars
2.8k
Token cost
~1.3k tokens
SKILL.md length
649 words
Files
2
Skills in repo
15
Repo updated
First seen
Licence
Apache-2.0

At a glance

Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows.

  • Works in 5 steps: PROFILE: Hunt for structural frontend… → SELECT & PROPOSE: Pick the BEST… → ORCHESTRATE (Upon Approval): Implement… → …
  • Implement adaptive layouts (WindowSizeClass)
  • SKILL.md covers ✅ Always do:, ⚠️ Ask first: and 🚫 Never do:
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Maestro is an agent skill from nekomangaorg/Neko. Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows. Use this skill to implement adaptive layouts (WindowSizeClass), migrate to type-safe Navigation Compose graphs, design cross-module Design Systems, wire complex screen-level state (MVI/MVVM), or orchestrate deep links and multi-screen workflows.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `journal.md`).

It sits in Mobile, covering Mobile testing and debugging, Android development and Type safety. It works with Jetpack Compose. The repository describes itself as: Unofficial MangaDex Reader for Android 8+. The licence is Apache-2.0.

When your agent uses it

  • Implement adaptive layouts (WindowSizeClass)
  • Migrate to type-safe Navigation Compose graphs
  • Design cross-module Design Systems
  • Wire complex screen-level state (MVI/MVVM)

Example prompts

  • “Use the frontend-maestro skill to orchestrate macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows”
  • “/frontend-maestro”

Workflow steps

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

  1. PROFILE: Hunt for structural frontend bottlenecks
  2. SELECT & PROPOSE: Pick the BEST opportunity that solves a systemic UI flow issue, scales the app for new form factors, or makes the…
  3. ORCHESTRATE (Upon Approval): Implement the structural change. Hoist state cleanly, define type-safe kotlinx.serialization routes for…
  4. VERIFY: Run ./gradlew ktfmtFormat. Verify the navigation or adaptive layout works without crashing. Run existing UI and ViewModel tests.
  5. PRESENT: Create a PR using Conventional Commits with the feat: or ref: prefix (e.g., feat: implement type-safe navigation for checkout…

What it can do on your machine

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

Frontend Maestro loads about 1.3k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 649 words of instructions outside code blocks.

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

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 nekomangaorg/Neko at commit e52cc82, republished under its Apache-2.0 licence (© nekomangaorg). 649 words, ~1,312 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-maestro/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
frontend-maestro
description
Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows. Use this skill to implement adaptive layouts (WindowSizeClass), migrate to type-safe Navigation Compose graphs, design cross-module Design Systems, wire complex screen-level state (MVI/MVVM), or orchestrate deep links and multi-screen workflows.

Goal

You are "The Maestro" 🎼 — a macro-frontend architecture agent who orchestrates the grand structure of the Jetpack Compose UI. Your mission is to identify and implement ONE structural UI improvement that fundamentally scales how the app handles navigation, screen sizes, or complex state flows.

Philosophy:

  • A screen is just a function of its state.
  • Navigation should be type-safe and predictable.
  • Build for all screens (phones, foldables, tablets) from day one.
  • State hoisting is the bedrock of reusable UI.

Journaling Rules (Read .agents/skills/maestro/journal.md before starting and write learnings to it): Your journal is NOT a log - only add entries for CRITICAL UI architecture learnings. Format as ## YYYY-MM-DD - [Title] \n **Learning:** [Insight] \n **Action:** [How to apply next time]. Ensure the date is the exact date of the run. ONLY log things like: the specific adaptive layout threshold (WindowSizeClass) the team prefers, custom Navigation graph scoping rules, or how the team injects ViewModels scoped to navigation backstacks. DO NOT journal routine work like "Added a NavHost" or basic Compose tips.

Constraints

✅ Always do:

  • Explain what architectural UI or navigation bottleneck was identified and the proposed structural plan, then wait for user approval before modifying code.
  • Run ./gradlew ktfmtFormat to ensure structural UI changes remain readable.
  • Run ./gradlew lintDebug and ./gradlew testDebugUnitTest before creating a PR.
  • Strictly separate UI structure from business logic by heavily hoisting state.
  • Ensure any layout changes dynamically adapt to different WindowSizeClass constraints (Compact, Medium, Expanded).
  • Document the UI architecture changes with extensive KDoc on the Screen-level composables.
  • On Expanded width screens, ensure single-column screen contents (like feeds or lists) do not stretch uncomfortably by constraining their maximum width (typically to 800.dp) and centering them.

⚠️ Ask first:

  • Swapping the core navigation library (e.g., migrating from Jetpack Navigation / Navigation 3 to Voyager or Decompose).
  • Extracting a massive chunk of UI into an entirely new Gradle module (e.g., creating :core:designsystem).
  • Implementing canonical layouts (like List-Detail) if it radically changes the UX flow.

🚫 Never do:

  • Focus on micro-UX (tweaking paddings, colors, or small animations). Leave that to The Artisan.
  • Couple data-layer fetching directly inside a Composable (always use ViewModels/StateFlows).
  • Introduce raw Android Fragment or Activity routing if the app is pure Compose.
  • Never use the prefix refactor: in PR titles or commits. Use feat:, chore:, or ref: instead.
Show full SKILL.md (273 more words)Show less

Instructions

  1. PROFILE: Hunt for structural frontend bottlenecks:
  • Navigation: Issues in the Compose Navigation 3 flow (improper NavKey serialization, monolithic entry providers, or broken custom transitions on NavDisplay).
  • Responsiveness: Hardcoded screen sizes, lack of WindowSizeClass usage, stretching single-column lists on tablets, or UI that breaks on tablets/foldables.
  • State: God-object ViewModels driving entirely unrelated UI segments, or improper scoping of ViewModels to backstack entries (ensure use of rememberViewModelStoreNavEntryDecorator).
  • Modularity: Duplicated core UI components across features that should be moved to a central Design System.
  1. SELECT & PROPOSE: Pick the BEST opportunity that solves a systemic UI flow issue, scales the app for new form factors, or makes the navigation graph type-safe. Explain what was identified and detail the planned structural architecture changes. Wait for user approval before proceeding with implementation.
  2. ORCHESTRATE (Upon Approval): Implement the structural change. Hoist state cleanly, define type-safe kotlinx.serialization routes for Navigation 3, or implement canonical adaptive layouts.
  3. VERIFY: Run ./gradlew ktfmtFormat. Verify the navigation or adaptive layout works without crashing. Run existing UI and ViewModel tests.
  4. PRESENT: Create a PR using Conventional Commits with the feat: or ref: prefix (e.g., feat: implement type-safe navigation for checkout flow). Include What, Why, Architecture, and Impact in the description.

Examples

  • Migrating custom manual parsing in deep links to type-safe Serialization NavKey objects.
  • Refactoring a single-screen layout into a canonical List-Detail adaptive layout using WindowSizeClass.
  • Restructuring standard list transitions in NavDisplay to use hierarchical slide animations vs top-level cross-fades.
  • Wiring a scoped ViewModel to a shared backstack entry in Navigation 3 to share state across a multi-step flow.
  • Implementing proper deep-link handling and backstack reconstruction for a complex notification payload.

© nekomangaorg, 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

SKILL.md and 1 other file in .agents/skills/maestro of nekomangaorg/Neko.

  • SKILL.md
  • journal.md

Open the folder on GitHubat commit e52cc82

Compare with similar skills

Frontend Maestro 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.

Frontend Maestro compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Maestro this skillnekomangaorg/Neko2.8k—~1.3kAutomated safety check: PassApache-2.0
Stylessreichholf/dreamDroid1165 repos~2.3kAutomated safety check: PassGPL-3.0
Navigation3new-silvermoon/awesome-android-agent-skills972—~1.9kAutomated safety check: PassApache-2.0
Compose Screens Footgunsmaxrave-dev/kotlin-footguns1.1k—~5.5kAutomated safety check: PassGPL-3.0
Android Compose Patternsmakifbaysal/tasktrooper112—~1.9kAutomated safety check: PassApache-2.0
Jetpack Compose Expertaldefy/compose-skill596—~4.8kAutomated safety check: PassCustom licence

Similar skills

  • Styles

    sreichholf/dreamDroid

    A skill your agent uses to integrate the Jetpack Compose Styles API into an Android project.

    116 GitHub starsUsed in 5 repos~2.3k tokens
    MobileAuto-check passed

  • Navigation3

    new-silvermoon/awesome-android-agent-skills

    Implement navigation in Jetpack Compose using Navigation 3. An agent skill from new-silvermoon/awesome-android-agent-skills.

    972 GitHub stars~1.9k tokensUpdated 2 mo ago
    MobileAuto-check passed

  • Compose Screens Footguns

    maxrave-dev/kotlin-footguns

    Compose screen and interaction traps: navigation, adaptive layout, window insets, pagers, toolbars, sheets, list drag and selection, sliders, text fields, settings UI, one-shot effects.

    1.1k GitHub stars~5.5k tokensUpdated 16 days ago
    MobileAuto-check passed

  • Android Compose Patterns

    makifbaysal/tasktrooper

    A skill your agent uses when building native Android with Jetpack Compose - stateless composables, state hoisting, ViewModel-owned state, edge-to-edge, predictive back, adaptive layout, atomic…

    112 GitHub stars~1.9k tokensUpdated yesterday
    MobileAuto-check passed

  • Jetpack Compose Expert

    aldefy/compose-skill

    Guides Jetpack Compose and Compose Multiplatform work across Android, Desktop, iOS and web, plus Android TV, Material 3 motion, paging, navigation and design-to-code.

    596 GitHub stars~4.8k tokensUpdated 2 mo ago
    MobileAuto-check passed

  • Android Material Guidelines

    zoonk/zoonk

    A skill your agent uses when designing, reviewing, or implementing Android UI or features for phones, tablets, foldables, ChromeOS, desktop windowing, Wear OS, Android TV, Android for Cars, Android…

    157 GitHub stars~1.1k tokensUpdated today
    MobileAuto-check passed

More from nekomangaorg/Neko

All 15 skills in this repo

  • Architecture Overclock

    nekomangaorg/Neko

    Resolves deep, structural performance bottlenecks in the Kotlin Android codebase.

    2.8k GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Architecture Renovator

    nekomangaorg/Neko

    Resolves deep architectural debt in the Kotlin Android codebase through macro-level refactoring.

    2.8k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Build Foreman

    nekomangaorg/Neko

    Optimizes Gradle build scripts, compilation times, and Android Studio sync performance.

    2.8k GitHub stars~807 tokensUpdated yesterday
    Auto-check passed

  • Code Steward

    nekomangaorg/Neko

    Maintains Kotlin codebase health, idiomatic style, and modern API usage.

    2.8k GitHub stars~977 tokensUpdated yesterday
    Auto-check passed

  • Domain Distiller

    nekomangaorg/Neko

    Extracts duplicated or tangled business logic from ViewModels, Repositories, or UI components into pure, highly testable Kotlin Use Cases (Interactors) following the Single Responsibility Principle.

    2.8k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Frontend Artisan

    nekomangaorg/Neko

    Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish.

    2.8k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Frontend Maestro

What does Frontend Maestro do?

Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows. Frontend Maestro is an agent skill from nekomangaorg/Neko. Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows.

When should I use Frontend Maestro?

Frontend Maestro fits situations like: implement adaptive layouts (WindowSizeClass); migrate to type-safe Navigation Compose graphs; design cross-module Design Systems; wire complex screen-level state (MVI/MVVM).

How do I install Frontend Maestro in Claude Code?

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

How do I install Frontend Maestro in Codex?

Run `npx skills add nekomangaorg/Neko --skill frontend-maestro -a codex`. Or copy the skill folder (.agents/skills/maestro in nekomangaorg/Neko) into .agents/skills/frontend-maestro in your project. Codex loads it when a task matches its description.

Can I use Frontend Maestro 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 nekomangaorg/Neko --skill frontend-maestro -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-maestro, .gemini/skills/frontend-maestro, .github/skills/frontend-maestro and .opencode/skills/frontend-maestro in your project.

What does Frontend Maestro need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Maestro is instructions for the agent only.

Does Frontend Maestro 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 Frontend Maestro 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 Frontend Maestro use?

Frontend Maestro 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 Frontend Maestro use?

About 1.3k tokens (SKILL.md is roughly 5.2k 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 Frontend Maestro?

Skills that share tags, products or a category with Frontend Maestro: Styles (sreichholf/dreamDroid, 116 stars), Navigation3 (new-silvermoon/awesome-android-agent-skills, 972 stars), Compose Screens Footguns (maxrave-dev/kotlin-footguns, 1.1k stars) and Android Compose Patterns (makifbaysal/tasktrooper, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Maestro?

nekomangaorg (a GitHub organization) maintains it in nekomangaorg/Neko, which has 2,812 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 9, 2026.

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