메뉴
현대적인 프런트엔드 웹 기술(React, Tailwind CSS, shadcn/ui)을 사용하여 정교한 다중 컴포넌트 claude.ai용 HTML artifact를 제작하기 위한 툴킷입니다. 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 복잡한 artifact에 사용하세요. 단순한 단일 파일 HTML/JSX artifact용이 아닙니다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
OpenAPI/Swagger 사양, 인증 패턴, 버전 관리 전략 및 모범 사례를 사용하여 RESTful 및 GraphQL API를 설계하고 문서화합니다. 사용 사례: (1) API 사양 생성, (2) REST 엔드포인트 설계, (3) GraphQL 스키마 설계, (4) API 인증 및 권한 부여, (5) API 버전 관리 전략, (6) 문서 생성
코드나 구현 계획을 작성하기 전, 무언가를 생성하거나 개발할 때 사용합니다. 협력적인 질문, 대안 탐색 및 점진적 검증을 통해 거친 아이디어를 구체화된 설계로 발전시킵니다. 명확한 'Mechanical' 프로세스 중에는 사용하지 마십시오.
.NET 코드에서 정적 분석(Static analysis), 보안 스캔(Security scan) 및 종속성 체크(Dependency check)를 수행합니다. 코드 품질, 보안 감사 또는 취약점 탐지가 포함된 작업에서 사용합니다.
dotnet format, prettier 및 기타 포맷팅 도구를 사용하여 코드를 정리합니다. 코드 스타일 수정, 포맷 일관성 유지 또는 커밋 전 코드 준비가 필요한 작업에서 사용합니다.
보안 스캔, 품질 지표 및 모범 사례 분석을 포함한 자동화된 코드 리뷰입니다. 다음을 위한 코드 리뷰 시 사용합니다: (1) 보안 취약점 및 일반적인 공격 벡터, (2) 코드 품질 이슈 및 유지보수 문제, (3) 성능 병목 현상 및 최적화 기회, (4) 모범 사례 및 디자인 패턴, (5) 테스트 커버리지 및 테스트 전략, (6) 문서 품질 및 완전성
.NET/C#의 코딩 규약, 명명 규칙, 레이아웃, C# 12/13/14의 최신 기능 활용 가이드라인을 정의합니다. C#/.NET 코드 작성 시, 클래스·메서드 명명 시, 코드 포맷팅 시, 또는 사용자가 코딩 규약, 명명 규칙, C# 모범 사례, Primary Constructors, Collection Expressions, field 키워드에 대해 언급했을 때 사용합니다.
| name | web-artifacts-builder |
| description | 현대적인 프런트엔드 웹 기술(React, Tailwind CSS, shadcn/ui)을 사용하여 정교한 다중 컴포넌트 claude.ai용 HTML artifact를 제작하기 위한 툴킷입니다. 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 복잡한 artifact에 사용하세요. 단순한 단일 파일 HTML/JSX artifact용이 아닙니다. |
| license | LICENSE.txt의 전체 약관 참조 |
강력한 프런트엔드 claude.ai artifact를 제작하려면 다음 단계를 따르세요:
scripts/init-artifact.sh를 사용하여 프런트엔드 레포지토리를 초기화합니다.scripts/bundle-artifact.sh를 사용하여 모든 코드를 단일 HTML 파일로 번들링합니다.기술 스택(Stack): React 18 + TypeScript + Vite + Parcel (번들링) + Tailwind CSS + shadcn/ui
매우 중요: "AI가 만든 뻔한 느낌(AI slop)"을 피하기 위해, 과도한 중앙 정렬 레이아웃, 보라색 그라데이션, 일률적인 둥근 모서리, Inter 폰트 사용을 지양하세요.
초기화 스크립트를 실행하여 새로운 React 프로젝트를 생성합니다:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
이 명령은 다음이 구성된 프로젝트를 생성합니다:
@/) 설정 완료생성된 파일들을 편집하여 artifact를 빌드합니다. 안내가 필요한 경우 아래의 일반적인 개발 작업을 참조하세요.
React 앱을 단일 HTML artifact로 번들링합니다:
bash scripts/bundle-artifact.sh
이 명령은 bundle.html을 생성합니다. 이는 모든 JavaScript, CSS 및 종속성이 인라인화된 독립적인 artifact 파일입니다. 이 파일은 Claude 대화에서 artifact로 직접 공유할 수 있습니다.
요구 사항: 프로젝트 루트 디렉토리에 index.html이 있어야 합니다.
스크립트 동작 원리:
.parcelrc 설정 생성번들링된 HTML 파일을 사용자에게 공유하여 artifact로 볼 수 있게 합니다.
참고: 이 단계는 완전히 선택 사항입니다. 필요한 경우 또는 요청이 있을 때만 수행하세요.
artifact를 테스트하거나 시각화하려면 가용한 도구들(다른 SKILL이나 Playwright, Puppeteer와 같은 내장 도구 포함)을 사용하세요. 일반적으로 artifact 테스트를 미리 수행하는 것은 요청과 결과 확인 사이의 지연 시간(latency)을 유발하므로 피하는 것이 좋습니다. 요청이 있거나 문제가 발생했을 때, artifact를 먼저 제시한 후에 테스트를 진행하세요.