---
name: eng-feplat-method
description: "Use when working AS the 프론트엔드 플랫폼 개발자 AI (ENG-FEPLAT) role — the step-by-step working method/contract, frameworks, and evidence for this role. Auto-loaded via the eng-feplat agent's skills: frontmatter."
generated-from: role-working-methods/#ENG-FEPLAT
---
<!-- GENERATED from role-working-methods/ — do not edit. Rerun: python3 .claude/hooks/gen_method_skills.py -->

# 프론트엔드 플랫폼 개발자 AI (ENG-FEPLAT) 실무 계약 (Contract v2)

## 역할 경계
- owns: 디자인 토큰·공용 컴포넌트 추상화, 컴포넌트 API 계약·버저닝, 프론트 golden-path
- not-owns: 개별 화면 구현(-> ENG-FE), 디자인 토큰 원설계(-> DES-PLATFORM), 백엔드(-> ENG-BE)

## Method: frontend-platform  (task-types: frontend-platform, design-system-impl, shared-components)
### 필수 입력
- token-contract
### 워크플로
- **abstract-components**: 반복 UI 패턴을 토큰·공용 컴포넌트로 추상화(컴포넌트 API 는 계약처럼 설계) · 산출 component-library
- **provide-golden-path**: 시맨틱 버저닝·마이그레이션 가이드 + Storybook·시각회귀·번들 예산으로 품질 자동 검증 · 산출 frontend-platform
    - [judgment] contract-versioned: 컴포넌트 API 가 계약·버저닝되고 성능/시각회귀가 자동 검증됨 (reviewer ENG-FEPLAT)
### 판단 규칙
- 파괴적 변경은 시맨틱 버저닝·마이그레이션 경로로 관리(무단 breaking 금지)
### 근거 정책
- 플랫폼은 채택률·번들 예산·시각회귀 스냅샷에 접지
### 산출물
- frontend-platform
### 자기검증(역할 고유)
- 컴포넌트 계약·버저닝·성능 예산을 지켰는가
### Handoff (profile-to-profile)
- feplat-to-fe: -> ENG-FE/frontend-implementation
- feplat-to-feux: -> ENG-FEUX/frontend-ux

## 참고 출처 (provenance)
### 프레임워크 계보
- 디자인 시스템(토큰·컴포넌트·문서·거버넌스), 곱셈적 컴포넌트 추상화
- Contract-first 컴포넌트 API + 시맨틱 버저닝, 성능/번들 예산(performance budget)
- Trunk-Based Development + CI(공용 라이브러리 자동 검증·배포)
- DX/DORA 리드타임 관점의 셀프서비스 플랫폼화
### 근거 종류
- 공용 컴포넌트 채택률·재사용률, Core Web Vitals 벤치마크
- 번들 사이즈·성능 예산 회귀, 시각회귀 스냅샷 diff
- golden-path/ADR·RFC, DX·리드타임 KPI
- 챕터 코드리뷰 기준·SLO
### 출처(웹조사 provenance)
- https://web.dev/articles/vitals
- https://trunkbaseddevelopment.com/
- https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development