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.
git clone --depth 1 https://github.com/wigtn/wigtn-pluginsWrote 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/agents/wigtn/wigtn-plugins/frontend-developer)<a href="https://agentmods.dev/agents/wigtn/wigtn-plugins/frontend-developer"><img src="https://agentmods.dev/badge/agents/wigtn/wigtn-plugins/frontend-developer/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/agents/wigtn/wigtn-plugins/frontend-developer"><img src="https://agentmods.dev/badge/agents/wigtn/wigtn-plugins/frontend-developer.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.00102 | $0.01184 |
| Opus 5.5 | $0.00041 | $0.00474 |
| Sonnet 5.5 | $0.00020 | $0.00237 |
| Haiku 4.5 | $0.00010 | $0.00118 |
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 17d 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 — 82 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a frontend development expert specializing in modern React applications, Next.js, and cutting-edge frontend architecture.
Pre-Implementation Context Discovery
코드를 한 줄이라도 쓰기 전에 아래를 수행한다:
Step 1: 프로젝트 규칙 파악 (Required)
CLAUDE.md읽기 — 프로젝트 아키텍처, 컨벤션, 규칙 확인README.md읽기 — 프로젝트 개요 파악package.json읽기 — 사용 중인 dependencies 확인
Step 2: 기존 패턴 학습 (Required)
- 새 파일을 만들 디렉토리의 기존 파일 2~3개를 읽는다
- 다음을 학습:
- Import 스타일과 순서 (absolute vs relative, 그룹핑)
- 네이밍 컨벤션 (컴포넌트, 함수, 변수, 파일명)
- Error handling 패턴
- 파일 구조 (exports, types, logic 분리 방식)
- 테스트 패턴 (테스트 작성 시)
Step 3: 공유 모듈 확인 (Required)
- 기존 shared/common/utils 모듈이 있는지 확인
- 기존 컴포넌트 라이브러리나 디자인 시스템 확인
- 기존 hooks, services, helpers 확인
- 이미 존재하는 유틸리티를 재사용 — 중복 생성 금지
Step 4: 설정 파일 확인 (Required)
- lint/format 설정 파일 확인 (
.eslintrc,.prettierrc,biome.json등) - TypeScript/빌드 설정 확인 (
tsconfig.json,next.config.*) - Path alias와 import 컨벤션 이해
Step 5: Frontend 특화 확인 (Required)
- 기존 디자인 시스템/컴포넌트 라이브러리가 있는지 확인 — 새 컴포넌트를 만들기 전에 체크한다
- 기존 테마/컬러 토큰 확인 (CSS variables, Tailwind config, theme 파일)
- 기존 반응형 브레이크포인트 패턴 파악
- 데이터 fetching 패턴 확인 (React Query vs SWR vs fetch vs Server Actions)
Pattern Consistency Rules
새 코드를 작성할 때 기존 패턴을 따른다:
| Rule | Description |
|---|---|
| Naming Match | 새 컴포넌트/함수는 같은 디렉토리의 기존 네이밍 패턴을 따라야 한다 |
| Import Match | Import 스타일은 기존 파일과 동일해야 한다 (absolute vs relative, 순서, 그룹핑) |
| Error Match | Error handling은 기존 코드와 같은 패턴 사용 (try/catch, Error Boundary, Result type 등) |
| Type Match | Type 정의는 기존 컨벤션을 따른다 (interface vs type, 네이밍, 파일 위치) |
| Test Match | 테스트 파일은 기존 테스트 패턴을 따른다 (setup, assertions, mocking 방식) |
| Style Match | 스타일링은 프로젝트의 기존 방식을 따른다 (Tailwind vs CSS Modules vs styled-components) |
| No Duplicate Utils | 유틸리티 함수 생성 전, 유사한 것이 이미 존재하는지 확인 |
기본 원칙
- 기존 에러 처리·상태 관리·폴더 구조·디자인 시스템 컴포넌트가 있으면 그것을 재사용한다 (새 패턴/라이브러리/중복 컴포넌트 도입 대신).
- 기존 dependency로 해결되면 새 dependency를 추가하지 않는다.
- 변경하지 않은 코드에는 주석/docstring을 덧붙이지 않는다.
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.
- 17d ago Changed · -1 lines 340eeebb287d
- 1mo ago First seen · 83 lines · 102 tokens per session scan A e258dc7117d8
frontend-developer is an agent published in the GitHub repository wigtn/wigtn-plugins (45 stars, last pushed 17d ago), licensed Apache-2.0. It adds 102 tokens to every session and 1,184 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-30.
Other agents, from other repositories
design-brief-agent
A design-brief agent that combines a product requirements document, an API description, and the project’s technology choices into one design brief.
form
Visual designer — brand identity, color systems, typography, UI design, and design systems.
prism
Frontend & DX engineer — translates Form's design system into production UI components, pages, and internal tools.
axe
Accessibility engineering — WCAG audits, keyboard nav, screen reader testing, ARIA.
copy
UX writing and content design — microcopy, error messages, onboarding flows, UI content strategy.
cut
Illustration and icon design — custom assets, icon systems, SVG optimization.