VSCode(Visual Studio Code)의 GitHub Copilot SKILL.md

※ 일본의 한 블로그 글은 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

시작하기 전에

---

copilot-instructions.md 하나에 많은 정보를 제공할 수 있지만. 그 때문에 추론에 사용하는 모델의 성능이 낮거나, 한 번의 세션에서 대화가 오래 지속되면 처음에 말했던 내용이나, 애초에 copilot-instructions.md에 정의하고 있던 것을 잊어버리는 경우 생긴다.
또한, 제공한 많은 맥락이 잡음이 되어 추론에 시간이 오래 걸리거나 엉뚱한 답을 내는 경우도 있었습니다. 그런 문제를 보완하기 위해 SKILL.md를 활용할 수 있다.

 

 

Agent Skills란?

---

 에이전트 스킬은 Copilot이 관련된 경우에 불러올 수 있는 명령, 스크립트 및 리소스 폴더이며, 특수 작업의 성능을 향상시킵니다. 에이전트 스킬은 다양한 에이전트에서 사용되는 표준이다.

 스킬이라는 이름만 듣자면 어떤 도구를 사용하는 능력이나 도구 자체를 정의하는 것처럼 들리지만, 실제로는 프로젝트의 도메인 지식 등을 넣는 것이 가장 일반적인 사용 방법이다. 실제로 어떤 식으로 사용되는지 소개하도록 하겠다. 아래가 SKILL.md 중 하나이다.

---
name: testing
설명: TooMe's Task App (Web)의 테스트 전략. Vitest, React Testing Library, MSW를 사용한 단위·컴포넌트 테스트에 대해 설명. 테스트를 만들 때 참고.
---

# 테스트 전략

## 기술 스택

- **단위 테스트**: Vitest
- **컴포넌트 테스트**: React Testing Library + user-event
- **API Mock**: MSW (Mock Service Worker)
- **E2E테스트**: Playwright / Cypress
- **훅 테스트**: `@testing-library/react-hooks` (또는 RTL의 `renderHook`)

## 유닛 테스트 (Utils / Hooks / Stores)

- 순수 함수 utils, 커스텀 훅,USTStand 스토어 로직을 검증한다
- 비동기 처리를 포함하는 경우에는 `대기`와 `act`를 적절히 사용한다

```typescript
// stores/authStore.test.ts
import { describe, it, expect, beforeEach } from 'vitest';
import { renderHook, act } from '@testing-library/react';
import { useAuthStore } from './authStore';

describe('useAuthStore', () => {
beforeEach(() => {
const { result } = renderHook(() => useAuthStore());
act(() => result.current.logout());
});

it('should set user and authentication status', () => {
const { result } = renderHook(() => useAuthStore());
const mockUser = { uid: '123', email: 'test@example.com' };

act(() => {
result.current.setUser(mockUser as any);
});

expect(result.current.user).toEqual(mockUser);
expect(result.current.isAuthenticated).toBe(true);
});
});
```

## 컴포넌트 테스트 (UI / 통합)

- 사용자 인터랙션(클릭, 입력)을 `user-event`로 시뮬레이션한다
- 구현 상세가 아니라 사용자가 볼 수 있는 행동(접근성 속성이나 텍스트)을 테스트한다

```typescript
// features/task/components/TaskInput.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TaskInput } from './TaskInput';
import { vi } from 'vitest';

describe('TaskInput', () => {
it('calls onSubmit with input text when enter is pressed', async () => {
const handleCreate = vi.fn();
const user = userEvent.setup();

render(<TaskInput onCreate={handleCreate} />);

const input = screen.getByRole('textbox', { name: /タスクを入力/i });

// 입력 및 전송 시뮬레이션
await user.type(input, 'New Task{enter}');

expect(handleCreate).toHaveBeenCalledWith('New Task');
expect(input). ∀ 값(''); // 전송 후 클리어 확인
});
});
```

## API 목업 (MSW)

- 컴포넌트 테스트나 통합 테스트에서 API 응답이 필요할 경우 MSW를 사용한다
- 실제 네트워크 요청이 발생하지 않도록 한다

```typescript
// tests/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
http.get('/api/tasks', () => {
return HttpResponse.json([
{ id: '1', title: 'Buy milk', completed: false },
{ id: '2', title: 'Walk the dog', completed: true },
]);
}),
];
```

## E2E 테스트

- 비판적인 사용자 여정(로그인 → 작업 생성 → 완료)를 검증한다
Playwright 또는 Cypress를 사용해 실제 브라우저 환경에서 동작을 확인한다

## 테스트 베스트 프랙티스

- **AAA 패턴**: Arrange (준비), Act (실행), Assert (검증) 을 의식한다
- **쿼리 우선순위**: `getByRole` > `getByLabelText` > `getByText` > `getByTestId` 순서대로 요소를 가져온다
- **비동기 대기**: 데이터를 가져오는 대기 등에는 `await screenfindBy...` 또는 `대기` 를 사용한다

md 파일의 시작 부분에는 특징적인 파티션이 있으며, 그곳에 name과 description이 설정되어 있다. 간단히 이 파라미터들에 대해 설명하도록 하겠다.

파라미터명	내용
name	SKILL.md 가 있는 디렉터리 이름. 디렉터리 구조에 대해서는 뒤에서 설명하도록 하겠다.
description	스킬의 기능과 사용 시점을 설명한다.

GitHub Copilot은 각 SKILL.md를 필요에 따라 불러와 작업을 실행한다. 필요에 따라 설명을 디스크립션으로 정의하는 이미지를 떠올리면 된다.

 앞서 예시에서는 다음과 같이 description을 정의했다.

TooMe's Task App (Web)의 테스트 전략. Vitest, React Testing Library, MSW를 사용한 단위·컴포넌트 테스트에 대해 설명. 테스트를 만들 때 참고.

그래서 테스트 관련 작업을 실행할 때 이 SKILL.md읽게 된다. 이를 통해 주요 copilot-instructions.md 테스트 전략과 관련된 컨텍스트를 분리된다. 더욱이, 이 분리된 컨텍스트는 필요에 따라만 읽히게 된다.

 

 

SKILL.md의 작성법, 사용법

---

1. vsode의 설정에서 chat.useAgentSkills을 유효화

설정 단축키를 누른 후, chat.userAgentSkills를 입력한 후 유효화

2. 다음과 같은 디렉터리 구조로 각 SKILL.md를 정의
이렇게 하면 GitHub Copilot이 필요에 따라 필요한 SKILL.md 참고하게 된다.
물론 여기서 정의한 디렉터리는 예시일 뿐이므로, 프로젝트에 따라 원하는 만큼 새 디렉터리를 만들고 그 안에 SKILL.md를 추가해도 괜찮다. 즉, 아래와 같은 구성을 하지 않아도, vscode의 chat.agentSkillsLocations를 설정하면 원하는 디렉터리 구성을 만들 수 있다.

.github
│── skills
│   ├── architecture
│   │   └── SKILL.md
│   ├── ui-design
│   │   └── SKILL.md
│   ├── state-managment
│   │   └── SKILL.md
│   ├── backend-integration
│   │   └── SKILL.md
│   ├── coding-standards
│   │   └── SKILL.md
│   └── testing
│       └── SKILL.md
└── copilot-instructions.md

 

이로 인해 copilot-instructins.md도 매우 깔끔해진다. 다음과 같이 말이다.

# Copilot Instructions for TooMe's Task App (Web)

## 전제 조건

- **답변은 반드시 한국어로 해 주세요. **
- 코드를 변경할 때, 변경량이 200줄을 초과할 가능성이 높다면, 사전에 “이 지시에서는 변경량이 200줄을 초과할 가능성이 있습니다만, 실행하시겠습니까?”라고 사용자에게 확인하도록 해 주세요.
- 큰 변화를 주고자 할 경우, 먼저 무엇을 할지 계획을 세운 뒤, 사용자에게 “이와 같은 계획으로 진행하려고 합니다.”라고 제안해 주세요.

## 참고 스킬 가이드 (Skills)

특정 작업을 실행할 때는 반드시 아래의 해당 문서를 참고하고, 그 지침을 따르세요.

- **아키텍처 디렉터리 구성**
- 파일 배치, 모듈 구성, 기능 분리
- 📄 `.github/skills/architecture/SKILL.md`

- **UI 구현·스타일링**
- Tailwind CSS, 컴포넌트 설계, 접근성 (a11y)
- 📄 `.github/skills/ui-design/SKILL.md`

#### 생략

 

 

마무리

---

GitHub Copilot의 최신 기능인 Agent Skills를 활용하고, SKILL.md를이용해 이전보다 더욱 강력하게 GitHub Copilot을 활용하는 방법을 소개했다.

여러분도 꼭 자신의 프로젝트에 Agent Skills를 도입해, ‘그 정도로 뛰어난 어시스턴트’를 ‘믿을 수 있는 에이전트’로 키워 보길 바란다.

---

참고자료

https://qiita.com/TooMe/items/230a730ce0387c77e822