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 wedabro/bro-skills --skill speckit.frontendgit clone --depth 1 https://github.com/wedabro/bro-skillsWrote 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/wedabro/bro-skills/speckit.frontend)<a href="https://agentmods.dev/skills/wedabro/bro-skills/speckit.frontend"><img src="https://agentmods.dev/badge/skills/wedabro/bro-skills/speckit.frontend/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/wedabro/bro-skills/speckit.frontend"><img src="https://agentmods.dev/badge/skills/wedabro/bro-skills/speckit.frontend.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.00031 | $0.01559 |
| Opus 5 | $0.00015 | $0.00779 |
| Sonnet 5 | $0.00006 | $0.00312 |
| Haiku 4.5 | $0.00003 | $0.00156 |
Grade A, and why
speckit.frontend 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 10d 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 — 132 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mission
Turn approved UI requirements and API contracts into cohesive production UI.
Honor .agents/knowledge_base/ui_ux_standards.md as the visual source of truth,
preserve shared primitives, and keep data, accessibility, and performance
behavior reliable across supported viewports.
Required Inputs
.agents/specs/[feature]/spec.md,plan.md, andtasks.md.agents/knowledge_base/ui_ux_standards.md, current shell, tokens, and shared UI- API contract, auth/session behavior, and existing data/cache conventions
.agents/memory/constitution.mdfor ENV and Docker policy
Use speckit.uiux for new design-system decisions, speckit.backend for API
contract changes, speckit.security for security review, and speckit.tester
for broader test planning. Do not replace their ownership.
Protocol
0. Mandatory Preflight
- Before writing code, inspect the current page family, shared layout, components, design tokens, theme, feature structure, rendering boundary, and API/data-cache conventions.
- Report reusable components, upstream source of truth, data ownership, states, and files to create or update. Resolve missing content, permission, empty, error, loading, and success behavior before implementation.
- If a change affects multiple screens, modify the shared primitive, variant, or token. Do not patch the same visual property page by page.
1. Layout and Component Architecture
- Compose pages from the shared application shell, container, breadcrumb, page header, and content primitives. Same-type pages use the same structure, width, horizontal padding, and title placement.
- Before creating a component, search for an existing primitive to reuse, extend with typed props/variants, or compose. When two components overlap by roughly 70% or more, prefer one shared component with variants.
- Keep feature-only components, hooks, schemas, and API adapters within the feature. Promote a component only when multiple features use it; keep page files focused on composition and page-level data flow.
- At roughly 250–300 lines, review a file and extract independent UI or logic. At the second repeated JSX, form, modal, state view, formatter, or API-error pattern, evaluate a component, hook, utility, config, schema, or service.
- Use
100dvhrather than100vhfor viewport-sized mobile layouts. Use semantic HTML before ARIA and typed variants rather than style-only forks.
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.
- 10d ago First seen · 132 lines · 31 tokens per session scan A 608122c9b2fc
speckit.frontend is a skill published in the GitHub repository wedabro/bro-skills (2 stars, last pushed 14d ago), licensed MIT. It adds 31 tokens to every session and 1,559 once invoked, about $0.0002 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
developer-utilities-post-markdown
Convert a Markdown string to HTML. Useful for rendering user-submitted content, documentation previews, or README files.
shopify-hydrogen
Hydrogen storefront implementation cookbooks. Some of the available recipes are: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Legacy Customer Account Flow, Markets, Partytown + Google Tag Manager…
gsap-plugins
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG…
shopify-pos-ui
Build retail point-of-sale applications using Shopify's POS UI components. These components provide a consistent and familiar interface for POS applications. POS UI Extensions also supports scaffolding new POS extensions using Shopify CLI commands. Keywords: POS, Retail, smart grid.
gsap-core
Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion…
gsap-scrolltrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is…