gil/game-fe-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 새로운 스킬 및 문서 추가 (EDM HTML, 요구사항 분석기, 번역 코드 생성기)

Browse Source
This commit is contained in:
gil
2026-05-13 00:28:01 +09:00
parent 420b29ff43
commit 607ef1a435
61 changed files with 14343 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

800
docs/fe-ai-workflow.html Normal file
View File

@@ -0,0 +1,800 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>프론트엔드 AI 공통 지침 - Work Flow</title>
<style>
:root {
--bg: #f6f5f1;
--panel: #ffffff;
--line: #d7d7d7;
--text: #222;
--muted: #777;
--navy: #25384a;
--blue: #1f7fbe;
--blue-bg: #e8f5fb;
--yellow: #e6a400;
--yellow-bg: #fff9dc;
--green: #17a968;
--green-bg: #e6f7ee;
--red: #d94132;
--red-bg: #fde9e9;
--orange: #e86f16;
--purple: #8d42b2;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--text);
background: var(--bg);
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Noto Sans KR",
"Apple SD Gothic Neo",
sans-serif;
line-height: 1.45;
}
.page {
min-width: 1480px;
padding: 8px 10px 18px;
}
.layout {
display: grid;
grid-template-columns: 255px 1fr;
gap: 22px;
align-items: stretch;
}
/* Sidebar */
.sidebar {
overflow: hidden;
background: #fff;
border: 1px solid #d0d0d0;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sidebar-head {
padding: 14px 20px;
color: #fff;
font-size: 15px;
font-weight: 800;
background: var(--navy);
}
.side-body {
padding: 14px 14px 18px;
}
.side-group {
margin-bottom: 14px;
padding: 10px;
border-radius: 7px;
border: 2px solid;
}
.side-group.yellow {
border-color: #f2ad23;
background: #fffdf4;
}
.side-group.blue {
border-color: #1f7fbe;
background: #f0f8ff;
}
.side-title,
.side-file {
display: block;
margin-bottom: 7px;
padding: 4px 8px;
text-align: center;
border-radius: 3px;
font-size: 11px;
font-weight: 800;
font-family: "SFMono-Regular", Consolas, monospace;
}
.yellow .side-title,
.yellow .side-file {
color: #7b5a00;
border: 1px solid #f2ad23;
background: #fff3bf;
}
.blue .side-title,
.blue .side-file {
color: #0f4d77;
border: 1px solid #1f7fbe;
background: #d6ecf8;
}
.side-caption {
margin: 8px 0 0;
color: #8a8a8a;
text-align: center;
font-size: 11px;
font-style: italic;
}
.side-desc {
margin: 6px 0 0;
color: #666;
font-size: 11px;
line-height: 1.5;
padding: 0 2px;
}
/* Main */
.main {
padding-top: 0;
}
.title-wrap {
padding: 10px 0 14px;
text-align: center;
}
h1 {
margin: 0;
font-size: 24px;
font-weight: 900;
letter-spacing: -0.03em;
}
.subtitle {
margin: 10px 0 0;
color: #767676;
font-size: 12px;
}
.workflow-panel {
position: relative;
min-height: 780px;
padding: 236px 42px 36px;
background: var(--panel);
border: 1px solid #cfcfcf;
border-radius: 8px;
}
.flow-row {
display: grid;
grid-template-columns: 280px 60px 280px 60px 280px 60px 280px 60px 280px 60px 280px;
align-items: center;
}
.arrow {
color: #444;
font-size: 48px;
line-height: 1;
text-align: center;
}
.node {
height: 135px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 4px solid;
border-radius: 16px;
text-align: center;
background: #fff;
}
.node .title {
margin-bottom: 8px;
font-size: 24px;
font-weight: 900;
letter-spacing: -0.04em;
}
.node .desc {
color: #555;
font-size: 17px;
}
.node.blue {
color: #0f4d77;
border-color: var(--blue);
background: var(--blue-bg);
}
.node.yellow {
color: #8a6500;
border-color: var(--yellow);
background: var(--yellow-bg);
}
.node.green {
color: #09643d;
border-color: var(--green);
background: var(--green-bg);
}
.node.red {
color: #9f2820;
border-color: var(--red);
background: var(--red-bg);
}
.node-num {
display: inline-flex;
justify-content: center;
align-items: center;
width: 23px;
height: 23px;
margin-right: 6px;
border: 2px solid currentColor;
border-radius: 50%;
font-size: 14px;
font-weight: 900;
}
/* absolute guide lines */
.rules-bar {
position: absolute;
left: 518px;
right: 43px;
top: 392px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #9a6500;
font-size: 17px;
font-weight: 900;
background: #fffef7;
border: 2px dashed #f0a000;
border-radius: 10px;
}
.v-line {
position: absolute;
width: 0;
border-left: 2px dashed #b7b7b7;
}
.v-line.yellow {
border-color: #d49a00;
}
.v-line.green {
border-color: #15975f;
}
.v-line.red {
border-color: #c0392b;
}
.v1 {
left: 645px;
top: 360px;
height: 33px;
}
.v2 {
left: 989px;
top: 355px;
height: 77px;
}
.v3 {
left: 1344px;
top: 356px;
height: 36px;
}
.v4 {
left: 1696px;
top: 356px;
height: 36px;
}
.v5 {
left: 2041px;
top: 356px;
height: 36px;
}
.doc-row {
position: absolute;
left: 520px;
right: 42px;
top: 448px;
display: grid;
grid-template-columns: 280px 60px 280px 60px 280px 60px 280px 60px 280px;
align-items: start;
}
.doc-col {
display: flex;
flex-direction: column;
gap: 10px;
}
.doc-chip {
min-height: 36px;
padding: 6px 12px;
text-align: center;
border: 2px solid;
border-radius: 8px;
font-size: 15px;
font-family: "SFMono-Regular", Consolas, monospace;
background: #fff;
}
.doc-chip.yellow {
color: #8a6500;
border-color: var(--yellow);
background: var(--yellow-bg);
font-family: inherit;
font-weight: 800;
font-size: 14px;
}
.doc-chip.green {
color: #09643d;
border-color: var(--green);
background: var(--green-bg);
}
.doc-chip.red {
color: #9f2820;
border-color: var(--red);
background: var(--red-bg);
}
.doc-chip.blue {
color: #0f4d77;
border-color: var(--blue);
background: var(--blue-bg);
}
/* feedback loop */
.loop-label {
position: absolute;
z-index: 3;
padding: 7px 22px;
font-size: 20px;
font-weight: 900;
border: 2px solid;
border-radius: 10px;
background: #fff;
}
.label-purple {
top: 30px;
left: 1180px;
color: var(--purple);
border-color: var(--purple);
background: #fff5ff;
}
.label-orange {
top: 109px;
left: 990px;
color: var(--orange);
border-color: var(--orange);
background: #fff8f2;
}
.label-red {
top: 86px;
left: 1383px;
color: var(--red);
border-color: var(--red);
background: #fff5f5;
}
.loop-line {
position: absolute;
pointer-events: none;
}
.loop-purple {
top: 54px;
left: 944px;
width: 705px;
height: 150px;
border: 4px dashed var(--purple);
border-bottom: 0;
border-radius: 18px 18px 0 0;
}
.loop-purple:before,
.loop-purple:after {
content: "";
position: absolute;
bottom: -18px;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 30px solid var(--purple);
}
.loop-purple:before {
left: -16px;
}
.loop-purple:after {
right: -16px;
}
.loop-orange {
top: 137px;
left: 944px;
width: 350px;
height: 72px;
border-top: 4px dashed var(--orange);
border-left: 4px dashed var(--orange);
border-right: 4px dashed var(--orange);
border-radius: 12px 12px 0 0;
}
.loop-orange:before,
.loop-orange:after {
content: "";
position: absolute;
bottom: -18px;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 30px solid var(--orange);
}
.loop-orange:before {
left: -16px;
}
.loop-orange:after {
right: -16px;
}
.loop-red {
top: 137px;
left: 1292px;
width: 355px;
height: 72px;
border-top: 4px dashed #ff4b3d;
border-left: 4px dashed #ff4b3d;
border-right: 4px dashed #ff4b3d;
border-radius: 12px 12px 0 0;
}
.loop-red:before {
content: "";
position: absolute;
bottom: -18px;
left: -16px;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 30px solid #ff4b3d;
}
.feedback-box {
position: absolute;
left: 42px;
right: 42px;
bottom: 28px;
padding: 16px 36px 28px;
border: 2px solid #d1d1d1;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.feedback-box h2 {
margin: 0 0 22px;
text-align: center;
font-size: 23px;
font-weight: 900;
}
.legend-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.legend-item {
display: flex;
align-items: center;
gap: 14px;
font-size: 20px;
}
.line-sample {
position: relative;
flex-shrink: 0;
width: 85px;
border-top: 4px dashed;
}
.line-sample:after {
content: "";
position: absolute;
right: -1px;
top: -10px;
width: 0;
height: 0;
border-left: 18px solid currentColor;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
.line-sample.red {
color: #ff4b3d;
border-color: #ff4b3d;
}
.line-sample.orange {
color: var(--orange);
border-color: var(--orange);
}
.line-sample.purple {
color: var(--purple);
border-color: var(--purple);
}
.bottom-legend {
margin-top: 14px;
padding: 12px 18px;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 7px;
font-size: 12px;
}
.bottom-legend strong {
margin-right: 12px;
}
.mini-box {
display: inline-block;
width: 25px;
height: 12px;
margin: 0 5px 0 12px;
border: 2px solid;
border-radius: 2px;
vertical-align: -2px;
}
.mini-box.yellow {
border-color: var(--yellow);
background: var(--yellow-bg);
}
.mini-box.green {
border-color: var(--green);
background: var(--green-bg);
}
.mini-box.red {
border-color: var(--red);
background: var(--red-bg);
}
.mini-box.blue {
border-color: var(--blue);
background: var(--blue-bg);
}
.mini-arrow {
display: inline-block;
margin: 0 10px 0 20px;
font-size: 22px;
line-height: 0;
vertical-align: -3px;
}
.mini-arrow.red {
color: #ff4b3d;
}
.note {
margin-top: 14px;
padding: 11px 18px;
color: #777;
text-align: center;
background: #f1f1ee;
border: 1px solid #d6d6d2;
border-radius: 7px;
font-size: 12px;
}
@media (max-width: 1600px) {
.page {
transform-origin: top left;
}
}
</style>
</head>
<body>
<div class="page">
<div class="layout">
<aside class="sidebar">
<div class="sidebar-head">📁 gameservice-fe-agent 구조</div>
<div class="side-body">
<div class="side-group yellow">
<span class="side-file">CLAUDE.md</span>
<p class="side-caption">세션 시작 시 1회 자동 로드<br />rules/* 전체를 @import</p>
</div>
<div class="side-group yellow">
<span class="side-title">rules/ (매 대화 턴 자동)</span>
<span class="side-file">coding-conventions.md</span>
<span class="side-file">framework-rules.md</span>
<span class="side-file">commit-pr.md</span>
<span class="side-file">claude-workflow.md</span>
<p class="side-caption">포맷팅·네이밍·Vue·커밋·작업방식</p>
</div>
<div class="side-group blue">
<span class="side-title">skills/ (명령으로 호출)</span>
<span class="side-file">conventional-commit</span>
<span class="side-file">markup-edm</span>
<span class="side-file">plan-analyzer</span>
<span class="side-file">plan-translation-generator</span>
<span class="side-file">project-init</span>
<span class="side-file">verify-component-review</span>
<span class="side-file">work-log</span>
<p class="side-caption">link-skills.sh 로 .claude/skills/ 링크</p>
</div>
</div>
</aside>
<main class="main">
<header class="title-wrap">
<h1>프론트엔드 AI 공통 지침 - Work Flow</h1>
<p class="subtitle">gameservice-fe-agent rules/ 구조와 각 작업 단계별 참조 파일의 흐름 (피드백 루프 포함)</p>
</header>
<section class="workflow-panel">
<div class="loop-line loop-purple"></div>
<div class="loop-line loop-orange"></div>
<div class="loop-line loop-red"></div>
<div class="loop-label label-purple">설계 변경 필요</div>
<div class="loop-label label-orange">계획 재수립 필요</div>
<div class="loop-label label-red">버그 발견 · 수정</div>
<div class="flow-row">
<article class="node blue">
<div class="title">요청자 / 개발자</div>
<div class="desc">업무 요청</div>
</article>
<div class="arrow">▶</div>
<article class="node yellow">
<div class="title"><span class="node-num">1</span>자동 로드</div>
<div class="desc">CLAUDE.md + rules/* × 4</div>
</article>
<div class="arrow">▶</div>
<article class="node green">
<div class="title"><span class="node-num">2</span>탐색</div>
<div class="desc">파일 파악 · 패턴 확인</div>
</article>
<div class="arrow">▶</div>
<article class="node green">
<div class="title"><span class="node-num">3</span>계획</div>
<div class="desc">할 일 목록 · 승인</div>
</article>
<div class="arrow">▶</div>
<article class="node green">
<div class="title"><span class="node-num">4</span>구현</div>
<div class="desc">코드 작성 · 지침 준수</div>
</article>
<div class="arrow">▶</div>
<article class="node red">
<div class="title"><span class="node-num">5</span>검증</div>
<div class="desc">린트 · 빌드 · 커밋/PR</div>
</article>
</div>
<div class="v-line yellow v1"></div>
<div class="v-line green v2"></div>
<div class="v-line green v3"></div>
<div class="v-line green v4"></div>
<div class="v-line red v5"></div>
<div class="rules-bar">rules/* × 4 — 매 대화 턴 자동 참조 (① ~ ⑤ 전 단계 공통)</div>
<div class="doc-row">
<div class="doc-col">
<div class="doc-chip yellow">CLAUDE.md (세션 시작 1회)</div>
</div>
<div></div>
<div class="doc-col">
<div class="doc-chip green">coding-conventions.md</div>
<div class="doc-chip green">framework-rules.md</div>
</div>
<div></div>
<div class="doc-col">
<div class="doc-chip green">claude-workflow.md</div>
<div class="doc-chip green">framework-rules.md</div>
</div>
<div></div>
<div class="doc-col">
<div class="doc-chip green">coding-conventions.md</div>
<div class="doc-chip green">framework-rules.md</div>
</div>
<div></div>
<div class="doc-col">
<div class="doc-chip red">coding-conventions.md</div>
<div class="doc-chip red">commit-pr.md</div>
</div>
</div>
<div class="feedback-box">
<h2>피드백 루프 (역방향 흐름)</h2>
<div class="legend-grid">
<div class="legend-item">
<span class="line-sample red"></span>
<span>④ 구현 → ⑤ 검증 → ④ 구현 : 버그 발견 시 수정 후 재검증</span>
</div>
<div class="legend-item">
<span class="line-sample orange"></span>
<span>③ 계획 → ④ 구현 중 재설계 : 계획 재수립 후 다시 구현</span>
</div>
<div class="legend-item">
<span class="line-sample purple"></span>
<span>⑤ 검증 → ② 탐색 : 검증 결과로 구조 변경이 필요한 경우</span>
</div>
</div>
</div>
</section>
<div class="bottom-legend">
<strong>범례</strong>
<span class="mini-box yellow"></span> 세션 시작 1회 자동 로드 (CLAUDE.md)
<span class="mini-box yellow"></span> 매 대화 턴 자동 참조 (rules/ × 4)
<span class="mini-box green"></span> 탐색·계획·구현 단계 참조
<span class="mini-box red"></span> 검증·커밋/PR 단계 참조
<span class="mini-box blue"></span> skills/ (명령으로 호출)
<span class="mini-arrow">▶</span> 정방향 진행
<span class="mini-arrow red">--▶</span> 피드백 루프 (역방향)
</div>
<div class="note">
피드백 루프는 구현·검증 중 발견된 이슈에 따라 이전 단계로 돌아가 재작업 후 다시 진행합니다.
모호한 요구사항은 추측하지 않고 사용자에게 확인 후 계획 단계부터 다시 시작합니다.
</div>
</main>
</div>
</div>
</body>
</html>