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에서 사용하는 방법

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

문서 확장 기준

이번 저장소의 스킬 문서는 다음 기준으로 정리했습니다.

원문 핵심 규칙, 단계, 금지 사항은 최대한 유지
한국어 가독성을 위해 구조와 문장을 재편집
단순 번역보다 실제 프로젝트에서 바로 읽히는 운영 문서 형태로 정리
frontmatter description은 짧고 실사용 판단에 유리하게 유지

빠른 확인 포인트

설계 없이 구현으로 바로 가는가 -> brainstorming
계획 없이 바로 코드를 바꾸려는가 -> writing-plans
버그를 감으로 고치려는가 -> systematic-debugging
UI가 평범하고 맥락이 약한가 -> frontend-design, ui-ux-pro-max
적절한 스킬이 있는지부터 모르겠는가 -> find-skills

테스트 시나리오

실제 TRAE 검증용 프롬프트는 아래 문서에 정리되어 있습니다.

docs/test-scenarios.md

SQLite + FastAPI + Vue CRUD 예제 실행

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

1. 백엔드 실행

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. 프론트엔드 실행

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

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

백엔드 대체 포트 예시

uvicorn backend.main:app --host 127.0.0.1 --port 8001 --reload

프론트엔드 대체 포트 예시

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

README.md

skillDesk

프로젝트 목적

포함된 스킬

디렉터리 구조