무료 AI 스킬
React/Tailwind/shadcn 기반의 복잡한 인터랙티브 웹 결과물을 만들어줘요.
무료 다운로드 (web-artifacts-builder.zip)
상태 관리, 라우팅, shadcn/ui 컴포넌트가 필요한 복잡한 claude.ai 아티팩트(React, Tailwind CSS 기반)를 만들 때 쓰는 Anthropic 공식 스킬입니다. 단순한 단일 파일 HTML/JSX 아티팩트가 아니라, 여러 컴포넌트로 구성된 본격적인 웹 결과물을 만들 때 유용해요. 대시보드, 계산기, 관리 도구처럼 화면 전환이나 상태 저장이 필요한 결과물을 요청할 때 특히 진가를 발휘합니다. 초기 프로젝트 세팅을 스크립트로 자동화해줘서, 매번 처음부터 구조를 짜는 수고를 줄여줍니다. [사용 예시] "매출/방문자/전환율을 보여주는 대시보드 화면 만들어줘"라고 요청하면, 카드형 통계, 그래프, 사이드 메뉴가 포함된 완성도 있는 인터랙티브 화면을 만들어줍니다 (아래 예시 이미지 참고).
1. 이 페이지의 파란색 "무료 다운로드" 버튼을 마우스 왼쪽 버튼으로 한 번 클릭하세요. 2. 다운로드가 끝나면 화면 아래쪽이나 브라우저 오른쪽 위에 다운로드된 파일이 나타납니다. 보통 "다운로드"(Downloads) 폴더에 저장됩니다. 3. 파일 이름이 ".zip"으로 끝나면 압축 파일입니다. 그 파일 위에서 마우스 오른쪽 버튼을 클릭한 뒤 "압축 풀기"(또는 "여기에 풀기")를 선택하세요. 그러면 같은 이름의 폴더가 새로 하나 생깁니다. 이 스킬은 실제 코드를 작성/실행하는 걸 도와주는 성격이라, 일반 채팅(Claude.ai, ChatGPT 등)보다는 개발자용 프로그램에서 가장 잘 작동합니다. [Claude Code에서 쓰는 법] (추천) 4. 컴퓨터에 Claude Code가 설치되어 있어야 합니다. 5. 압축을 푼 폴더를 작업 중인 프로젝트 폴더 안의 ".claude/skills" 폴더에 그대로 넣습니다 (그런 폴더가 없다면 새로 만들어서 넣으면 됩니다). 6. Claude Code를 껐다가 다시 켭니다. 7. 관련 작업을 요청하면 이 스킬 내용을 참고해서 도와줍니다. [Cursor, GitHub Copilot 등 다른 코딩 도구] 요즘 나오는 코딩 도구 대부분이 같은 방식(SKILL.md 파일)을 지원합니다. 각 프로그램의 "Skills" 또는 "Rules" 설정 메뉴에서 이 폴더를 추가하면 됩니다. 정확한 메뉴 위치는 프로그램마다 조금씩 다릅니다. [Claude.ai나 ChatGPT에서도 참고 자료로는 쓸 수 있어요] 실제 스크립트를 실행하지는 못하지만, 파일을 업로드하고 "이 방법대로 알려줘"라고 요청하면 안내 내용을 참고해서 답변해줍니다. [마음에 안 들면 지우는 방법] · Claude.ai / ChatGPT / Grok: 설정의 "Skills" 목록에서 이 스킬 옆에 있는 휴지통(삭제) 아이콘을 누르면 바로 제거됩니다. · Claude Code / 다른 코딩 도구: ".claude/skills" 폴더 안에서 이 스킬 폴더를 찾아 마우스 오른쪽 버튼 → 삭제(휴지통으로 이동)를 누르면 됩니다. 컴퓨터의 다른 프로그램에는 전혀 영향이 없고, 그냥 폴더 하나가 없어지는 것뿐이라 안심하고 지우셔도 됩니다.
원본 출처: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
HANDLED