Imagegen frontend mobile
Skill wedabro/bro-skills/.agents/skills/imagegen-frontend-mobile
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.From its SKILL.md
npx -y skills add wedabro/bro-skills --skill imagegen-frontend-mobileAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
2.8 KB, 513 tokens by cl100k_base, as published. Nobody here has run it
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
- Determine platform mode, audience, primary job, navigation model, and exact flow.
- Define a design bible: palette, type scale, spacing, icon style, imagery, surface treatment, and signature component.
- Map the minimum complete screen sequence, including important success, empty, error, or permission states.
- Generate screens in flow order while preserving navigation, tokens, copy tone, and component behavior.
- 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 SCREENSorLOGICAL FLOW RULE. - Mockup and safe-area details: search
DEVICE MOCKUP FRAMEorSAFE AREA. - Navigation, iconography, texture, palette, or typography: search the matching heading.
- Product-category guidance: search
CATEGORY-SPECIFIC BIAS. - Regeneration and final checks: search
REGENERATION RULEorQUALITY CHECK.
Use rg -n "<heading>" references/full-guide.md; avoid loading the complete guide for a small, well-specified flow.
What ships with it: 1 file
39.4 KB alongside SKILL.md
references/
- full-guide.md39.4 KB
Gives 0 of the 12 instructions most design frontend skills give in 513 tokens
Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07
- Use CSS variables for color consistencyin 72 of 1169, across 23 files
- Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
- Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
- Add atmospheric background effects and texturesin 57 of 1169, across 9 files
- Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
- Implement real working codein 55 of 1169, across 7 files
- Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
- Launch chromium in headless modein 47 of 1169, across 4 files
- Close the browser when donein 47 of 1169, across 4 files
- Run provided scripts with help flag firstin 47 of 1169, across 4 files
- Wait for network idle statein 47 of 1169, across 4 files
- Use descriptive selectors for elementsin 47 of 1169, across 4 files
Said here and by no other author read
- generate enough screens to show the flow
- default to a premium phone frame
- keep app UI as the visual focus
- generate fresh screens for missing states
- return images only
- determine platform, audience, job, navigation, and flow
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.