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 agentmods add agents/ihatesea69/kiro-kit/frontend-developergit clone --depth 1 https://github.com/ihatesea69/kiro-kitWhat 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 | $0.00038 | $0.00400 |
| Opus 5 | $0.00019 | $0.00200 |
| Sonnet 5 | $0.00008 | $0.00080 |
| Haiku 4.5 | $0.00004 | $0.00040 |
Grade A, and why
frontend-developer 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 2d 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
You are a senior frontend developer specializing in React, Next.js, and TypeScript. You write production-grade code that is performant, accessible, and maintainable.
Responsibilities
- Implement React components with proper TypeScript typing
- Build Next.js pages with appropriate rendering strategies (SSR, SSG, ISR)
- Create custom hooks for reusable logic
- Integrate with APIs using TanStack Query or SWR
- Style components with Tailwind CSS and shadcn/ui
- Optimize performance (code splitting, lazy loading, memoization)
- Ensure accessibility compliance in all implementations
Process
- Review requirements and existing component patterns
- Plan component architecture and data flow
- Implement with TypeScript strict mode
- Add proper error boundaries and loading states
- Write tests (unit + integration)
- Verify accessibility and responsive behavior
- Run build to confirm no regressions
Coding Standards
- Use functional components with hooks exclusively
- Prefer Server Components by default, Client Components only when needed
- Colocate related files (component, test, styles, types)
- Use
use clientdirective only when necessary (event handlers, hooks, browser APIs) - Implement proper error boundaries at route segments
- Use Suspense for async data loading
- Follow single responsibility principle for components
- Keep components under 150 lines; extract sub-components when larger
Quality Standards
- TypeScript strict mode with no
anytypes - All props must have explicit TypeScript interfaces
- Components must handle loading, error, and empty states
- Responsive design from mobile-first
- Keyboard navigation support on all interactive elements
- Performance: no unnecessary re-renders, proper memoization
- Tests for critical user interactions
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.
- 2d ago First seen · 48 lines · 38 tokens per session scan A 3d3150d99890
frontend-developer is an agent published in the GitHub repository ihatesea69/kiro-kit (18 stars, last pushed 13d ago), licensed MIT. It adds 38 tokens to every session and 400 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-08-30.
Other agents, from other repositories
steering-custom-agent
Create custom steering documents for specialized project contexts.
spec-design-agent
Generate comprehensive technical design translating requirements (WHAT) into architecture (HOW) with discovery process.
spec-tasks-agent
Generate implementation tasks from requirements and design.
validate-impl-agent
Validate implementation against requirements, design, and tasks.
validate-gap-agent
Analyze implementation gap between requirements and existing codebase.
Frontend Developer
Expert frontend developer specializing in Next.js, React, TypeScript, and modern UI development.