---
name: anthropic-web-artifacts-builder
description: Build and iterate on web artifacts — self-contained HTML pages for visual content, interactive prototypes, and rich documents. Use this skill when creating HTML documents with embedded CSS/JS for sharing or standalone use, building interactive prototypes or demos, creating rich, self-contained visual documents, or iterating on existing web artifacts.
license: Complete terms in LICENSE.txt
---

# Web Artifacts Builder

A skill for building and iterating on self-contained HTML web artifacts.

## What Are Web Artifacts?

Web artifacts are standalone HTML files that contain all their CSS and JavaScript inline. They're designed to be:
- Self-contained (single HTML file, no external dependencies except web fonts or CDN libraries)
- Shareable (can be opened in any browser or sent as a file)
- Visually rich (full CSS and JS capabilities)
- Interactive (can include JS for dynamic behavior)

## When to Use This Skill

- Creating landing pages, portfolios, or marketing pages
- Building interactive prototypes or demos
- Creating rich visual documents or reports
- Building dashboards or data visualizations
- Creating educational or tutorial content
- Iterating on existing web artifacts

## Best Practices

### Structure
- One self-contained HTML file
- CSS in `<style>` tags in the `<head>`
- JavaScript in `<script>` tags at the end of `<body>`
- Use semantic HTML (header, nav, main, section, footer)

### Performance
- Minimize external dependencies
- Use system fonts or Google Fonts (loaded once)
- Optimize images (use SVG where possible, reference external images when too large)
- Keep the file under 1MB when possible

### Accessibility
- Use semantic HTML elements
- Include ARIA labels where needed
- Ensure sufficient color contrast
- Support keyboard navigation
- Test with screen readers

### Responsive Design
- Use CSS Grid and Flexbox for layouts
- Include a viewport meta tag
- Use relative units (rem, em, %, vw, vh)
- Test at multiple breakpoints

## Process

1. **Clarify the purpose**: What is this artifact for?
2. **Design the layout**: Sketch the structure and visual hierarchy
3. **Build the HTML**: Create the semantic structure
4. **Style with CSS**: Apply visual design
5. **Add interactivity**: Enhance with JS if needed
6. **Polish and test**: Ensure it looks great at all sizes
