MohamedAbdallah-14/app-icon
plugins/prompt-to-asset/skills/app-icon/SKILL.md
Generate an app icon from a single 1024² master and fan out to iOS (AppIcon.appiconset with squircle-ready 1024 opaque), Android (adaptive foreground + background + Android 13 monochrome), PWA (192/512 + 512 maskable with 80% safe zone), and visionOS (3-layer parallax).
$ install --global
skillsauthnpx skillsauth add MohamedAbdallah-14/prompt-to-asset app-iconInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 2:05 AM119.2s1 file scanned
SKILL.md
- name:
- app-icon
- description:
- Generate an app icon from a single 1024² master and fan out to iOS (AppIcon.appiconset with squircle-ready 1024 opaque), Android (adaptive foreground + background + Android 13 monochrome), PWA (192/512 + 512 maskable with 80% safe zone), and visionOS (3-layer parallax).
- trigger_phrases:
- [app icon, make an app icon, ios icon, android icon, pwa icon, launcher icon]
App icon generation
Platform requirements (non-negotiable)
| Platform | Size/format | Transparency | Safe zone |
|---|---|---|---|
| iOS App Store | 1024×1024 PNG, no alpha | opaque | squircle mask applied by OS; keep subject in 824px center |
| iOS device | 180, 167, 152, 120, 87, 80, 76, 60, 58, 40, 29, 20 (@1x, @2x, @3x) | opaque | same |
| iOS 18 dark / tinted | Icon Composer layered source | per-layer | same |
| Android adaptive | 108 dp foreground + 108 dp background; 72 dp visible safe zone | FG yes / BG no | 72 dp of 108 dp |
| Android 13 monochrome | themed drawable | yes | same |
| Google Play | 512×512 PNG, no alpha | opaque | — |
| PWA | 192, 512 any; 512 maskable | maskable: opaque + 80% safe zone | 80% of 512 for maskable |
| visionOS | 3× 1024² PNGs (parallax layers) | per-layer | — |
Generation — mark, then pack
Never generate per-platform. Always: one 1024² RGBA master → deterministic fan-out.
- Route the mark generation (see
skills/logo/SKILL.md) — no text; subject-only. - Matte with BiRefNet if the chosen provider returned opaque.
- Deterministic export via
pipeline/export.ts::exportAppIconBundle(puresharp— no external CLI dependency):- iOS:
AppIcon.appiconset/Contents.json+ every required PNG (iPhone/iPad/Mac/Watch/marketing). 1024 marketing variant flattened onto brand primary color (App Store rejects alpha). iOS 18 dark/tintedappearancesemitted whenios_18_appearances: true. - Android:
mipmap-{mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi}/ic_launcher.png+mipmap-anydpi-v26/ic_launcher.xmlpointing toic_launcher_foreground+ic_launcher_background+ic_launcher_monochrome(foreground-derived via greyscale+threshold; the final themed-icon result should still be audited manually for complex marks). - PWA:
192.png,512.png,512-maskable.png(80% safe-zone padding) +manifest-snippet.json. - visionOS: 1024²
master.png+ a README describing the 3-layer parallax split that Xcode's Reality Composer Pro or a manual Photoshop step produces. - Favicon bonus:
.ico(16/32/48 multi-res) via optionalpng-to-ico; falls back to separate PNGs with a warning if the dep is absent.
- iOS:
Prompt scaffold
A [flat vector | isometric 3D | glyph | soft gradient] app icon representing [SUBJECT, concrete noun phrase].
Bold, memorable silhouette. High contrast.
Subject fills 70-80% of frame, centered.
No text, no labels, no wordmark.
Palette: [#primary, #secondary, #accent].
Solid pure white background.
1:1 square, 1024x1024.
For platform styling: iOS-style rounded square backdrop or Android-style adaptive foreground on transparent can be added to steer, but the mark should be subject-only — backdrop is applied deterministically in export.
Android 13 monochrome derivation
Heuristic (see Open Question G11 in SYNTHESIS.md): sharp(foreground).greyscale().threshold(128).tint('#000'). Works for bold single-subject marks; audit visually for complex marks.
Validation
- 1024 marketing variant: opaque, dimensions exact, file <1MB.
- Android foreground: tight-bbox inside 72dp of 108dp.
- PWA maskable: subject inside 80% center circle.
- Contrast at 16×16 (renders to "favicon-ish" size): WCAG AA vs both white and dark card.
- No text detected by OCR (app icons must be text-free).
Output
app-icon/
├── master.png # 1024² RGBA
├── ios/AppIcon.appiconset/ # Contents.json + all sizes
├── ios/AppIcon-1024-opaque.png # App Store marketing
├── android/mipmap-*/ic_launcher.png
├── android/mipmap-anydpi-v26/ic_launcher.xml
├── android/drawable/ic_launcher_{foreground,background,monochrome}.png
├── pwa/{192,512,512-maskable}.png
├── pwa/manifest-snippet.json
├── visionos/{front,middle,back}.png # if parallax
└── meta.json
Related Skills
MohamedAbdallah-14/ui-mockup-prompt
testing
VerifiedTrustedCommunity
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
4SKILL.mdUpdated May 7, 2026
MohamedAbdallah-14/ui-mockup-prompt
testing
VerifiedTrustedCommunity
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
4SKILL.mdUpdated May 7, 2026
MohamedAbdallah-14/t2i-prompt-dialect
development
VerifiedTrustedCommunity
Rewrite an asset brief into the exact prompt dialect of the target image model (OpenAI gpt-image-1, Google Imagen/Gemini, SDXL, Flux.1/Flux.2, Midjourney, Ideogram, Recraft). Handles negative-prompt translation, token budgets, transparency quirks, brand-palette injection, and text-in-image ceilings so that `asset_generate_*` submissions succeed on the first try.
2SKILL.mdUpdated Apr 21, 2026
MohamedAbdallah-14/logo
development
VerifiedTrustedCommunity
Generate a production-grade logo (primary brand mark). Returns RGBA PNG master + SVG vector + monochrome variant. Route by text-length and per-model ceiling. Strong-text models render multi-word and even paragraph-length wordmarks reliably; weak-text models composite SVG type post-render.
2SKILL.mdUpdated Apr 21, 2026