agentmods.dev

frontend-engineer

frontend-engineer is an agent for Claude Code from steve-magne/hookstack. It costs 94 tokens per session (746 once invoked), scanned A, original, MIT.

A front-end coding role for Hookstack's website, built with Next.js, React, TypeScript, Tailwind, Motion, and Zustand. It knows the project's component, animation, accessibility, and translation conventions.

In plain words
What is it for?
Use it to create or modify React components, pages, catalogue screens, the HookConfigurator, animations, and the shared design system.
Why use it?
It helps changes fit the existing design system and avoid runtime errors caused by the repository's specific animation setup. It also keeps motion accessible for users who prefer reduced movement.

Agent for Claude Code

Written for Claude Code: installed under .claude/.

not rated 7repo 4d ago A scan 94 tokens original MIT

Good fit Use it to create or modify React components, pages, catalogue screens, the HookConfigurator, animations, and the shared design system.

Compare 6 agents from other repositories ↓
Install with agentmods
npx agentmods add agents/steve-magne/hookstack/frontend-engineer
View source ↗ steve-magne/hookstack hookstack.app
Install

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.

Clone the repo
git clone --depth 1 https://github.com/steve-magne/hookstack

Made for: Claude Code.

Wrote 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.

agentmods badge for frontend-engineer

README.md
[![agentmods](https://agentmods.dev/badge/agents/steve-magne/hookstack/frontend-engineer/github.svg)](https://agentmods.dev/agents/steve-magne/hookstack/frontend-engineer)
Your own site
<a href="https://agentmods.dev/agents/steve-magne/hookstack/frontend-engineer"><img src="https://agentmods.dev/badge/agents/steve-magne/hookstack/frontend-engineer/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.

agentmods 80×15 button for frontend-engineer

Your own site · 80×15
<a href="https://agentmods.dev/agents/steve-magne/hookstack/frontend-engineer"><img src="https://agentmods.dev/badge/agents/steve-magne/hookstack/frontend-engineer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 94 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 746 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00094 $0.00746
Opus 5.5 $0.00038 $0.00298
Sonnet 5.5 $0.00019 $0.00149
Haiku 4.5 $0.00009 $0.00075

Measured 1mo ago against content hash 7f50aa911be2, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-engineer 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.

.claude/agents/frontend-engineer.md · 48 lines

How it starts

The opening of the file, as written. The whole thing — 48 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Frontend Engineer — Hookstack

Mission

Implémenter ou modifier l'UI du site src/ (Next.js 15 App Router + TypeScript + Tailwind v4 + Motion + Zustand). Tu écris du code qui respecte les conventions du repo au premier coup, sans exploratoire coûteux.

Stack & conventions NON NÉGOCIABLES (pièges du repo)

  • Motion (ex-Framer) — m.* uniquement, jamais motion.*. <MotionProvider> utilise LazyMotion features={domMax} strict → motion.* lève une erreur runtime. Import depuis motion/react.
  • Langage motion unique : tout spring / easing / variant vient de src/lib/motion.ts. Ne jamais redéfinir une physique en local — l'ajouter au fichier si besoin.
  • A11y automatique : MotionConfig reducedMotion="user" gère prefers-reduced-motion. Aucune media query motion manuelle, aucun @keyframes pour des animations JS-pilotées.
  • Transform/opacity seulement (+ layout pour le FLIP). Jamais d'animation brute de width/height/top/left.
  • Une entrée = une sortie : tout élément conditionnel animé vit sous <AnimatePresence> avec un exit.
  • Doser : une animation sert la compréhension ou le feedback, sinon elle n'existe pas.
  • Lire DESIGN.md avant toute évolution visuelle majeure.

Composants & état

  • Tous les composants src/components/ sont 'use client' (Zustand + state).
  • Les pages src/app/ sont des Server Components — elles importent T depuis src/lib/i18n.ts.
  • Textes UI : anglais uniquement, dans src/lib/i18n.ts (constante T). Les composants client utilisent useT() depuis src/lib/locale-context.tsx. Pas d'i18n, pas de routing /[locale].
  • État global : Zustand persisté dans src/store/selection.ts (clé hookstack-selection).
  • Catalogue : src/lib/hooks.ts (allHooks) charge registry/registry.json. Type Hook dans src/types/hook.ts.
  • Config générée : src/lib/mergeConfig.ts fusionne les fragments implementation.config.hooks.

Routes

/ (Home = hero + catalogue), /hook/[slug] (détail), /evolution (timeline).

Read the full file on GitHub · 48 lines

Changes

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.

  1. 1mo ago First seen · 48 lines · 94 tokens per session scan A 7f50aa911be2

Subscribe to this mod's changes

frontend-engineer is an agent published in the GitHub repository steve-magne/hookstack (7 stars, last pushed 4d ago), licensed MIT. It adds 94 tokens to every session and 746 once invoked, about $0.0004 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.

Claude CodeFrontendReactaiai-agentsanthropicclaudecli
Related

Other agents, from other repositories

atomic-auditor

Final gate for a finished implementation. Dispatched exactly once after the implement-review loop goes green, never per iteration. Never touches the repo; its one write is the audit report into the task scratchpad. Audits the delivered work as a whole: cumulative spec compliance, cross-iteration coherence…

damusix/atomic-claude · 169 tokens

update-process-agent

UPDATE PROCESS MODE - Analyze execution, generate rule improvements, update plan files and context. Use after completing EXECUTE mode to reconcile deviations and capture learnings.

opencue/cuecards · 35 tokens

code-reviewer

Comprehensive code review with scout-based edge case detection. Use after implementing features, before PRs, for quality assessment, security audits, or performance optimization.

opencue/cuecards · 35 tokens

verifier

Post-execution verification agent. Runs every acceptance criterion, checks requirement coverage, and produces a PASS/FAIL report with evidence. Never skips a criterion.

randomittin/heimdall · 33 tokens

sites-dev-alpha

Desenvolvedora frontend para sites (React, Next.js, Tailwind, shadcn/ui, componentes de UI, landing pages, lógica client-side). Use para stories de frontend e implementação de UI em projetos de site.

joaoguirunas/team-os · 50 tokens

playwright-test-generator

Generate Playwright e2e tests for the admin frontend panel.

RaNDoM6913/claude-code-superkit · 17 tokens