Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/hybridlabor-api/bdb-dev-optimized-agent-skillsnpx agentmods add skills/hybridlabor-api/bdb-dev-optimized-agent-skills/frontend-dev-guidelinesWrote 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/hybridlabor-api/bdb-dev-optimized-agent-skills/frontend-dev-guidelines)<a href="https://agentmods.dev/skills/hybridlabor-api/bdb-dev-optimized-agent-skills/frontend-dev-guidelines"><img src="https://agentmods.dev/badge/skills/hybridlabor-api/bdb-dev-optimized-agent-skills/frontend-dev-guidelines/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/hybridlabor-api/bdb-dev-optimized-agent-skills/frontend-dev-guidelines"><img src="https://agentmods.dev/badge/skills/hybridlabor-api/bdb-dev-optimized-agent-skills/frontend-dev-guidelines.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00037 | $0.02259 |
| Opus 5.5 | $0.00015 | $0.00904 |
| Sonnet 5.5 | $0.00007 | $0.00452 |
| Haiku 4.5 | $0.00004 | $0.00226 |
Grade A, and why
frontend-dev-guidelines 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.
How it starts
The opening of the file, as written. The whole thing — 395 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Development Guidelines
(React · TypeScript · Suspense-First · Production-Grade)
You are a senior frontend engineer operating under strict architectural and performance standards.
Your goal is to build scalable, predictable, and maintainable React applications using:
- Suspense-first data fetching
- Feature-based code organization
- Strict TypeScript discipline
- Performance-safe defaults
This skill defines how frontend code must be written, not merely how it can be written.
1. Frontend Feasibility & Complexity Index (FFCI)
Before implementing a component, page, or feature, assess feasibility.
FFCI Dimensions (1–5)
| Dimension | Question |
|---|---|
| Architectural Fit | Does this align with feature-based structure and Suspense model? |
| Complexity Load | How complex is state, data, and interaction logic? |
| Performance Risk | Does it introduce rendering, bundle, or CLS risk? |
| Reusability | Can this be reused without modification? |
| Maintenance Cost | How hard will this be to reason about in 6 months? |
Score Formula
FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance Cost)
Range: -5 → +15
Interpretation
| FFCI | Meaning | Action |
|---|---|---|
| 10–15 | Excellent | Proceed |
| 6–9 | Acceptable | Proceed with care |
| 3–5 | Risky | Simplify or split |
| ≤ 2 | Poor | Redesign |
2. Core Architectural Doctrine (Non-Negotiable)
1. Suspense Is the Default
useSuspenseQueryis the primary data-fetching hook- No
isLoadingconditionals - No early-return spinners
2. Lazy Load Anything Heavy
What ships with it
10 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.
- resources/common-patterns.md 8.2 KB
- resources/complete-examples.md 24 KB
- resources/component-patterns.md 11 KB
- resources/data-fetching.md 19 KB
- resources/file-organization.md 12 KB
- resources/loading-and-error-states.md 12 KB
- resources/performance.md 9.4 KB
- resources/routing-guide.md 7.0 KB
- resources/styling-guide.md 7.7 KB
- resources/typescript-standards.md 8.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.
- 1mo ago First seen · 395 lines · 37 tokens per session scan A 55a1c0360587
frontend-dev-guidelines is a skill published in the GitHub repository hybridlabor-api/bdb-dev-optimized-agent-skills (6 stars, last pushed 14d ago), licensed Apache-2.0. It adds 37 tokens to every session and 2,259 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-09-03.
Other skills, from other repositories
agent-spec-mobile-react-native
Agent skill for spec-mobile-react-native - invoke with $agent-spec-mobile-react-native.
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
moai-ref-react-patterns
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design…
moai-domain-uiux
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
rn-best-practices
This skill should be used when writing or reviewing React Native / Expo code — before writing list rendering, animations, data fetching, component APIs, navigation, or image/media UI — and when asked to "review best practices", "check performance", "optimize renders", "review list rendering", "check animation…