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.
npx agentmods add skills/jpavley/meta-loop-ios/wireframe-designnpx skills add jpavley/meta-loop-ios --skill wireframe-designgit clone --depth 1 https://github.com/jpavley/meta-loop-iosWrote 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.
[](https://agentmods.dev/skills/jpavley/meta-loop-ios/wireframe-design)<a href="https://agentmods.dev/skills/jpavley/meta-loop-ios/wireframe-design"><img src="https://agentmods.dev/badge/skills/jpavley/meta-loop-ios/wireframe-design.svg" alt="Measured on agentmods" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00021 | $0.01983 |
| Opus 5 | $0.00010 | $0.00992 |
| Sonnet 5 | $0.00004 | $0.00397 |
| Haiku 4.5 | $0.00002 | $0.00198 |
Grade A, and why
wireframe-design 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 3d 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.
How it starts
The opening of the file, as written. The whole thing — 187 lines — stays where its author put it; the contents beside it link to each section on GitHub.
How to Create a Wireframe
Tips for creating wireframes that drive accurate specs via
/ml-spec
Purpose
Wireframes are the primary input to the Meta-Loop specification process. The AI reads your wireframe and generates a specification document from it. There are two types: screen wireframes (what the user sees) and logic wireframes (what happens behind the scenes). These tips help you create both types of wireframes that communicate your intent clearly — especially the parts the AI is likely to misunderstand.
For the full Meta-Loop process, see the meta-loop-methodology skill.
Wireframe Principles
-
Whiteboard quality is fine. Wireframes don't need to be pixel-perfect. Rough sketches with clear annotations work better than polished mockups with no annotations.
-
Annotations are the real content. The sketch shows layout; the annotations communicate intent. When in doubt, add an annotation.
-
Wireframes communicate intent, not pixels. The AI doesn't need exact dimensions or colors — it needs to understand what you want the user to experience.
Wireframe Types
Screen Wireframes
Screen wireframes show what the user sees — layout, UI elements, and visual states. These are the classic wireframes: boxes representing views, labels indicating content, and annotations explaining behavior.
- Show layout structure, spacing, and element arrangement
- Can show multiple states side-by-side on one image (e.g., populated list and empty state)
- Name with a descriptive suffix:
main-view-wireframe.png,edit-wireframe.png
Logic Wireframes
Logic wireframes show what happens behind the scenes — data flow, processing steps, derived values, and decision points. These look like flowcharts or data-flow diagrams, not screen layouts.
- Show how data enters, transforms, and flows through the feature
- No UI chrome needed — boxes represent processes, not views
- Use for paste capture logic, validation pipelines, rating calculations, etc.
- Name with a descriptive suffix:
paste-logic-wireframe.png,search-logic-wireframe.png
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.
- 3d ago First seen · 187 lines · 21 tokens per session scan A 31d605fa63b5
wireframe-design is a skill published in the GitHub repository jpavley/meta-loop-ios (3 stars, last pushed 6mo ago), licensed MIT. It adds 21 tokens to every session and 1,983 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
ax-privacy
Privacy manifests, permissions UX, ATT, localization (String Catalogs, plurals, RTL, Xcode 26 generated symbols), Transferable/drag-drop/copy-paste/ShareLink, App Intents discoverability, debug deep links, and Required Reason APIs.
ax-design-ref
Design API reference -- HIG color/background/material system, typography (San Francisco, text styles, Dynamic Type, tracking, leading), SF Symbols complete API (rendering modes, effects, UIKit equivalents, platform matrix), Liquid Glass adoption guide (controls, navigation, windows, icons, migration), accessibility…
ax-design
Apple Human Interface Guidelines and SF Symbols -- design decisions, rendering modes, symbol effects/animations, Draw animations (iOS 26), accessibility compliance, and defending HIG decisions in design reviews.
iOS SwiftUI Accessibility
Enforces WCAG 2.2 accessible coding patterns when writing SwiftUI — labels, traits, Dynamic Type, contrast, touch targets, focus management, orientation, and more. Based on the ios-swiftui-accessibility-techniques project with 41 static analysis rules across 23 WCAG criteria.
ttb-skill-native-swiftui-components
Build reusable native SwiftUI UI components using 100% standard SwiftUI primitives with TTBaseUIKit design tokens, localization, chainable modifiers, and project architecture rules. NO TTBaseSUI wrappers. iOS 14+.
apple-app-designer
Design and visually audit adaptive, accessible Apple app experiences across supported devices. Use for SwiftUI screen architecture, iPhone/iPad responsive layouts, navigation, paywalls, empty/loading/error states, Dynamic Type, VoiceOver, Apple Pencil or keyboard support, App Store screenshots, or when App Review…