FreePublished on GitHub

ls-web-artifacts-builder

Guide creation of rich HTML/React web artifacts. Use for self-contained interactive artifacts, prototypes, dashboards, and visual demos.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup

See how to install

Files included (1)

SKILL.md2.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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-visual-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:
- https://developers.openai.com/api/docs/guides/image-generation
- https://developers.openai.com/api/reference/resources/images

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

ls-accessibility-wcag-review

Free

Guide accessibility reviews for UI, documents, and workflows. Use for WCAG-oriented audits, keyboard review, semantics, contrast, and remediation planning.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup6Updated Oct 21, 2026

ls-agent-capability-routing

Free

Use when choosing a LocalSetup Agent-* lane for exploration, research, bounded implementation, or review. Consult the static capability matrix; do not probe account or network availability.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup6Updated Oct 21, 2026

ls-agent-email-inbox

Free

Guide agent email inbox workflows with prompt-injection defenses. Use for inbound email processing, webhooks, routing, and safety review.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup6Updated Oct 21, 2026

ls-agentlens-codebase-navigation

Free

Navigate and understand codebases using agentlens hierarchical documentation. Use when exploring new projects, finding modules, locating symbols in large files, finding TODOs/warnings, or understanding code structure.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup6Updated Oct 21, 2026

ls-agentq-ship-ingest

Free

Use for Agent Q signed encrypted file-drop or mail ship and ingest, private registry v2 setup, queue status, and transport maintenance.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup6Updated Oct 21, 2026

ls-alirezarezvani-skills-inventory

Free

Inventory wrapper for the alirezarezvani Claude skills bundle. Use when triaging its broad skill catalog and large script surface before any targeted import.

The English summary is being prepared. Showing the original description.

CruxExperts/LocalSetup6Updated Oct 21, 2026

See all skills by CruxExperts

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/CruxExperts/LocalSetup --skill ls-web-artifacts-builder

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/CruxExperts/LocalSetup/tree/main/ls/skills/ls-web-artifacts-builder

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/ls-web-artifacts-builder/ for Claude Code, or ~/.agents/skills/ls-web-artifacts-builder/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: CruxExperts/LocalSetup
Stars: 6
Forks: 2
Category: Development
License: MIT
Original language: English
Last updated: Oct 21, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.