메뉴
Load when a task needs complex standalone React/Tailwind/shadcn browser artifacts with state, routing, or bundled components; use effective-interact for reports and frontend-design for production UI.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Load when a task needs a throwaway prototype, state-model sanity check, UI variant, image-assisted visual mockup, mock interaction, or playable design; do not use for production feature work.
Load when a user describes a Web animation or motion effect without knowing its name and needs the precise term or close alternatives; use only for naming, not design, implementation, or review.
Load when a frontend task needs Apple-platform design guidance or physical, gesture-driven, velocity-aware, interruptible interaction; skip generic visual styling and use review-animations for report-only motion review.
Load when a task needs polished product UI, web pages, landing pages, dashboards, React components, HTML/CSS layouts, or styling; skip routine frontend logic and reports.
Load when a task needs React or Next.js frontend logic, component patterns, state, forms, routing, accessibility, or responsive behavior; use frontend-design for visual direction.
Load when an existing Web product, especially a dashboard, dense-data view, or multi-step app, needs a deep evidence-backed experience review; report findings only, and use design-taste-frontend for marketing-page direction, code-review for source diffs, web-design-guidelines for checklist compliance, or frontend-design for implementation.
| name | web-artifacts-builder |
| description | Load when a task needs complex standalone React/Tailwind/shadcn browser artifacts with state, routing, or bundled components; use effective-interact for reports and frontend-design for production UI. |
| license | Complete terms in LICENSE.txt |
Harness Hub adaptation: final bundles are verified before handoff.
To build powerful frontend local browser artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Agent conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportBefore sharing the artifact, open the final bundle, exercise its critical interaction, and check for console errors. Add screenshots, accessibility checks, or broader browser coverage when risk-based verification requires them.
Share the verified bundle.html file in conversation with the user so they can view it as an artifact.