스킬 artifacts-builder

📦

artifacts-builder

Name: artifacts-builder
Author: davila7

콘텐츠 리비전 r2 중간 위험 ⚙️ 외부 명령어⚡ 스크립트 포함🌐 네트워크 접근📁 파일 시스템 접근

고급 Claude Artifacts 빌드

복잡한 Claude artifacts에는 단일 HTML 파일보다 더 많은 구조가 필요합니다. 이 skill은 React, Tailwind, shadcn/ui 프로젝트를 스캐폴딩하고 공유할 수 있도록 번들링합니다.

지원: Claude Codex Code(CC)

📊 67 적절함

Maintain this Skill? Claim it 📊 67 적절함

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "artifacts-builder" from https://skillstore.io/skills/davila7-artifacts-builder.md and its manifest at https://skillstore.io/api/skills/davila7-artifacts-builder/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/davila7-artifacts-builder.md 서명된 manifest GET /api/skills/davila7-artifacts-builder/manifest 서명된 lockfile GET /api/skills/davila7-artifacts-builder/lockfile

테스트해 보기

"artifacts-builder" 사용 중입니다. 가격 계산기용 새 artifact 프로젝트를 만드세요.

예상 결과:

개발 준비가 된 Tailwind CSS, shadcn/ui 컴포넌트, 경로 별칭이 포함된 새 React 및 TypeScript 프로젝트가 생성됩니다.

"artifacts-builder" 사용 중입니다. 완성된 artifact를 공유용으로 번들링하세요.

예상 결과:

Claude artifact로 사용할 수 있도록 JavaScript, CSS, asset이 인라인 처리된 단일 bundle.html 파일이 생성됩니다.

"artifacts-builder" 사용 중입니다. 내 artifact 워크플로에 shadcn/ui 빌딩 블록을 추가하세요.

예상 결과:

생성된 프로젝트에는 세련된 인터페이스를 만들기 위한 공통 UI 컴포넌트, 지원 hooks, 유틸리티 helper가 포함됩니다.

보안 감사

중간 위험

v9 • 2026. 7. 23. 버전별 보고서 열기

Most static findings are false positives caused by Bash syntax, Markdown formatting, fixed project configuration writes, and documentation links. The scripts still execute unpinned packages, may install pnpm globally, and extract bundled source that was outside the text scan. Publication should require clearer consent and stronger dependency and archive controls.

스캔된 파일

653

분석된 줄 수

검토 항목

오탐 무시됨

확인된 보안 우려 사항 (2)

중간

scripts/init-artifact.sh:34-36 scripts/init-artifact.sh:58-59 scripts/init-artifact.sh:68-79 scripts/init-artifact.sh:270-273 scripts/bundle-artifact.sh:19-21

Unpinned Dependency Installation

The setup and bundle scripts download and execute unpinned packages, and setup may install pnpm globally. Registry compromise or upstream drift could execute unexpected lifecycle code.

The scripts explicitly use latest create-vite, global npm installation, and several package installs without a lockfile. Those commands can execute downloaded package lifecycle scripts.

중간

scripts/init-artifact.sh:275-277

Bundled Archive Outside Static Scan

The setup script extracts a bundled component archive into generated source, but the audit reports only four scanned text files. Unreviewed archive content could introduce code without source-level analysis.

The extraction command is explicit, and the archive payload is not represented among the four scanned files. Its manifest uses relative paths, which reduces path traversal risk but not the code-review gap.

위험 요인

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/davila7-artifacts-builder/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/davila7-artifacts-builder/security.svg)](https://skillstore.io/skills/davila7-artifacts-builder?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/davila7-artifacts-builder?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/davila7-artifacts-builder/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/davila7-artifacts-builder.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

학술 인용 (APA · BibTeX · CFF)

APA 인용

davila7. (2026). artifacts-builder security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/davila7-artifacts-builder/audits/9

BibTeX 인용

@techreport{davila7-davila7-artifacts-builder-2026,
  author = {davila7},
  title = {artifacts-builder security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/davila7-artifacts-builder/audits/9},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "artifacts-builder security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "davila7"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/davila7-artifacts-builder/audits/9"
identifiers:
  - type: other
    value: "skillstore:davila7-artifacts-builder:audit:9"
    description: "Skillstore immutable audit report identifier"

변형 비교

설치 가능한 변형 5개

각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.

이 변형이 1위인 이유

Skillstore 점수가 가장 높음

작성자 / 소스 Skillstore 점수 증거 신뢰도 Skillstore 사용량 업데이트됨

davila7 권장 현재

davila7-artifacts-builder

Skillstore 점수 67

증거 신뢰도 높음

Skillstore 사용량 13

업데이트됨

2026-09-09

Cam10001110101

cam10001110101-artifacts-builder

Skillstore 점수 66

증거 신뢰도 중간

Skillstore 사용량 18

업데이트됨

2026-09-09

DYAI2025

dyai2025-artifacts-builder

Skillstore 점수 50

증거 신뢰도 중간

Skillstore 사용량 15

업데이트됨

2026-09-09

ComposioHQ

composiohq-artifacts-builder

Skillstore 점수 50

증거 신뢰도 중간

Skillstore 사용량 15

업데이트됨

2026-09-09

ArtemisAI

artemisai-artifacts-builder

Skillstore 점수 38

증거 신뢰도 중간

Skillstore 사용량 17

업데이트됨

2026-10-24

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

상태를 가진 Artifact 프로토타입 제작

컴포넌트 상태와 여러 파일이 필요한 대시보드, 계산기, 편집기 또는 데모용 React 프로젝트를 만듭니다.

공유용 UI 데모 패키징

Claude 대화에서 공유할 수 있도록 Vite 애플리케이션을 단일 HTML 파일로 번들링합니다.

shadcn/ui 컴포넌트로 시작

더 풍부한 artifact 인터페이스를 만들 때 사전 설치된 shadcn/ui 컴포넌트와 Tailwind 스타일링을 사용합니다.

이 프롬프트를 사용해 보세요

새 Artifact 프로젝트 생성

artifacts-builder를 사용해 my-dashboard라는 새 React artifact 프로젝트를 만드세요. 기본 스택을 유지하고 다음에 실행할 명령을 보여 주세요.

컴포넌트 기반 인터페이스 빌드

artifacts-builder를 사용해 shadcn/ui cards, tabs, charts가 포함된 다중 섹션 고객 인사이트 artifact를 만드세요. 인터페이스를 반응형으로 유지하세요.

기존 프로젝트 번들링

artifacts-builder를 사용해 현재 React artifact 프로젝트를 하나의 HTML 파일로 번들링하세요. 번들링하기 전에 index.html이 존재하는지 확인하세요.

복잡한 Artifact 생성 및 검증

artifacts-builder를 사용해 React artifact를 스캐폴딩하고, 다단계 계획 도구를 구현하고, 번들링한 뒤, 제가 실행해야 할 수동 테스트를 식별하세요.

모범 사례

초기화 스크립트는 깨끗한 워크스페이스에서 실행하고, 편집하기 전에 생성된 파일을 검토하세요.
번들링하기 전에 artifact 상태와 UI 컴포넌트를 검사하기 충분히 작게 유지하세요.
중요한 artifacts를 공유하기 전에 번들된 HTML을 브라우저에서 테스트하세요.

피하기

React나 빌드 도구가 필요 없는 단순 정적 HTML에는 이 skill을 사용하지 마세요.
관련 없는 프로덕션 파일이 포함된 디렉터리에서 스크립트를 실행하지 마세요.
패키지 설치 결과와 브라우저 동작을 확인하기 전에 번들된 출력물을 게시하지 마세요.

자주 묻는 질문

이 skill은 무엇을 생성하나요?

고급 Claude artifacts를 위한 React, TypeScript, Vite, Tailwind CSS, shadcn/ui 프로젝트를 생성합니다.

공유 가능한 파일 하나를 생성하나요?

예. 번들 스크립트는 프로젝트를 빌드하고 asset이 인라인 처리된 단일 bundle.html 파일을 생성합니다.

어떤 도구에서 사용할 수 있나요?

보고서에는 Claude, Codex, Claude Code 워크플로 지원이 표시됩니다.

패키지 설치가 필요한가요?

예. 스크립트는 npm과 pnpm을 사용해 프론트엔드 및 번들링 의존성을 설치합니다.

단순 artifacts에 가장 적합한가요?

아니요. React, 상태 관리, 라우팅 또는 재사용 가능한 컴포넌트가 필요한 복잡한 artifacts를 위한 것입니다.

실행하기 전에 무엇을 검토해야 하나요?

셸 스크립트, 패키지 설치 명령, 생성된 파일 변경 사항, 번들된 컴포넌트 아카이브를 검토하세요.

개발자 세부 정보

작성자

davila7

라이선스

Complete terms in LICENSE.txt

Skillstore 리비전

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/development/artifacts-builder

참조

c43861a65bb95efcae259cd161c9d6f4dc7eec6f

유지보수 최신성

2026. 7. 24.

사용량

4 다운로드 · 280 조회

파일 구조

📄 LICENSE.txt

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md

davila7의 다른 스킬

전체 보기

📦

latex-posters

LaTeX 연구 포스터 만들기

연구 포스터는 LaTeX에서 인쇄용으로 서식을 맞추고 교정하기 어렵습니다. 이 skill은 학회 제출에 적합한 포스터를 위한 템플릿, 레이아웃 지침, PDF 검사를 제공합니다.

디자인 및 크리에이티브 보기

📦

content-creator

SEO에 최적화된 마케팅 콘텐츠 만들기

마케팅 팀에는 브랜드 보이스와 검색 목표에 맞는 명확한 콘텐츠가 필요합니다. 이 스킬은 반복 가능한 콘텐츠 제작을 위한 템플릿, 분석 스크립트, 플랫폼 가이드를 제공합니다.

글쓰기 및 콘텐츠 보기

📦

treatment-plans

구조화된 의료 치료 계획 작성

임상 치료 계획은 일관성이 떨어지거나 지나치게 길어지고 검토하기 어려워지는 경우가 많습니다. 이 skill은 핵심에 집중한 템플릿, 측정 가능한 목표, 일정 및 로컬 품질 검사를 제공합니다.

문서화 보기

📦

clinical-reports

구조화된 임상 보고서 작성

임상 팀은 의료 및 규제 기준을 따르는 명확한 보고서가 필요합니다. 이 스킬은 증례 보고서, 진단, 임상시험, 환자 기록을 위한 템플릿, 체크리스트, 검증 지침을 제공합니다.

문서화 보기

📦

exploratory-data-analysis

과학 데이터 파일 분석

과학 데이터 파일은 형식마다 구조와 메타데이터를 서로 다르게 저장하기 때문에 검사하기 어렵습니다. 이 스킬은 형식을 감지하고, 데이터 품질을 프로파일링하며, 실용적인 마크다운 EDA 보고서를 생성합니다.

데이터 및 분석 보기

📦

diffdock

DiffDock 분자 도킹 워크플로 실행

분자 도킹 설정은 입력, 매개변수, 신뢰도 점수를 맞추기 어려워 실패하는 경우가 많습니다. 이 스킬은 준비부터 결과 검토까지 DiffDock 워크플로를 안내합니다.

연구 및 학습 보기

전체 보기

📦

vercel-react-view-transitions

React View Transitions 구현

작성자 vercel-labs

React view transitions는 배치 위치를 잘못 잡기 쉬워, 조용히 발생하거나 시끄러운 애니메이션을 유발할 수 있습니다. 이 스킬은 라우트, Suspense, 목록, 공유 요소 애니메이션 선택을 안내합니다.

코딩 및 개발 보기

📦

vercel-react-best-practices

React 및 Next.js 성능 최적화

작성자 vercel-labs

React 및 Next.js 앱은 워터폴, 큰 번들, 피할 수 있는 재렌더링으로 인해 속도가 저하되는 경우가 많습니다. 이 스킬은 에이전트에게 성능 중심 변경을 더 안전하게 수행하기 위한 구체적인 규칙을 제공합니다.

코딩 및 개발 보기

📦

styling-with-shadcn

Next.js에서 shadcn/ui 인터페이스 구축하기

작성자 Asmayaseen

React 팀에는 최신 Next.js와 함께 작동하는 일관된 UI 패턴이 필요합니다. 이 스킬은 shadcn/ui 설정 가이드, 컴포넌트 예제, 폼 검증, 테이블, 사이드바, 다크 모드 패턴을 제공합니다.

코딩 및 개발 보기

📦

senior-fullstack

시니어 가이드와 함께 풀스택 앱 빌드

작성자 alirezarezvani

풀스택 프로젝트에는 일관된 설정, 아키텍처 선택, 품질 검사가 필요한 경우가 많습니다. 이 스킬은 React, Next.js, Node.js, GraphQL, PostgreSQL 작업을 위한 스크립트와 참고 자료를 제공합니다.

코딩 및 개발 보기

📦

react-dev

타입 안전한 React 컴포넌트 빌드

작성자 softaworks

React TypeScript 작업에는 정확한 이벤트, hook, route 타입이 필요한 경우가 많습니다. 이 스킬은 타입 지정 컴포넌트, React 19 API, routing을 위한 집중적인 패턴을 제공합니다.

코딩 및 개발 보기

📦

react-email

Resend로 React Email 템플릿 빌드하기

작성자 resend

이메일 클라이언트마다 동작이 달라 프로덕션 준비가 된 이메일 템플릿을 만드는 것은 어렵습니다. 이 스킬은 Claude, Codex, Claude Code가 React Email 컴포넌트, 전송, 스타일링, 현지화, 편집기 워크플로를 다룰 수 있도록 안내합니다.

코딩 및 개발 보기

artifacts-builder

내 에이전트로 설치

에이전트가 읽기 쉬운 리소스

테스트해 보기

보안 감사

확인된 보안 우려 사항 (2)

위험 요인

보고서 링크 복사

Markdown 배지

HTML 배지

임베드 카드

APA 인용

BibTeX 인용

CITATION.cff

변형 비교

Skillstore 점수

만들 수 있는 것

상태를 가진 Artifact 프로토타입 제작

공유용 UI 데모 패키징

shadcn/ui 컴포넌트로 시작

이 프롬프트를 사용해 보세요

모범 사례

피하기

자주 묻는 질문

개발자 세부 정보

davila7의 다른 스킬

latex-posters

content-creator

treatment-plans

clinical-reports

exploratory-data-analysis

diffdock

관련 스킬

vercel-react-view-transitions

vercel-react-best-practices

styling-with-shadcn

senior-fullstack

react-dev

react-email