| name | ls-web-artifacts-builder |
| description | Guide creation of rich HTML/React web artifacts. Use for self-contained interactive artifacts, prototypes, dashboards, and visual demos. |
| metadata | {"version":"1.0"} |
| extensions | {"external_skill":{"source_kind":"native-reference","source_url":"https://github.com/anthropics/skills","source_path":"skills/web-artifacts-builder/SKILL.md","source_commit":"9d2f1ae187231d8199c64b5b762e1bdf2244733d","source_ref":"main","source_sha256":"81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8","license":"NO_REPO_LICENSE_FOUND","import_date":"2026-07-03","vetting_status":"provenance-recorded-no-bundled-tooling-executed"}} |
Web Artifacts
Use this skill when working on web artifacts tasks.
Workflow
- Choose the simplest artifact shape that satisfies the interaction: static HTML, vanilla JS, or React only when state complexity warrants it.
- Keep artifacts self-contained, accessible, responsive, and free of secrets or live credentials.
- Test rendered output in a browser or Playwright when layout, interaction, or canvas behavior matters.
- For design-heavy work, use image generation only as a concept aid: create candidate visuals, ask the user which direction to implement, then treat the accepted design as the implementation spec.
- Extract the accepted design into concrete system decisions: layout grid, hierarchy, typography, color roles, spacing, component states, imagery, and interaction details.
- Implement faithfully against those decisions, cross-routing to
ls-frontend-design for visual direction and ls-ui-browser-debugging for screenshot evidence.
- Compare desktop and mobile browser screenshots against the accepted concept, then adjust layout, spacing, contrast, and responsive behavior before claiming visual parity.
Boundaries
- Inspect the target repository before making changes.
- Prefer existing project patterns, declared package managers, and documented validation commands.
- Do not expose secrets, credentials, private user data, or production account identifiers in source, examples, or logs.
- When external APIs or current vendor behavior matter, verify against official docs before implementation.
- For OpenAI image generation workflows, verify current API behavior against:
License Boundary
The upstream repository snapshot did not expose a top-level license file during this run. This skill is Localsetup-native guidance and does not copy upstream body text or bundled assets.
Provenance
- Source:
https://github.com/anthropics/skills
- Ref:
main at 9d2f1ae187231d8199c64b5b762e1bdf2244733d
- Source path:
skills/web-artifacts-builder/SKILL.md
- License classification:
NO_REPO_LICENSE_FOUND
- Source SHA-256:
81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8
