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 m3taz-ahmed/ai-globals --skill frontend-frameworks-lordgit clone --depth 1 https://github.com/m3taz-ahmed/ai-globalsWrote 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/m3taz-ahmed/ai-globals/frontend-frameworks-lord)<a href="https://agentmods.dev/skills/m3taz-ahmed/ai-globals/frontend-frameworks-lord"><img src="https://agentmods.dev/badge/skills/m3taz-ahmed/ai-globals/frontend-frameworks-lord/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/m3taz-ahmed/ai-globals/frontend-frameworks-lord"><img src="https://agentmods.dev/badge/skills/m3taz-ahmed/ai-globals/frontend-frameworks-lord.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.00020 | $0.00833 |
| Opus 5.5 | $0.00008 | $0.00333 |
| Sonnet 5.5 | $0.00004 | $0.00167 |
| Haiku 4.5 | $0.00002 | $0.00083 |
Grade A, and why
frontend-frameworks-lord 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
[SKILL] frontend-frameworks-lord [OBJ] Architect and optimize frontend stacks across React, Vue, Angular, Svelte. [RULES]
- [CMD] IDs: React
/reactjs/react.dev, Vue/websites/vuejs, Angular/websites/angular_dev, Svelte/websites/svelte_dev_svelte; Tailwind CSS/tailwindlabs/tailwindcss.com; page sectionspage-sections-lord. - [REQ] Pillar coverage: component architecture, reactivity models, state management, routing/navigation, rendering strategies (CSR/SSR/SSG/islands), performance, DX/build tooling, accessibility/i18n, testing.
- [REQ] Query framework ID with full question + topic (hooks, signals, routing, performance).
- [REQ] For landing-page/section-based UIs, query
page-sections-lordandbackend-frameworks-lord; render blocks bytypewith one component per section; keep props flat underdata. - [REQ] Compare frameworks by API and rendering behavior, not brand.
- [REQ] Mention version-sensitive APIs; default to latest stable major.
- [REQ] Reactivity models are the deep difference: React = re-render on state change (immutability + memo discipline), Vue = proxy-based fine-grained (mutate, framework tracks), Svelte = compile-time reactivity (assignments are updates), Angular = signals + RxJS coexistence. State advice must match the model — mutating state in React or spreading-rebuilding in Vue is fighting the framework.
- [REQ] React specifics: hooks rules are architectural (conditional hooks break state); effects are for syncing with EXTERNAL systems — derived data = compute in render/memo, not effect-chains; Server Components change the data-flow model (server by default,
'use client'boundaries deliberate); concurrent features (transitions, Suspense) are the modern path. - [REQ] State placement: URL for sharable/navigation state, server cache (TanStack Query/SWR) for remote data, context for low-churn cross-cutting, store (Zustand/Pinia/NgRx) only for true shared client state. The biggest perf bug is usually state living too high or in the wrong taxonomy.
- [REQ] Rendering strategy per route: SSG content pages, SSR/streaming for personalized public, SPA for auth-gated apps, islands/partial hydration for mostly-static pages. Hydration cost + bundle per route are budgets.
- [REQ] List & input perf: keyed lists always (index keys = state bugs under reorder), virtualize >~100 rows, debounce search inputs, uncontrolled inputs where re-render cost matters, form libraries (RHF/VeeValidate/Angular Reactive) over hand-rolled for non-trivial forms.
- [REQ] Component boundaries: presentational vs container split where complexity demands, props down/events up (React/Angular) vs v-model/emits (Vue), slots/content-projection for composition. Shared primitives in a design system, page components stay thin.
- [REQ] Framework selection honesty: React = ecosystem + hiring + RSC direction; Vue = gentlest learning curve + best template ergonomics; Angular = batteries-included enterprise (DI, RxJS, opinionated — heavier ramp); Svelte = least runtime + best DX, smaller ecosystem. Pick for team + app shape, not hype.
- [REQ] Testing per model: component tests in the framework's idiom (RTL/Vue Test Utils/TestBed), interaction tests over implementation details, E2E thin layer on critical flows only.
- [PROHIBIT] Effect-chains for derived data, global stores for server cache, conditional hooks, index keys on dynamic lists,
anyto silence framework typing, or mixing paradigm-adjacent patterns (RxJS-style streams inside React renders).
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 Changed · +9 lines a07c67471070
- 1mo ago First seen · 14 lines · 20 tokens per session scan A b68a4e328b6a
frontend-frameworks-lord is a skill published in the GitHub repository m3taz-ahmed/ai-globals (5 stars, last pushed 5d ago), licensed MIT. It adds 20 tokens to every session and 833 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
ui-toolkit/web
Reference skill for Zoom Video SDK UI Toolkit. Use after routing to a web video workflow when you want prebuilt React UI instead of building a fully custom Video SDK interface.
zoom-meeting-sdk-web-component-view
Zoom Meeting SDK Web - Component View. Embeddable Zoom meeting components with Promise-based API for flexible integration. Ideal for React/Vue/Angular apps and custom layouts. Uses ZoomMtgEmbedded with async/await patterns and embeddable UI containers.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
tanstack-form
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.
add-localization
Adds or extends multilingual localization in a Power Pages code-site SPA. Use whenever the user asks to translate, localize, internationalize, support multiple languages, add a language selector, add locale routes, repair an i18n setup, or add languages to an existing React, Vue, Angular, or Astro Power Pages site.
web-development
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.