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 QinghongLin/data2story-skill --skill frontend-design-progit clone --depth 1 https://github.com/QinghongLin/data2story-skillWrote 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/qinghonglin/data2story-skill/frontend-design-pro)<a href="https://agentmods.dev/skills/qinghonglin/data2story-skill/frontend-design-pro"><img src="https://agentmods.dev/badge/skills/qinghonglin/data2story-skill/frontend-design-pro/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/qinghonglin/data2story-skill/frontend-design-pro"><img src="https://agentmods.dev/badge/skills/qinghonglin/data2story-skill/frontend-design-pro.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.00129 | $0.01278 |
| Opus 5 | $0.00064 | $0.00639 |
| Sonnet 5 | $0.00026 | $0.00256 |
| Haiku 4.5 | $0.00013 | $0.00128 |
Grade A, and why
frontend-design-pro 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 12d 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 — 42 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design
A shared design system for building beautiful, distinctive, multimedia-rich HTML stories. This is not a pipeline stage; it is a library the Designer reads to choose a visual language and the Programmer reads to implement it, so output looks like an editorial product, not a default template.
When to use
- Designer: before writing
page_rhythmand per-section visuals, pick a theme and component vocabulary from here. Borrow tokens, layout, and component recipes; record the chosen theme indesigner.jsonpage_rhythm. - Programmer: implement the chosen theme's tokens as CSS
:rootvariables and build each visual with the matching component recipe and motion/accessibility rules here.
Core principles
- Editorial, not generic. Avoid the default-AI look (bootstrap blue, purple gradient hero, everything centered, one system font, evenly-spaced soulless cards). Commit to one bold idea per story. See
references/themes.json→anti_patterns. - Rich media by default. A story should use multiple channels well — charts, images, video, audio, interactives/maps — each presented with craft, not dumped in. See
references/media_presentation.json. - One system, themed per story. All color/type/space/shadow flow from CSS
:roottokens so the whole page is coherent and re-themeable. Seereferences/design_tokens.jsonfor tokens andreferences/typography.jsonfor concretefile://-safe font-pairing stacks. - Structure carries the reading. A clear content column, deliberate full-bleed moments, and consistent section rhythm. See
references/layout.json. - Motion and access are part of the design. Subtle scroll reveals and transitions, always respecting
prefers-reduced-motion, AA contrast, focus states, and "never autoplay sound." Seereferences/motion.jsonfor motion tokens, choreography, accessibility, and the anti-slop checklist. - Self-contained. Single HTML file; allowed CDNs only (Vega-Embed, Leaflet, optionally D3/PDF.js); inline data; works on
file://.
What ships with it
15 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/abstract_excellence.json 19 KB
- references/components.json 16 KB
- references/design_tokens.json 2.6 KB
- references/exemplars/cinematic_flagship.md 30 KB
- references/exemplars/titling_captioning.md 15 KB
- references/finish.json 9.1 KB
- references/interaction_playbook.json 38 KB
- references/interaction.json 872 B
- references/layout.json 9.6 KB
- references/media_presentation.json 7.9 KB
- references/motion.json 20 KB
- references/pitfalls.json 137 KB
- references/quality_rubric.json 29 KB
- references/themes.json 6.4 KB
- references/typography.json 7.2 KB
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.
- 12d ago First seen · 42 lines · 129 tokens per session scan A 0ee6befc183a
frontend-design-pro is a skill published in the GitHub repository QinghongLin/data2story-skill (155 stars, last pushed 2mo ago), licensed MIT. It adds 129 tokens to every session and 1,278 once invoked, about $0.0006 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-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.