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 AyushParkara/syntra --skill frontend-designgit clone --depth 1 https://github.com/AyushParkara/syntraWrote 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/ayushparkara/syntra/frontend-design)<a href="https://agentmods.dev/skills/ayushparkara/syntra/frontend-design"><img src="https://agentmods.dev/badge/skills/ayushparkara/syntra/frontend-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/ayushparkara/syntra/frontend-design"><img src="https://agentmods.dev/badge/skills/ayushparkara/syntra/frontend-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.00036 | $0.00323 |
| Opus 5.5 | $0.00014 | $0.00129 |
| Sonnet 5.5 | $0.00007 | $0.00065 |
| Haiku 4.5 | $0.00004 | $0.00032 |
Grade A, and why
frontend-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.
What it actually says
You produce production-quality frontend, not generic "AI-looking" output.
Principles:
- Hierarchy first — establish clear visual hierarchy (size, weight, spacing, color) before decoration. The eye should know where to go.
- Consistent spacing scale — use a scale (4/8/12/16/24/32), never arbitrary px.
- Restraint — limited palette (1 accent + neutrals), 1-2 fonts, purposeful color. No gradients/shadows/animations unless they serve a function.
- Real states — design hover, focus, active, disabled, loading, empty, AND error. A component without its states is half-built.
- Accessibility — sufficient contrast (WCAG AA), keyboard nav, focus rings, semantic HTML, alt text, ARIA only where semantics don't suffice.
- Responsive — mobile-first, test the awkward middle widths, no fixed pixel widths.
Avoid the AI-slop tells:
- Purple/blue gradients everywhere, excessive rounded corners, drop shadows on everything, emoji as icons, centered everything, generic "modern" sans with no hierarchy. Make deliberate choices, not default-pretty ones.
Output: the implementation + a one-line rationale for the key design decisions.
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 · 27 lines · 36 tokens per session scan A d652ea63c98f
frontend-design is a skill published in the GitHub repository AyushParkara/syntra (5 stars, last pushed 2mo ago), licensed Apache-2.0. It adds 36 tokens to every session and 323 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
design-skill
Use BEFORE building or restyling anything a user will see — web/mobile UIs, landing pages, dashboards, components, emails, AND creative work like Three.js/WebGL/canvas/SVG scenes, data-viz, games, and animations — to make it look intentional and polished, not generic; covers tokens, type, color, layout, motion…
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
theme-builder
Create or customize a site theme interactively. Walks through site purpose, audience, visual direction, and design specifics before generating a complete base.html template with all SEO, accessibility, search, pagination, and i18n requirements.
composition
Create polished HTML compositions with Jazz's createcomposition tool for charts, dashboards, interactive explainers, calculators, forms, diagrams, planners, small games, and presentations. Use when a visual or interaction makes information easier to understand or act on.
figma-to-flutter-expert
Use when implementing, translating, auditing, or fixing Flutter UI from a Figma frame, component, Auto Layout, design token, or screenshot; when layout, type, spacing, radius, shadows, or assets drift from the design; when choosing logical pixels versus device pixel ratio, export scale, or responsive scaling; or when…
flutter-animations-production-engineering
Design, implement, review, debug, test, optimize, and migrate production Flutter motion using the official animations package. Use this skill whenever a Flutter task involves OpenContainer, SharedAxisTransition, FadeThroughTransition, FadeScaleTransition, PageTransitionSwitcher, Material motion selection, route…