html-artifacts은(는) 무엇을 하나요?
Claude 스킬: 완전히 독립적인 대화형 HTML 아티팩트(보고서/데크/순서도/프로토타입/에디터 UI)를 제작하고 ~/.claude/artifacts에 저장한 후 즉시 열어봅니다. ThariqS/html-effectiveness에서 20개의 Apache-2.0 예제를 포함합니다.
개요
이 스킬은 Claude 에이전트가 HTML 아티팩트를 생성하고 로컬 파일 시스템에 저장한 후 기본 브라우저로 자동 열어주는 기능을 제공합니다. 개발자는 복잡한 설정 없이 인터랙티브 HTML 콘텐츠를 빠르게 프로토타이핑하고 테스트할 수 있습니다.
기능
- 독립 HTML 생성: 외부 의존성 없이 단일 HTML 파일로 완전한 기능을 제공하는 아티팩트 생성
- 로컬 저장: 생성된 아티팩트를
~/.claude/artifacts/디렉토리에 저장 - 자동 열기: 저장 후 기본 브라우저에서 자동으로 아티팩트를 열어 확인
- 번들 예제: ThariqS/html-effectiveness의 20개 Apache-2.0 라이선스 예제 제공
사용법
Claude Code에서 다음과 같이 사용할 수 있습니다:
/use liush2yuxjtu/html-artifacts
프롬프트 예시:
"대화형 차트가 포함된 HTML 보고서를 만들어서 아티팩트로 저장해줘" "간단한 할 일 목록 앱을 HTML로 프로토타입해서 열어봐"
아티팩트 종류
이 스킬로 생성할 수 있는 아티팩트 예시:
- 보고서: 마크다운 기반, 차트 및 표 포함
- 데크: 슬라이드 쇼 형태의 프레젠테이션
- 순서도: 인터랙티브 플로우차트 또는 다이어그램
- 프로토타입: UI/UX 프로토타입 (예: 로그인 폼, 대시보드)
- 에디터 UI: 코드 편집기 또는 WYSIWYG 스타일 인터페이스
- 시뮬레이션: 수학적 모델, 게임 또는 데이터 시뮬레이션
저장 위치
모든 아티팩트는 ~/.claude/artifacts/ 디렉토리에 저장됩니다. 파일 이름은 타임스탬프와 설명 기반으로 자동 생성됩니다.
예제 목록 (ThariqS/html-effectiveness)
flowchart.html- 대화형 순서도dashboard.html- 데이터 대시보드editor.html- 텍스트 편집기 UIchart.html- 실시간 차트slides.html- 슬라이드 데크 ... (총 20개 Apache-2.0 라이선스 예제)
참고 사항
- 생성된 HTML 파일은 완전히 독립적이며 CDN 링크를 제외한 외부 리소스가 필요하지 않습니다.
~/.claude/artifacts/디렉토리가 없으면 자동으로 생성됩니다.- 브라우저 열기 동작은
open(macOS) 또는xdg-open(Linux) 명령어를 사용합니다.