Initial commit
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
# skillDesk
|
||||
|
||||
TRAE에서 바로 사용할 수 있도록 정리한 에이전트 스킬 모음 저장소입니다.
|
||||
`skillText.md`에 정리된 인기 스킬 10개를 현재 프로젝트의 `.trae/skills` 구조로 옮기고, 한국어로 확장 설명을 추가했습니다.
|
||||
|
||||
## 프로젝트 목적
|
||||
|
||||
이 저장소는 다음 목적을 가집니다.
|
||||
|
||||
- 자주 쓰이는 에이전트 스킬 10개를 현재 프로젝트 안에서 바로 참조 가능하게 정리
|
||||
- 원문에 가까운 규칙, 사용 시점, 워크플로를 한국어로 복원
|
||||
- TRAE에서 실제로 검증할 수 있는 프롬프트형 테스트 시나리오 제공
|
||||
|
||||
## 포함된 스킬
|
||||
|
||||
- [brainstorming](./.trae/skills/brainstorming/SKILL.md)
|
||||
- [frontend-design](./.trae/skills/frontend-design/SKILL.md)
|
||||
- [ui-ux-pro-max](./.trae/skills/ui-ux-pro-max/SKILL.md)
|
||||
- [systematic-debugging](./.trae/skills/systematic-debugging/SKILL.md)
|
||||
- [writing-plans](./.trae/skills/writing-plans/SKILL.md)
|
||||
- [find-skills](./.trae/skills/find-skills/SKILL.md)
|
||||
- [using-superpowers](./.trae/skills/using-superpowers/SKILL.md)
|
||||
- [karpathy-guidelines](./.trae/skills/karpathy-guidelines/SKILL.md)
|
||||
- [webapp-testing](./.trae/skills/webapp-testing/SKILL.md)
|
||||
- [agent-browser](./.trae/skills/agent-browser/SKILL.md)
|
||||
|
||||
## 디렉터리 구조
|
||||
|
||||
```text
|
||||
skillDesk/
|
||||
├── .trae/
|
||||
│ └── skills/
|
||||
│ ├── brainstorming/
|
||||
│ ├── frontend-design/
|
||||
│ ├── ui-ux-pro-max/
|
||||
│ ├── systematic-debugging/
|
||||
│ ├── writing-plans/
|
||||
│ ├── find-skills/
|
||||
│ ├── using-superpowers/
|
||||
│ ├── karpathy-guidelines/
|
||||
│ ├── webapp-testing/
|
||||
│ └── agent-browser/
|
||||
├── docs/
|
||||
│ ├── superpowers/
|
||||
│ │ ├── specs/
|
||||
│ │ └── plans/
|
||||
│ └── test-scenarios.md
|
||||
├── README.md
|
||||
└── skillText.md
|
||||
```
|
||||
|
||||
## 문서 구성
|
||||
|
||||
- [skillText.md](./skillText.md): 10개 인기 스킬 소개 번역본
|
||||
- 각 `SKILL.md`: 실제 프로젝트용 스킬 설명과 사용 규칙
|
||||
- [테스트 시나리오](./docs/test-scenarios.md): TRAE에서 바로 실행해 볼 수 있는 검증 프롬프트 모음
|
||||
- [설계 문서](./docs/superpowers/specs/2026-06-09-skill-docs-design.md): 문서 확장 설계
|
||||
- [구현 계획](./docs/superpowers/plans/2026-06-09-skill-docs-expansion.md): 실행 계획 기록
|
||||
|
||||
## TRAE에서 사용하는 방법
|
||||
|
||||
1. 이 프로젝트를 TRAE에서 엽니다.
|
||||
2. `.trae/skills/` 아래 스킬들이 인식되는 환경에서 작업합니다.
|
||||
3. 작업 요청을 입력하면, 적절한 스킬이 먼저 호출되는지 확인합니다.
|
||||
4. 스킬별 동작을 검증하려면 [테스트 시나리오](./docs/test-scenarios.md)의 프롬프트를 그대로 사용합니다.
|
||||
|
||||
## 추천 사용 흐름
|
||||
|
||||
작업 성격에 따라 아래 순서를 추천합니다.
|
||||
|
||||
- 신규 기능/설계: `brainstorming` -> `writing-plans` -> 구현 스킬
|
||||
- UI 작업: `brainstorming` -> `frontend-design` 또는 `ui-ux-pro-max`
|
||||
- 버그 수정: `systematic-debugging` -> 도메인 스킬
|
||||
- 브라우저 검증: `webapp-testing` 또는 `agent-browser`
|
||||
- 스킬 탐색: `find-skills`
|
||||
- 전반 운영 규칙: `using-superpowers`, `karpathy-guidelines`
|
||||
|
||||
## 문서 확장 기준
|
||||
|
||||
이번 저장소의 스킬 문서는 다음 기준으로 정리했습니다.
|
||||
|
||||
- 원문 핵심 규칙, 단계, 금지 사항은 최대한 유지
|
||||
- 한국어 가독성을 위해 구조와 문장을 재편집
|
||||
- 단순 번역보다 실제 프로젝트에서 바로 읽히는 운영 문서 형태로 정리
|
||||
- frontmatter `description`은 짧고 실사용 판단에 유리하게 유지
|
||||
|
||||
## 빠른 확인 포인트
|
||||
|
||||
- 설계 없이 구현으로 바로 가는가 -> `brainstorming`
|
||||
- 계획 없이 바로 코드를 바꾸려는가 -> `writing-plans`
|
||||
- 버그를 감으로 고치려는가 -> `systematic-debugging`
|
||||
- UI가 평범하고 맥락이 약한가 -> `frontend-design`, `ui-ux-pro-max`
|
||||
- 적절한 스킬이 있는지부터 모르겠는가 -> `find-skills`
|
||||
|
||||
## 테스트 시나리오
|
||||
|
||||
실제 TRAE 검증용 프롬프트는 아래 문서에 정리되어 있습니다.
|
||||
|
||||
- [docs/test-scenarios.md](./docs/test-scenarios.md)
|
||||
|
||||
## SQLite + FastAPI + Vue CRUD 예제 실행
|
||||
|
||||
현재 저장소에는 SQLite의 `messages` 테이블 데이터를 FastAPI가 읽고 쓰며, Vue 화면에서 조회, 추가, 수정, 삭제할 수 있는 최소 CRUD 예제가 포함되어 있습니다.
|
||||
|
||||
### 1. 백엔드 실행
|
||||
|
||||
```bash
|
||||
python3 -m venv .venv
|
||||
source .venv/bin/activate
|
||||
pip install -r backend/requirements.txt
|
||||
python backend/init_db.py
|
||||
uvicorn backend.main:app --host 127.0.0.1 --port 8000 --reload
|
||||
```
|
||||
|
||||
### 2. 프론트엔드 실행
|
||||
|
||||
새 터미널에서 아래 명령을 실행합니다.
|
||||
|
||||
```bash
|
||||
python3 -m http.server 5173 -d frontend
|
||||
```
|
||||
|
||||
### 3. 확인
|
||||
|
||||
- 백엔드 API 목록 조회: `http://127.0.0.1:8000/api/messages`
|
||||
- 프론트엔드 화면: `http://127.0.0.1:5173`
|
||||
- 기존 단일 조회 호환 API: `http://127.0.0.1:8000/api/message`
|
||||
|
||||
정상 동작 시 Vue 화면에서 초기 데이터 `hello world`를 포함한 메시지 목록이 보이고, 새 메시지 추가, 기존 메시지 수정, 기존 메시지 삭제가 모두 가능합니다.
|
||||
|
||||
### 4. 포트 충돌 시 대체 실행
|
||||
|
||||
이미 `8000` 또는 `5173` 포트를 다른 프로그램이 사용 중이면 아래처럼 대체 포트를 사용합니다.
|
||||
|
||||
#### 백엔드 대체 포트 예시
|
||||
|
||||
```bash
|
||||
uvicorn backend.main:app --host 127.0.0.1 --port 8001 --reload
|
||||
```
|
||||
|
||||
#### 프론트엔드 대체 포트 예시
|
||||
|
||||
```bash
|
||||
python3 -m http.server 5174 -d frontend
|
||||
```
|
||||
|
||||
#### 프론트 API 포트 맞추기
|
||||
|
||||
프론트가 다른 백엔드 포트를 보도록 하려면 [index.html](file:///Users/woozooni/Documents/trae_projects/skillDesk/frontend/index.html#L8-L15) 의 `window.APP_CONFIG`에서 `apiPort` 값을 백엔드 실행 포트와 동일하게 수정합니다.
|
||||
|
||||
예를 들어 백엔드를 `8001`로 실행했다면 아래처럼 맞춥니다.
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.APP_CONFIG = {
|
||||
apiHost: 'http://127.0.0.1',
|
||||
apiPort: '8001',
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
이 경우 접속 주소는 아래와 같습니다.
|
||||
|
||||
- 백엔드 API 목록 조회: `http://127.0.0.1:8001/api/messages`
|
||||
- 프론트엔드 화면: `http://127.0.0.1:5174`
|
||||
Reference in New Issue
Block a user