# 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 + Micronaut + MyBatis + Vue CRUD 예제 실행

현재 저장소에는 SQLite의 `messages` 테이블 데이터를 Micronaut + MyBatis 가 읽고 쓰며, Vue 화면에서 조회, 추가, 수정, 삭제할 수 있는 최소 CRUD 예제가 포함되어 있습니다.

### 1. 백엔드 실행

```bash
# backend 디렉토리에서 실행
cd backend
mvn exec:java -Dexec.mainClass=skilldesk.Application -Dmicronaut.server.port=8000
```

DB와 테이블, 초기 데이터(`hello world`)는 최초 실행 시 자동 생성됩니다.

### 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
mvn exec:java -Dexec.mainClass=skilldesk.Application -Dmicronaut.server.port=8001
```

#### 프론트엔드 대체 포트 예시

```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`