agentleFS
Sign inStart free
wedabrowedabro/bro-skills/.agents/skills/imagegen-frontend-mobile/SKILL.md

imagegen-frontend-mobile

Skill3 starsChanged 45 days agoMITView on GitHub

Generate premium app-native mobile screen images and coherent multi-screen flows for iOS, Android, or cross-platform products. Use when the deliverable is mobile UI imagery, screen concepts, or phone-mockup presentations. Produce images only; do not write app code, website sections, or brand-guideline boards.

We split this skill into the rules it gives an agent

12 rules. 0 are common, 11 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 60 edited versions we read keep these.

  • 11

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Default to a subtle premium phone frame unless the user asks for frameless screens.

    line 13
  2. Distinctive:

    Keep the app UI, not the device mockup, as the visual focus.

    line 14
  3. Distinctive:

    Check safe areas, tap-target plausibility, text size, state continuity, platform conventions, and mockup framing.

    line 24
  4. Distinctive:

    Keep primary actions reachable and hierarchy obvious at a glance.

    line 29
  5. Distinctive:

    Use platform conventions intentionally: iOS, Android, or a consistent cross-platform neutral language.

    line 30
  6. Distinctive:

    Avoid excessive cards, pills, floating glass, tiny labels, fake metrics, and decorative gradients.

    line 31
  7. Distinctive:

    Keep one navigation model across the flow unless a state explicitly changes it.

    line 32
  8. Distinctive:

    Use images and texture when they support the product.

    line 33
  9. Distinctive:

    Use one coherent icon family and consistent component geometry.

    line 34
  10. Distinctive:

    Keep onboarding concise and show product value before asking for unnecessary permissions.

    line 35
  11. Distinctive:

    Read only the relevant section of references/full-guide.md:

    line 39
  12. Very specific:

    Use rg -n "<heading>" references/full-guide.md.

    line 48

“Common” is measured: kept by at least 6 in 10 of the 60 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Mobile App Image Direction

Generate readable, internally consistent mobile screens that feel native to the requested platform and product category.

Output contract

  • Generate enough standalone screens to show the requested flow; one image must not pretend to cover several unreadable screens.
  • Default to a subtle premium phone frame unless the user asks for frameless screens.
  • Keep the app UI, not the device mockup, as the visual focus.
  • Generate fresh screens for missing states; never crop prior images into new deliverables.
  • Return images only. Do not write code.

Workflow

  1. Determine platform mode, audience, primary job, navigation model, and exact flow.
  2. Define a design bible: palette, type scale, spacing, icon style, imagery, surface treatment, and signature component.
  3. Map the minimum complete screen sequence, including important success, empty, error, or permission states.
  4. Generate screens in flow order while preserving navigation, tokens, copy tone, and component behavior.
  5. Check safe areas, tap-target plausibility, text size, state continuity, platform conventions, and mockup framing.

Non-negotiables

  • Design for a phone viewport first; do not shrink a desktop dashboard into a handset.
  • Keep primary actions reachable and hierarchy obvious at a glance.
  • Use platform conventions intentionally: iOS, Android, or a consistent cross-platform neutral language.
  • Avoid excessive cards, pills, floating glass, tiny labels, fake metrics, and decorative gradients.
  • Keep one navigation model across the flow unless a state explicitly changes it.
  • Use images and texture when they support the product; never sacrifice text readability.
  • Use one coherent icon family and consistent component geometry.
  • Keep onboarding concise and show product value before asking for unnecessary permissions.

Detailed reference

Read only the relevant section of references/full-guide.md:

  • Platform conventions: search PLATFORM MODE RULE.
  • Screen count and flow planning: search GENERATE ENOUGH SCREENS or LOGICAL FLOW RULE.
  • Mockup and safe-area details: search DEVICE MOCKUP FRAME or SAFE AREA.
  • Navigation, iconography, texture, palette, or typography: search the matching heading.
  • Product-category guidance: search CATEGORY-SPECIFIC BIAS.
  • Regeneration and final checks: search REGENERATION RULE or QUALITY CHECK.

Use rg -n "<heading>" references/full-guide.md; avoid loading the complete guide for a small, well-specified flow.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free