agentmods.dev

mobile-design-frames

mobile-design-frames is a skill for Claude Code from jdanigo/hydraia. It costs 125 tokens per session (8,721 once invoked), scanned A, a copy of imagegen-frontend-mobile, MIT.

A visual design guide for generating mobile app screen concepts and multi-screen flows for iOS, Android, or cross-platform products. It focuses on readable, consistent app interfaces.

In plain words
What is it for?
Use it to create concepts for onboarding, sign-in, dashboards, profiles, settings, chat, shopping, finance, health, and productivity apps.
Why use it?
It helps avoid generic mockups and inconsistent screens when planning or redesigning a mobile app.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the hydraia plugin — 52 skills, 17 commands, 27 agents, 6 hooks shipped together

not rated 8repo 1mo ago A scan 125 tokens copy · 98% MIT

Good fit Use it to create concepts for onboarding, sign-in, dashboards, profiles, settings, chat, shopping, finance, health, and productivity apps.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jdanigo/hydraia/mobile-design-frames
View source ↗ jdanigo/hydraia
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add jdanigo/hydraia --skill mobile-design-frames
Clone the repo
git clone --depth 1 https://github.com/jdanigo/hydraia

Made for: Claude Code.

Or install hydraia, the plugin that ships this one along with the rest of its 52 skills, 17 commands, 27 agents, 6 hooks.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for mobile-design-frames

README.md
[![agentmods](https://agentmods.dev/badge/skills/jdanigo/hydraia/mobile-design-frames/github.svg)](https://agentmods.dev/skills/jdanigo/hydraia/mobile-design-frames)
Your own site
<a href="https://agentmods.dev/skills/jdanigo/hydraia/mobile-design-frames"><img src="https://agentmods.dev/badge/skills/jdanigo/hydraia/mobile-design-frames/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for mobile-design-frames

Your own site · 80×15
<a href="https://agentmods.dev/skills/jdanigo/hydraia/mobile-design-frames"><img src="https://agentmods.dev/badge/skills/jdanigo/hydraia/mobile-design-frames.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 125 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 8,721 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 98% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00125 $0.08721
Opus 5.5 $0.00050 $0.03488
Sonnet 5.5 $0.00025 $0.01744
Haiku 4.5 $0.00013 $0.00872

Measured 2mo ago against content hash b9e61deefea6, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

mobile-design-frames scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

98% identical to imagegen-frontend-mobile — 4 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/mobile-design-frames/SKILL.md · 1,466 lines

How it starts

The opening of the file, as written. The whole thing — 1,466 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CORE DIRECTIVE: PREMIUM MOBILE APP IMAGE DIRECTION

You are an elite mobile product design art director.

Your job is not to generate generic app mockups. Your job is to generate premium, app-native, highly readable mobile app screen images and flow images.

This skill is for:

  • onboarding flows
  • auth flows
  • home dashboards
  • profile screens
  • settings screens
  • chat screens
  • ecommerce screens
  • fintech screens
  • health and fitness screens
  • productivity apps
  • social apps
  • utilities
  • multi-screen app concepts
  • premium mobile redesigns

This skill is not for:

  • websites
  • landing pages
  • desktop dashboards
  • design-to-code
  • frontend implementation
  • code generation

The output must feel:

  • app-native
  • premium
  • clean
  • highly intentional
  • visually strong
  • readable
  • believable
  • flow-aware
  • platform-aware
  • creatively art-directed
  • non-generic
  • built on a clean, controlled color palette
  • consistent across multiple generated images

Standard AI mobile output tends to collapse into repetitive defaults:

  • fake fintech dashboards with random charts
  • one pretty screen and then generic filler screens
  • too many floating cards
  • too many pills and tags
  • no safe-area awareness
  • weak navigation logic
  • phone-sized websites
  • gradient-heavy dribbble clones
  • glassmorphism without purpose
  • tiny unreadable text
  • too much content above the fold
  • cloned onboarding screens
  • fake complexity instead of good mobile hierarchy
  • sterile flat backgrounds with no texture or visual atmosphere
  • generic palettes
  • default purple-blue startup color clichés
  • random bright colors
  • generic developer-tool icon sets
  • overly simplistic layouts that feel empty instead of elegant
  • screen sets that drift into different design systems
  • inconsistent device mockups and uneven margins around the phone
  • device frames that dominate more than the actual screen content

Your goal is to aggressively break these defaults.

IMPORTANT: This skill generates images only. Do not switch into coding mode. Do not describe code. Do not build SwiftUI, React Native, Flutter, or HTML. Generate mobile screen images and screen-flow images only.

Read the full file on GitHub · 1,466 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2mo ago First seen · 1,466 lines · 125 tokens per session scan A b9e61deefea6

Subscribe to this mod's changes

mobile-design-frames is a skill published in the GitHub repository jdanigo/hydraia (8 stars, last pushed 1mo ago), licensed MIT. It adds 125 tokens to every session and 8,721 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 98% identical to imagegen-frontend-mobile, differing in 4 lines, and is treated as a copy.

Claude CodeCode reviewDesign and UXMobileagenticai-agentsclaudeclaude-code-plugin
Related

mobile-design-frames compared with skills from other repositories

mobile-design-frames next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
mobile-design-framesjdanigo/hydraiaSkill81mo agoMITA125Claude Code
ios-hig-designwondelai/skillsSkill2.6k4d agoMITA145Claude Code
performance-profilingconorluddy/xclaude-pluginSkill18617d agoMITA52Claude Code
platform-conventionsOwl-Listener/designer-skillsSkill3.3k2mo agoMITA55Claude Code
a11y-auditjosstei/maestro-orchestrateSkill4864d agoApache-2.0A28Claude Code, Codex
accessibility-testingconorluddy/xclaude-pluginSkill18617d agoMITA57Claude Code
crash-debuggingconorluddy/xclaude-pluginSkill18617d agoMITA61Claude Code