Claude Code Slash Command: YAML Front Matter

---
allowed-tools: Bash(mkdir)
description: 하나의 디자인을 기반으로 여러가지 독창적인 디자인 콘셉트를 병렬적으로 생성합니다.
---

이 부분은 “YAML Front Matter” (야믈 프론트 매터) 라고 부릅니다.
Markdown 파일의 메타데이터(metadata) 를 정의하는 영역이에요.
Claude Code나 다른 LLM 기반 툴(예: Obsidian, Next.js MDX, Jekyll, Notion 등)에서
이 구역을 읽어 명령의 속성·환경·도구 권한을 설정하는 데 사용됩니다.

---

🧭 1️⃣ YAML Front Matter의 역할

• Markdown 파일의 내용 자체(prompt) 와 설정값(meta) 을 분리합니다.
• Claude Code에서는 이 영역이 “커맨드 실행 환경”으로 사용됩니다.
• 예를 들어,
  • 어떤 도구(Bash, Python, Git 등) 를 허용할지,
  • 어떤 설명(description) 으로 커맨드를 표시할지,
  • 또는 입력 인자, 권한, 태그 등을 정의할 수 있습니다.

즉, 이 --- 구역은 커맨드의 “헤더 설정”이에요.
Claude Code는 .md 파일을 읽을 때 이 헤더를 먼저 파싱(parse)해서
“이 커맨드를 어떤 환경에서 실행해야 하는가?”를 결정합니다.

---

⚙️ 2️⃣ 주요 필드 (Claude Code에서 자주 쓰는 Front Matter 키)

키 설명 예시

description	명령어 설명 (Claude UI에 표시됨)	description: index.html을 다양한 디자인으로 변형
allowed-tools	Claude가 사용할 수 있는 도구 지정 (CLI, Python, Git 등)	allowed-tools: Bash(git, mkdir, cp)
args / arguments	사용자 인자를 정의 (명령 실행 시 입력값)	arguments: [source_file, count]
language	생성할 코드나 문서의 언어 지정	language: html / language: python
tags	명령 카테고리 태그	tags: [design, automation, parallel]
author	작성자 정보	author: 카보나라
version	커맨드 버전	version: 1.0.0
dependencies	필요한 외부 의존성 명시	dependencies: [Node.js, TailwindCSS]
timeout	커맨드 실행 시간 제한	timeout: 120s
parallel	병렬 작업 허용 여부	parallel: true
subagents	Claude의 서브 에이전트 사용 여부	subagents: true
output-path	생성 결과 파일 저장 경로	output-path: ./design_concepts/
inputs	명령 실행 시 사용자 입력 받는 항목	inputs: [design_style, color_theme]

---

🧪 3️⃣ 예시: Claude Code용 Front Matter 구조 예제

---
description: index.html을 5가지 새로운 콘셉트로 변환합니다.
allowed-tools: Bash(mkdir, cp)
language: html
tags: [design, generation, automation]
parallel: true
subagents: true
output-path: ./design_concepts/
arguments:
  - source_file: index.html
  - count: 5
timeout: 180s
---
# 디자인 콘셉 병렬 생성기
현재 index.html을 기반으로 5개의 독창적인 디자인을 생성해주세요.
각 디자인은 design_concepts 폴더에 index_1.html ~ index_5.html 형태로 저장합니다.

➡️ 이렇게 해두면 Claude는 다음을 이해합니다:

• Bash 명령(mkdir, cp) 실행 가능
• 병렬(subagent)로 5개의 작업 실행 가능
• 결과를 ./design_concepts/에 저장
• 입력 인자(source_file, count) 받기 가능

---

💬 4️⃣ 참고로, Front Matter를 쓰는 이유

Claude Code는 .md 파일 하나하나를
“작업 프롬프트 + 설정 파일”로 취급합니다.

그래서 이 --- 영역은 다음을 위해 존재해요:

• 커맨드에 설명과 메타데이터를 부여
• 허용 도구 및 권한 설정
• 병렬 실행 등 고급 동작 제어
• Claude가 내부적으로 “이건 디자인용, 이건 코드용” 식으로 판단 가능하게 함