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 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/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.
<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="Reviewed on agentmods" width="80" 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.1 | $0.00021 | $0.01983 |
| Opus 5.5 | $0.00008 | $0.00793 |
| Sonnet 5.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 1mo 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.
- 1mo 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 8mo ago), licensed MIT. It adds 21 tokens to every session and 1,983 once invoked, about $0.0001 per session on Opus 5.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-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.
figma-a11y-annotations
Rules for generating accessibility annotations on iOS/iPadOS mobile designs in Figma. Enforces a bare-minimum annotation discipline, an iOS vocabulary instead of web ARIA terms, and exact grammar for names, control types, page titles, values, hints, headings, groups, and reading order. Never annotates visible text as…
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 24 WCAG criteria.
chartware
Generate enterprise-grade diagrams and data charts in three media — Mermaid (text-first diagrams), hand-authored inline SVG (pixel-perfect charts and figures for HTML embedding), and draw.io via the drawio MCP (editable diagram artifacts) — with a curated visual style system wired to the plugin's brand registry. Use…
slideware
Create visually rich, style-driven slide decks in two output formats: PowerPoint (.pptx via pptxgenjs + React icons) and HTML (single-file Reveal.js deck). Use any time the user asks for a slide deck, presentation, pitch deck, training module, keynote, .pptx file, HTML/web presentation, Reveal.js deck, browser slides…