skillDesk/README.md

skillDesk

TRAE에서 바로 사용할 수 있도록 정리한 에이전트 스킬 모음 저장소입니다.
skillText.md에 정리된 인기 스킬 10개를 현재 프로젝트의 .trae/skills 구조로 옮기고, 한국어로 확장 설명을 추가했습니다.

프로젝트 목적

이 저장소는 다음 목적을 가집니다.

• 자주 쓰이는 에이전트 스킬 10개를 현재 프로젝트 안에서 바로 참조 가능하게 정리
• 원문에 가까운 규칙, 사용 시점, 워크플로를 한국어로 복원
• TRAE에서 실제로 검증할 수 있는 프롬프트형 테스트 시나리오 제공

포함된 스킬

• brainstorming
• frontend-design
• ui-ux-pro-max
• systematic-debugging
• writing-plans
• find-skills
• using-superpowers
• karpathy-guidelines
• webapp-testing
• agent-browser

디렉터리 구조

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: 10개 인기 스킬 소개 번역본
• 각 SKILL.md: 실제 프로젝트용 스킬 설명과 사용 규칙
• 테스트 시나리오: TRAE에서 바로 실행해 볼 수 있는 검증 프롬프트 모음
• 설계 문서: 문서 확장 설계
• 구현 계획: 실행 계획 기록

TRAE에서 사용하는 방법

1. 이 프로젝트를 TRAE에서 엽니다.
2. .trae/skills/ 아래 스킬들이 인식되는 환경에서 작업합니다.
3. 작업 요청을 입력하면, 적절한 스킬이 먼저 호출되는지 확인합니다.
4. 스킬별 동작을 검증하려면 테스트 시나리오의 프롬프트를 그대로 사용합니다.

추천 사용 흐름

작업 성격에 따라 아래 순서를 추천합니다.

• 신규 기능/설계: 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

SQLite + Micronaut + MyBatis + Vue CRUD 예제 실행

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

1. 백엔드 실행

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

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

2. 프론트엔드 실행

새 터미널에서 아래 명령을 실행합니다.

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 포트를 다른 프로그램이 사용 중이면 아래처럼 대체 포트를 사용합니다.

백엔드 대체 포트 예시

mvn exec:java -Dexec.mainClass=skilldesk.Application -Dmicronaut.server.port=8001

프론트엔드 대체 포트 예시

python3 -m http.server 5174 -d frontend

프론트 API 포트 맞추기

프론트가 다른 백엔드 포트를 보도록 하려면 index.html 의 window.APP_CONFIG에서 apiPort 값을 백엔드 실행 포트와 동일하게 수정합니다.

예를 들어 백엔드를 8001로 실행했다면 아래처럼 맞춥니다.

<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