Run any Skill in Manus with one click

ls-web-artifacts-builder

Stars3

Forks2

UpdatedJuly 3, 2026 at 20:53

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

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

CruxExperts

CruxExperts/localsetup

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

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:
- 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

More from this repository

same repository

ls-nodejs-nextjs

CruxExperts/localsetup

Practical Node.js and Next.js project runbook. Use for Node, Next.js, React, package-manager, build, migration, debugging, testing, security, deployment, and version-verification tasks.

2026-07-053

ls-scrapling

CruxExperts/localsetup

Host-first Scrapling integration skill: install or upgrade Scrapling via pipx, run single-URL extractions (simple and structured), and manage adapter and version refresh flows, with Docker as an optional escape hatch.

2026-07-053

ls-shadcn-ui

CruxExperts/localsetup

Project-aware shadcn/ui guide. Use for shadcn setup, components, CLI/MCP, registry, theming, forms, Radix/Base UI, aliases, updates, and troubleshooting in React UI projects.

2026-07-053

ls-workflow-codex-github-issue-goal-loop

CruxExperts/localsetup

Use when running a bounded Codex goal loop over GitHub issues, PRs, and maintenance alerts with explicit approval gates.

2026-07-053

ls-omniroute-admin-automation

CruxExperts/localsetup

Comprehensive OmniRoute administration and automation via Python tooling. Use when you need full API-driven control of providers, nodes, aliases, combos, fallbacks, keys, policies, budgets, backup/restore, sync, resilience, and configuration reconciliation with safety gates.

2026-07-043

ls-omniroute-codex

CruxExperts/localsetup

OmniRoute client onboarding and Codex CLI configuration workflow. Use for setup, launch, Codex profile files, wire_api responses configuration, and safe agent-client registration with OmniRoute.

2026-07-043

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