Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
`frontend-craft`는 모든 AI 코딩 어시스턴트에게 통일되고 엄격한 프로덕션급 프론트엔드 표준을 제공하는 범용 플러그인입니다. 이 패키지는 React, Vue 등 다양한 기술 스택에 걸쳐 개발자 워크플로우를 개선합니다. 15개 이상의 전문 AI 에이전트를 지원하며 자동 활성화 스킬과 명령어 기능을 통합했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub AI Tools의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기<img src="https://raw.githubusercontent.com/bovinphang/frontend-craft/HEAD/assets/brand/frontend-craft.png" alt="frontend-craft logo" width="200" />릴리스 상태: craft-common 2.0.0, frontend-craft 3.0.0 및 backend-craft 1.0.0이 2026-11-09 (Asia/Shanghai)에 npm으로 게시되었습니다. 패키지 버전은 변경되지 않았습니다.
Stars
CI
npm version
License
Node
TypeScript
React
Vue
Figma
🌐 언어 (Language)
English · 简体中文 · 繁體中文 · 日本語 · 한국어
</div>frontend-craft는 아래에 나열된 모든 15개 AI 코딩 어시스턴트에게 동일한 엄격한(opinionated) 엔지니어링 표준을 적용하는 범용 프론트엔드 플러그인입니다:
claude codex cursor windsurf opencode<br>kilo gemini copilot antigravity augment<br>trae codebuddy cline openclaw qoder<br><br>각 런타임별 경로 및 주의사항은 docs/runtimes/에 있습니다.
이 패키지는 14개의 전문 에이전트, 74개의 자동 활성화 스킬, 11개의 슬래시 명령어, 5개의 이벤트 기반 훅, 6개 디자인 도구 엔드포인트용 MCP 통합 및 완벽한 규칙 라이브러리를 단일 설치 가능한 패키지로 묶었습니다. 하나의 명령을 실행하면, 팀의 모든 AI 세션이 React, Vue, Next.js 또는 Nuxt를 동일하게 작성합니다 — 타입이 지정되고(typed), 접근 가능하며(accessible), 안전하고(secure), 일관성이 있습니다(consistent).
| Problem | What frontend-craft does |
|---|---|
| AI 어시스턴트가 일관성이 없거나, 타입이 지정되지 않았거나, 보안에 취약한 프론트엔드 코드를 작성합니다. | **74개의 스킬(skills)**로 팀 표준을 인코딩합니다 — 어시스턴트가 해당 파일을 건드릴 때 자동으로 활성화됩니다. |
**Node.js 22+**가 필요합니다. Windows, macOS, Linux에서 작동합니다.
# 1. fec 명령어를 전역으로 설치
npm install -g @bovinphang/frontend-craft@latest
...
npm install -g는 fec 터미널 명령어만 설치합니다. fec setup은 frontend-craft를 프로젝트에 연결하기 위한 터미널 CLI 명령어이며, 어시스턴트 내의 /fec-init 슬래시 명령어가 아닙니다. 대화형 터미널에서 단순히 fec setup을 실행하면 런타임을 선택하라는 메시지가 표시됩니다. 기본적으로 fec setup <runtime> 및 fec setup all은 frontend-craft를 현재 프로젝트에 연결합니다. --global 플래그는 frontend-craft를 선택된 AI 도구의 전역 설정 디렉토리에 연결하여 모든 프로젝트에서 사용할 수 있게 하려는 경우에만 전달해야 합니다.
# 1. 대화형 마법사(Interactive wizard)
npx @bovinphang/frontend-craft@latest
...
글로벌 fec 명령어를 설치하고 싶지 않을 때는 npx를 사용합니다. 인수를 지정하지 않으면, 대화형 마법사가 열립니다: 하나 이상의 런타임을 선택한 다음, 전역으로 연결할지 아니면 현재 프로젝트에 연결할지를 선택합니다. 모든 런타임에 대한 스크립트 설치의 경우, install --all --local 또는 install --all --global을 사용하고, install all이라고 쓰지 마십시오. CI/스크립트를 위해서는 항상 --global / -g 또는 --local / -l을 전달해야 합니다. 명시적인 위치가 없는 비(非) TTY 환경에서는 CLI가 기본적으로 claude --global로 설정됩니다.
Claude Code 사용자를 위한 경우, Claude Code Marketplace가 선호되는 단일 출처 설치 방식입니다. CLI(명령줄 인터페이스)를 클로드에 사용하는 경우는 크로스 런타임(cross-runtime) 설치, 스크립트화된/오프라인 파일 복사본이 필요하거나 Marketplace가 아닌 환경일 때만 사용하십시오.
Marketplace가 이미 설치되어 있다면, CLI는 --force 옵션을 사용하더라도 두 번째 Claude 사본을 설치하거나 업데이트하지 않습니다. 대신 Claude Code Marketplace를 통해 업데이트하십시오. 다른 범위(scope)에 이미 CLI로 관리되는 Claude 설치본이 존재하는 경우, 대화형 터미널은 전환하기 전에 해당 소스를 업데이트할지 아니면 제거할지 사용자에게 묻습니다. 비대화형 터미널은 중단되고 실행해야 할 정확한 runtime update, runtime uninstall, 및 runtime install 명령어를 출력합니다.
클로드 전용 전체 단계는 [docs/runtimes/claude.md] 및 [docs/runtimes/claude.zh-CN.md]에 있습니다.
설치가 완료되면 모든 AI 세션에서 전체 프론트엔드 엔지니어링 툴킷을 사용할 수 있습니다:
You: "최근 변경 사항 검토해 주세요"
→ fec-code-reviewer 에이전트가 배포되어 reports/code-review-*.md 파일을 생성합니다.
...
아래의 모든 슬래시 명령어는 Claude Code용으로 표시됩니다. 다른 런타임은 자체 명령 시스템을 통해 동일한 기능을 제공합니다(참조: docs/runtimes/).
전체 시나리오 기반 프롬프트 라이브러리는 [docs/example-prompts.md]를 참조하십시오.
You: "병합(merge) 전에 최근 변경 사항을 검토해 주세요. 아키텍처, 타입 안전성, 렌더링 동작, 스타일, 접근성 및 누락된 테스트에 중점을 두세요."
You: "코딩하기 전에 계정 청구 기능을 계획하세요: 라우트 구조, 컴포넌트 경계, 데이터 흐름, 상태 소유권, 유효성 검사 흐름 및 출시 위험."
You: "다단계 등록 양식을 만드세요. 이 프로젝트에 파일 업로드, 조건부 필드, 비동기 유효성 검사 및 접근 가능한 오류를 위해 올바른 폼과 스키마 유효성 검사 방식을 선택하세요."
...
슬래시 명령어는 구조화된 워크플로우의 주요 진입점입니다. 대부분은 reports/ 아래에 타임스탬프가 찍힌 Markdown 보고서를 생성합니다.
| Command | Purpose | Report |
|---|---|---|
/fec-init | 프로젝트 템플릿 초기화 (CLAUDE.md, rules, settings) | — |
| ... |
/fec-review, 코드/TypeScript/보안 검토 에이전트(code/TypeScript/security review agents), 그리고 이들의 검토 기술은 세 가지 모드를 사용합니다:
파일/디렉터리 요청은 그 전체 내용을 검토하며, 특정 차이점(diff)만 검토하려면 “최근 변경 사항”을 추가해야 합니다. 단순히 /fec-review를 실행하는 것은 변경 사항이 존재하더라도 프로젝트 전체를 검토합니다. 검토 전에 반드시 모드와 범위를 명시해야 합니다. 편집 후 자동 검토는 현재의 변경 범위가 명시적으로 통과되어야 합니다.
예시: /fec-review, /fec-review review recent changes, /fec-review review src/components/Button.tsx, /fec-review review src/features/, 그리고 /fec-review review the entire project. 이들은 CLI 플래그가 아닌 자연어 명령어입니다. 명시된 범위는 기본값보다 우선합니다.
기본적으로 의존성 디렉토리, 빌드 출력물, 캐시, 생성된 파일 및 서드파티 코드는 제외됩니다. 보고서는 모드(mode), 대상 범위(target scope), 검토된/검토되지 않은 파일/모듈, 제외 항목, 완료 상태 및 검증 결과를 기록합니다. 제한적인 커버리지는 부분(partial)으로 표시되며, 호출자 읽기 또는 프로젝트 전체 린트(lint)/타입 체크(typecheck) 실행만으로는 수동 검토 커버리지를 확립하지 못합니다. 변경 검토는 병합 권장 사항을 유지하며, 타겟/프로젝트 검토는 검토된 범위 내의 위험도를 평가합니다. 프론트엔드 검토가 백엔드 감사(audit)를 대체하는 것은 아니며, 수리가 요청되지 않는 한 리뷰어는 비즈니스 코드를 수정하지 않습니다.
스킬은 파일 패턴, 프레임워크 또는 작업 컨텍스트를 기반으로 자동으로 활성화되는 워크플로우 정의입니다. 이는 검토 차원(review dimensions), 출력 규칙(output conventions) 및 보고서 형식을 인코딩합니다.
아래의 스킬들은 사용 사례별로 그룹화되어 있어 프로젝트 표준, 구현(implementation), 테스트(testing), 검토(review), 설계(design), 마이그레이션(migration), 프로젝트 진화(project evolution) 및 문서화 워크플로우를 빠르게 찾을 수 있습니다.
프로젝트 표준(Project standards) — 일치하는 프레임워크가 감지될 때마다 적용되는 규칙:
| 스킬 | 범위 |
|---|---|
fec-react-project-standard | React + TypeScript (구조, 컴포넌트, 라우팅, 상태, API 계층) |
| ... | |
| 구현 기능(Implementation capabilities) — 특정 프론트엔드 동작을 구축할 때 활성화됨: |
| 스킬 | 범위 |
|---|---|
fec-data-fetching | 서버 상태 가져오기, 캐싱, 무효화, SSR, 무한 로딩 |
| ... | |
| 테스트(Testing) — 프론트엔드 테스트 커버리지를 계획하거나 작성할 때 활성화됨: |
| Skill | Scope |
|---|---|
fec-testing-strategy | 정적(static), 단위(unit), 컴포넌트(component), 통합(integration), E2E(End-to-End), 시각적(visual) 테스트 전반에 걸친 계층 선택 |
검토 및 품질 (Review & quality) — 검토, 유효성 검사 또는 정리 워크플로우 중에 활성화됨:
| Skill | Scope |
|---|---|
fec-code-review | 정확성(Correctness), 유지보수성(maintainability), 타입(types), 렌더링, 및 검증 리뷰 |
리팩토링 (Refactoring) — 증거 기반의, 동작을 보존하는 구조적 개선을 위해 활성화됨:
| Skill | 목적 (Purpose) |
|---|---|
fec-refactoring | 분류(classification), 기준선(baseline), 안전성(safety), 소규모 단계 실행(small-step execution), 롤백(rollback), 및 증명(proof)을 조정함 (Orchestrate) |
UI 디자인 (Design UI) — 디자인-투-코드, 디자인 시스템, 시각적 다듬기를 위해 활성화됨:
| Skill | Scope |
|---|---|
fec-ui-design | 제품 컨텍스트 기반의 UI 방향성, 비범용(anti-generic) 디자인 조정 장치, 미디어 전략, 상태(states), 시각적 QA |
기술 다이어그램 품질: cc-technical-diagrams는 표준 순서/워크플로우 다이어그램에는 로컬 Mermaid를 선호하며, 편집 가능한 아키텍처에는 draw.io 워크플로우를 사용하고, 도구가 사용할 수 없을 때는 JSON/HTML로 대체합니다. 브라우저에서 측정한 매니페스트를 PNG에 맞춰 축소하여 내보내고, QA를 실행한 후 최종 이미지를 검사합니다. 완전한 텍스트, 명시적인 레이아웃 및 관계를 보존해야 하며; 소스 코드는 최대 두 번의 자동 라운드 동안 수정하고 해결되지 않은 문제는 보고해야 합니다. 재현 가능한 테스트 케이스(Reproducible fixtures)는 skills/cc-technical-diagrams/assets/quality-examples/에 있습니다.
레거시 마이그레이션 — 현대화 작업 중 활성화됨: