| name | web-artifacts-builder |
| description | Use this skill when the user asks to: "create an HTML artifact", "generate a standalone webpage",
"build a landing page", "create an interactive demo", "make a 3D web experience", "build a browser game",
"create a portfolio page", or mentions generating self-contained HTML/CSS/JS files, web artifacts,
or single-file web applications.
|
| version | 1.0.0 |
Web Artifacts Builder Skill
Generate complete, self-contained HTML files with embedded CSS and JavaScript. All artifacts are single-file, portable, and require no build steps.
Core Principles
- Single File: All CSS in
<style> tags, all JS in <script> tags
- CDN Dependencies: External libraries (Three.js, GSAP, etc.) loaded via CDN only
- Mobile-First: Responsive design with graceful degradation
- Performance: Minimal DOM, requestAnimationFrame for animations
- Semantic HTML5: Proper structure, accessibility considerations
Artifact Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Artifact Title]</title>
<style>
:root {
}
</style>
</head>
<body>
<script>
</script>
</body>
</html>
Template Categories
1. Landing Pages
- Hero sections with gradients and animations
- Call-to-action buttons with hover effects
- Feature grids and testimonial sections
- Scroll-triggered animations
2. 3D Experiences (Three.js)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
3. Interactive Games
- Canvas-based rendering
- Keyboard/mouse/touch input handling
- Game state management
- Score tracking and animations
4. Portfolio Showcases
- Project galleries with filtering
- Parallax scrolling effects
- Image lightboxes
- Contact forms (frontend only)
CSS Techniques
3D Card Tilt Effect
.card {
transform-style: preserve-3d;
perspective: 1000px;
transition: transform 0.3s ease;
}
.card:hover {
transform: rotateY(5deg) rotateX(-5deg) translateZ(20px);
}
Glassmorphism
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}
Gradient Animations
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient-shift 15s ease infinite;
}
Parallax Scrolling
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
document.querySelector('.layer-back').style.transform = `translateY(${scrollY * 0.2}px)`;
document.querySelector('.layer-mid').style.transform = `translateY(${scrollY * 0.5}px)`;
});
Common CDN Links
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
Mobile Responsiveness
Always include mobile detection and graceful degradation:
const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (isMobile) {
}
@media (max-width: 768px) {
.desktop-only { display: none; }
.card-grid { grid-template-columns: 1fr; }
.hero-title { font-size: 2rem; }
}
Quality Checklist
Before completing an artifact:
Output Location
Save generated artifacts to public/ directory for immediate access:
public/artifact-name.html - Accessible at /artifact-name.html
