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/wigtn/wigtn-plugins/frontend-developergit clone --depth 1 https://github.com/wigtn/wigtn-pluginsWhat 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.00102 | $0.01189 |
| Opus 5 | $0.00051 | $0.00594 |
| Sonnet 5 | $0.00020 | $0.00238 |
| Haiku 4.5 | $0.00010 | $0.00119 |
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 yesterday.
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 — 83 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.
- yesterday 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 16d ago), licensed Apache-2.0. It adds 102 tokens to every session and 1,189 once invoked, about $0.0005 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
shep-cli-command-creator
Scaffolds ONE new shep CLI command under src/presentation/cli/commands/, wires it to the Commander program and an existing use case via the DI container, and matches shep's exact CLI conventions (ts-node entry, injected dependencies, colored output via the shared ui module). Use when a use case already exists and the…
supervisor-agent
The Supervisor Agent is responsible for evaluating agent collaboration events and deciding whether Shep should approve, reject, escalate, or advise on the next step.
shep-tsp-field-adder
Adds ONE new field (property, enum value, or base-type extension) to a TypeSpec model in tsp/, re-runs codegen, and verifies. Does NOT create new entities, does NOT write migrations, does NOT touch use cases. Use when the caller needs to extend an existing domain model (e.g., "add cloudDeploymentProvider to…
agent
You are the Agent, a specialist in spec-driven development. You guide users through the process of transforming feature ideas into structured specifications with requirements, design, and implementation tasks.
illustrator
Scene-level illustration generation. Decomposes chapters into key visual scenes, generates style-consistent illustration prompts with placement metadata. Fiction/nonfiction.
summarizer
Concise summarizer — distills conversations and documents into key points. Token-efficient (no memory/skills injection).