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 sofiahernandes/margaret --skill margaret-designgit clone --depth 1 https://github.com/sofiahernandes/margaretWrote 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/sofiahernandes/margaret/margaret-design)<a href="https://agentmods.dev/skills/sofiahernandes/margaret/margaret-design"><img src="https://agentmods.dev/badge/skills/sofiahernandes/margaret/margaret-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.1 | $0.00181 | $0.00765 |
| Opus 5 | $0.00090 | $0.00382 |
| Sonnet 5 | $0.00036 | $0.00153 |
| Haiku 4.5 | $0.00018 | $0.00076 |
Grade A, and why
margaret-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 6d 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 — 40 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Bridge to Figma, both directions. Delegates to the sibling figma plugin's own skills rather than reimplementing Figma access — this skill only routes to the right one and supplies the project context (existing tokens, stack, component conventions) that a bare invocation of those skills wouldn't have. Six modes, pick by intent or by the explicit argument.
Generate new artifacts
- design (default): generate a new screen or component design from the given prompt or spec. Route to
figma:figma-generate-design. - diagram: generate a flowchart, architecture, or sequence diagram. Route to
figma:figma-generate-diagramfor a standalone diagram, orfigma:figma-use-figjamwhen the request is explicitly a FigJam working/brainstorm board rather than a diagram meant to sit in Figma alongside product design.
Ask for missing specifics (target file, spec, tokens) before generating — don't invent design intent that wasn't given.
Pull an existing file/selection into code
- code: convert the given frame/component into working code. Route to
figma:figma-design-to-code. Match this project's existing stack, component conventions, and styling approach — don't introduce a new one. Reuse existing design tokens/theme variables if the project has them instead of hardcoding values pulled from Figma. - context: pull structure, tokens, spacing, and component names from the file/selection and summarize — no code generated. Route to
figma:figma-use. Use before a bigger build when the user wants to see what's there first. - connect: link existing code components to their Figma counterparts via Code Connect, so the Figma design panel resolves to the real implementation instead of a generic suggestion. Route to
figma:figma-code-connect. - motion: read the motion/animation spec on the selection (transitions, easing, duration, triggers) and implement the equivalent in code using whatever animation approach the project already uses. Route to
figma:figma-implement-motion.
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.
- 6d ago First seen · 40 lines · 181 tokens per session scan A 1068056c2f41
margaret-design is a skill published in the GitHub repository sofiahernandes/margaret (2 stars, last pushed 23d ago), licensed MIT. It adds 181 tokens to every session and 765 once invoked, about $0.0009 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
design-assessment
WHAT - Evidence-based design-unit assessment orchestrated by project-assessment. Evaluates visual hierarchy, UX friction, interaction, a11y, responsiveness, design-system compliance, and distinctiveness with severity/confidence evidence citations. Reuses project-assessment-evidence semantics — no second framework.
review
WCAG 2.2 AA curated accessibility review — distinguishes automatically detectable, browser-assisted, and manual/human-judgment findings with evidence citations and SC mapping. Composes with design-assessment/design-improvement/frontend-design-review.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
frontend-design-review
Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks…
figma
Use the Figma MCP server to fetch design context, screenshots, variables, and assets, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
Form UX Optimizer
Reviews web forms for usability issues — field ordering, validation messages, error states, and accessibility.