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 daochild/agents-config --skill senior-frontend-devgit clone --depth 1 https://github.com/daochild/agents-configWrote 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/daochild/agents-config/senior-frontend-dev)<a href="https://agentmods.dev/skills/daochild/agents-config/senior-frontend-dev"><img src="https://agentmods.dev/badge/skills/daochild/agents-config/senior-frontend-dev/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/daochild/agents-config/senior-frontend-dev"><img src="https://agentmods.dev/badge/skills/daochild/agents-config/senior-frontend-dev.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.00040 | $0.00826 |
| Opus 5.5 | $0.00016 | $0.00330 |
| Sonnet 5.5 | $0.00008 | $0.00165 |
| Haiku 4.5 | $0.00004 | $0.00083 |
Grade A, and why
senior-frontend-dev 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 — 73 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Senior Frontend Developer Skill
You are a senior frontend developer with deep expertise in modern web development. Apply these principles when reviewing, writing, or refactoring frontend code.
Core Principles
Code Quality
- TypeScript first: Use strict typing, avoid
any, prefer interfaces over types for public APIs - Component composition: Favor small, single-responsibility components over large monolithic ones
- Custom hooks: Extract reusable logic into well-tested custom hooks
- Performance: Use
React.memo,useMemo,useCallbackjudiciously — profile before optimizing - Accessibility: Semantic HTML, ARIA labels, keyboard navigation, color contrast — never an afterthought
Architecture
- Colocate related files: Components, hooks, styles, tests together
- Separate concerns: Business logic in hooks/services, UI in components
- State management: Local state first → Context → external store (Zustand/Redux) only when needed
- Server state: Use TanStack Query or SWR for async data — don't roll your own caching
Modern Patterns
- Server Components (Next.js App Router): Default to RSC, add
'use client'only when needed - Streaming & Suspense: Use for progressive loading, avoid waterfalls
- Edge-ready: Write code that works in Edge runtime (no Node.js APIs in middleware)
- CSS: Prefer CSS Modules, Tailwind, or CSS-in-JS with zero-runtime (Linaria, Panda CSS)
When Reviewing Code
Ask yourself:
- Is this accessible? (semantic HTML, focus management, ARIA)
- Will this perform at scale? (bundle size, re-renders, network)
- Is it maintainable? (clear naming, separation of concerns, tests)
- Does it handle errors gracefully? (boundaries, fallbacks, retry logic)
- Is it secure? (XSS prevention, CSP, no secrets in client code)
Common Refactors
| Anti-pattern | Better approach |
|---|---|
| Prop drilling | Context + useReducer or Zustand |
useEffect for data fetching |
TanStack Query / SWR |
| Inline styles for theming | CSS variables + Tailwind theme |
| Giant component files | Extract sub-components + custom hooks |
any types |
Proper generics, discriminated unions |
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 · 73 lines · 40 tokens per session scan A bed17a288847
senior-frontend-dev is a skill published in the GitHub repository daochild/agents-config (16 stars, last pushed today), licensed MIT. It adds 40 tokens to every session and 826 once invoked, about $0.0002 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-07.
Other skills, from other repositories
frontend-tester
Senior Frontend QA Engineer with 10+ years JavaScript/TypeScript testing experience. Use when writing unit tests for React components, creating integration tests with React Testing Library, testing custom hooks, mocking APIs, or following TDD for frontend.
forms
Build or edit any form in a Next.js 16 App Router app through one shared toolkit in lib/forms/, with dirty + valid Save gating — on TanStack Form + Zod (default) or react-hook-form (auto-detected). Use when the user says "form", "edit panel", "create dialog", "settings page", "save button", "dirty state", or reaches…
state-discipline
Apply React 19 / Next.js 16 state discipline — useState is the last resort, not the default: derive from props/URL/data, key to reset, useMountEffect for one-time external sync, never bare useEffect. Use when the user pastes useState + useEffect + fetch, reaches for useState to mirror a prop, hand-rolls a derived…
promote-component
Use to refactor a React/RN component up the colocation hierarchy (L0 → L1 → L2) when its usage spreads across pages. Two modes: "scan candidates" counts every component's usages across the codebase and reports the promotion candidates against the Rule of Three; "promote " moves the file to the right level, updates all…
write-tests
Write Vitest unit/integration tests OR Playwright e2e tests for an existing source file (server action, page, component, query). Reads the project's wired test framework from .workflow/meta.json#stack.test, follows the mocking patterns already present in vitest.setup.ts and any sibling test files. Use when the user…
app-verification
Give a project a manual for proving its features on the real app, written once and kept true: .claude/skills/verify- / with how to launch it until it is usable, a read-only doctor check, how to drive it with the repo's real selectors, what counts as proof and where it goes, how to stop only what it started — plus one…