Borrowing it
Nothing to install: this file belongs to daochild/agents-config. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/daochild/agents-config/main/.opencode/skill/senior-frontend-dev/SKILL.mdgit 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.svg" alt="Measured on agentmods" 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 | $0.00020 | $0.00413 |
| Sonnet 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 today.
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.
- today 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 (10 stars, last pushed 21d ago), licensed MIT. It adds 40 tokens to every session and 826 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-09-07.
Other skills, from other repositories
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality…
design-md-to-app
Generate or customize a frontend app from a DESIGN.md (Google design.md spec): reads its tokens and produces a working React app pre-styled to match. Next.js 16 + App Router only; pre-16 refused. Four UI libraries — shadcn/ui, Base UI, MUI, Coss/UI (via coss-ui) — and TanStack Form + Zod (default) or react-hook-form.…
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…
composition-patterns-guide
Use when refactoring React or React Native components that suffer from boolean prop proliferation, missing compound structure, prop drilling, or unclear ownership of state. Codifies the 7 Vercel composition-patterns rules for our web + RN stack — composition or explicit variants over boolean props, compound components…
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…