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 skills add sh5623/fe-rail --skill fe-specgit clone --depth 1 https://github.com/sh5623/fe-railWrote 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/sh5623/fe-rail/fe-spec)<a href="https://agentmods.dev/skills/sh5623/fe-rail/fe-spec"><img src="https://agentmods.dev/badge/skills/sh5623/fe-rail/fe-spec/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/skills/sh5623/fe-rail/fe-spec"><img src="https://agentmods.dev/badge/skills/sh5623/fe-rail/fe-spec.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.00059 | $0.02423 |
| Opus 5 | $0.00030 | $0.01211 |
| Sonnet 5 | $0.00012 | $0.00485 |
| Haiku 4.5 | $0.00006 | $0.00242 |
Grade A, and why
fe-spec 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 4d 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 — 147 lines — stays where its author put it; the contents beside it link to each section on GitHub.
FE Spec 작성 스킬
사용자의 기능 설명을 받아 실행 가능한 프론트엔드 스펙으로 변환합니다.
When to Use
- 새로운 페이지나 컴포넌트 개발 시작 전
- 기획 내용을 구체적인 개발 태스크로 나눠야 할 때
feature.md가 없거나 내용이 불충분할 때
Instructions
Phase 0 — 에이전트 분석 (선택적 위임)
요구사항이 복잡하거나 디자인 시안이 있는 경우, 스펙 작성 전 아래 에이전트에 위임한다:
| 상황 | 위임 에이전트 |
|---|---|
| 요구사항이 모호하거나 갭이 있을 때 | fe-analyst — 6갭 분석 후 명확화 질문 도출 |
| PPT/기획서·화면설계서가 있을 때 | fe-deck-reader — 다중 슬라이드를 [정책·화면·흐름]으로 분해 (→ 화면은 fe-vision, 정책 갭은 fe-analyst 로 이어짐) |
| Figma·스크린샷·디자인 시안(개별 화면)이 있을 때 | fe-vision — 레이아웃·컴포넌트·색상 정밀 추출 |
| 특정 라이브러리·API 조사가 필요할 때 | fe-researcher — 공식 문서 기반 조사 |
| RSC 경계·아키텍처·스타일링 전략(Tailwind/shadcn) 결정이 필요할 때 | fe-architect — 구조 자문. 브리프에 이 스킬의 base directory 기준 ../../docs/framework-rules.md 절대경로를 넘긴다(모노레포면 ../../docs/monorepo.md 도) — 에이전트는 플러그인 트리 위치를 모르고, 이 파일은 소비자 세션에 자동으로 로드되지 않는다 |
PPT 입력 처리:
.pptx는 직접 읽을 수 없다. PDF 로 변환(파워포인트/Keynote 의 PDF 내보내기) 해 전달받는 것을 기본으로 한다 — 정책 텍스트와 화면 목업이 모두 보존된다. 슬라이드별 PNG 묶음도 가능하나 텍스트가 OCR 한계를 받는다. 변환된 기획서는fe-deck-reader가 분해한 뒤, 그 산출물을fe-vision·fe-analyst가 이어받는다. (OneDrive/SharePoint 의 기획서는 Microsoft 365 커넥터로 가져올 수 있으나, 슬라이드를 시각적으로 렌더해 주지 않을 수 있어 화면 분석에는 PDF 변환이 더 안전하다.)
Phase 1 — 목적 명확화
사용자에게 반드시 확인:
- 누가 쓰는가? (사용자 페르소나)
- 무엇을 해결하는가? (핵심 문제)
- 완료의 기준은? (Acceptance Criteria)
- 비정상·엣지 동작은? (로딩 / 빈 상태 / 에러·네트워크 실패 / 권한 없음 — happy 경로만 정의하지 않는다)
Phase 2 — 스펙 문서 생성
feature.md 파일을 프로젝트 루트에 생성합니다:
# [기능명]
## 목적
## 화면 흐름
> PPT/기획서 기반이면 `fe-deck-reader` 분해 결과(화면 인벤토리·흐름)를 옮긴다. 각 화면의 충실도 등급(고증 시안/와이어프레임/스케치)을 함께 적어 구현 정밀도 기준을 명확히 한다.
- 화면 목록: (화면ID — 화면명 — 충실도 등급) ※ 화면ID 있으면 라우트·네이밍 근거
- 레퍼런스 (고증 시안 한정): 화면ID → Figma 노드 URL / 시안·슬라이드 이미지 경로. fe-start Phase 4.5 시각 충실도 게이트(`fe-vision` 대조 모드)의 비교 기준이 된다. 고증 아니면 비움.
- 전환: (화면 A —[트리거]→ 화면 B, 유형: 페이지/모달/토스트)
## 컴포넌트 구조
- 신규:
- 수정:
## 기술 상세
- 관련 페이지/라우트:
- API 엔드포인트:
- 상태관리: (예: Zustand·Pinia·NgRx | TanStack Query | 로컬 state)
- 스타일링: (Tailwind 클래스 / shadcn/ui 컴포넌트 / 커스텀 CSS)
- 의존 컴포넌트:
## 정책/규칙
> 기획서에 **명시된** 비즈니스 규칙을 옮긴다 — 규칙마다 **대상(화면ID·요소)**과 출처 슬라이드를 유지한다. `fe-deck-reader` 의 정책 표가 1차 입력. 미명시(행간) 규칙은 여기 적지 말고 `fe-analyst` 갭으로 분리한다.
- 조건부 동작: (예: 재고 0이면 담기 비활성)
- 권한 분기: (역할별 노출/동작 차이)
- 검증 규칙: (필수·형식·길이·범위)
- 상태 전이: (상태 흐름·되돌림 제약)
- 인터랙션: (저장→토스트→목록 갱신 등 액션 결과)
- 계산·로직: (금액·할인 등 산식)
## 시나리오 (정상 + 비정상)
> 비정상(non-happy)을 반드시 함께 명시한다 — 누락 시 happy-only 테스트가 만들어진다. fe-test-author가 이 목록을 그대로 테스트로 옮긴다.
- 정상: (핵심 사용자 흐름)
- 로딩: (요청 진행 중 — 스켈레톤/스피너)
- 빈 상태: (결과 0건 — 안내 문구·CTA)
- 에러: (4xx/5xx·네트워크 실패 — 에러 UI·재시도)
- 엣지: (권한 없음·경계값·긴 텍스트 등 해당 시)
## 완료 기준 (Acceptance Criteria)
- [ ] 타입 에러 0개 (프로젝트 typecheck 스크립트 통과)
- [ ] 린터(ESLint/Biome) 경고 0개
- [ ] 테스트 통과 — 정상 흐름 + **비정상 경로(로딩·빈 상태·에러)** 커버 (happy-only 금지)
- [ ] (E2E/Playwright 존재 시) 비정상 경로를 네트워크 모킹(`page.route()`)으로 검증
- [ ] 빌드 성공
- [ ] 반응형: 모바일(375px) / 태블릿(768px) / 데스크탑(1280px)
- [ ] 접근성: 키보드 네비게이션, aria-label, 본문 대비 ≥ 4.5:1
- [ ] (다크 모드 지원 시) 라이트/다크 모두 정상 렌더
- [ ] (DESIGN.md 존재 시) DESIGN.md 의 Bans(anti-slop) 위반 없음
- [ ] (고증 시안 화면 한정) 시각 충실도 — 구현 스크린샷이 레퍼런스와 대조해 임계 이상 (fe-vision 대조 모드; PPT 슬라이드는 구조 일치 기준, 색·타이포 제외)
## 금지 사항
- [ ] any 타입 사용
- [ ] 컴포넌트 라이프사이클에서 서버 데이터 직접 fetch (useEffect fetch)
- [ ] 컴포넌트에 비즈니스 로직 직접 작성
- [ ] 하드코딩 색상 (디자인 토큰 사용)
- [ ] (env 모듈 존재 시) import.meta.env 직접 접근
- [ ] 외부 링크에 rel="noopener noreferrer" 누락 (target="_blank" 단독)
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.
- 4d ago Changed c85265b18fce
- 10d ago First seen · 147 lines · 59 tokens per session scan A 55aa266789e1
fe-spec is a skill published in the GitHub repository sh5623/fe-rail (1 stars, last pushed 5d ago), licensed MIT. It adds 59 tokens to every session and 2,423 once invoked, about $0.0003 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-31.
Other skills, from other repositories
spotpatch
A development workflow for React that connects a selected page element to its JSX or TSX source code and gathers context for review.
docs-release-notes
Use when a change needs a user-visible release-note, changelog, or changeset entry — "add a release note", "add a changeset for this", "what goes in the changelog?", "write up what shipped", "note this for the next release" — or when finalizing a branch whose customer-visible features, bug fixes, or UI changes should…
x-cr
A software-correctness investigation skill for finding why code behaves differently from what was expected. It uses evidence from code paths, specifications, tests, logs, and changes to assess possible causes.
x-fix
A bug-fixing skill with separate paths for directly reported bugs, correctness-review findings, and failed verification or quality-gate reports. It records completed fixes and their validation in project reports.
rubber-ducky
Use when you've planned a non-trivial change and are about to implement it, finished a complex or multi-file piece of work, just wrote tests, or are stuck on repeated failures — and any time the user says "rubber duck this", "rubber ducky", "get a second opinion", "sanity-check my plan", "poke holes in this", "what am…
figma-fetch
Extract frame/component structure and all visible text from a Figma design URL. Use whenever a prompt or a fetched issue contains a figma.com/design or figma.com/file link.