Source profileQuality 63/100

nexu-io/open-design/skills/web-artifacts-builder/SKILL.md

web-artifacts-builder

Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.

Source repository stars
82,073
Declared platforms
0
Static risk flags
1
Last source update
2026-07-28
Source checked
2026-07-28

Decision brief

What it does—and where it fits

Curated from Anthropic's official skills repository.

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/nexu-io/open-design --skill "skills/web-artifacts-builder"
    Safe inspection promptEditorial

    Inspect the Agent Skill "web-artifacts-builder" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/skills/web-artifacts-builder/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      How to use

      This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:

      This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into y…
    2. 02

      What it does

      Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.

      Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.
    3. 03

      Source

      Upstream: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

      Upstream: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builderCategory: web-artifacts- Upstream: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder - Category: web-artifacts

    Permission review

    Static risk signals and limitations

    Network access

    medium · line 23

    The documentation includes network, browsing, or remote request actions.

    open https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score63/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars82,073SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guidecatalog recordEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    nexu-io/open-design
    Skill path
    skills/web-artifacts-builder/SKILL.md
    Commit
    89d6d4ef21baf80f871595abdf6f7de6e941dd44
    License
    Apache-2.0
    Collected
    2026-07-28
    Default branch
    main
    View the original SKILL.md

    web-artifacts-builder

    Curated from Anthropic's official skills repository.

    What it does

    Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.

    Source

    How to use

    This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:

    # Inspect the upstream README for exact paths
    open https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
    

    Then ask the agent to invoke this skill by name (web-artifacts-builder) or with one of the trigger phrases listed in this skill's frontmatter.

    Alternatives

    Compare before choosing

    Computed 71164,673

    anthropics/skills

    web-artifacts-builder

    Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

    Computed 9427

    MoizIbnYousaf/marketing-cli

    cmo-remotion

    Brand-grounded Remotion video pipeline. Take a brief, ground it in `brand/` (voice, audience, positioning, creative-kit), write a beat sheet, scaffold a fresh Remotion project, generate any required assets, compose with frame-driven animations, and bake a final MP4. Use this skill whenever the user wants to build a NEW Remotion video from scratch — product films, motion graphics, code-driven shaders, CRT/glitch effects, HTML-in-canvas demos, React video. Triggers on requests like "make a remotio

    Computed 9237,126

    github/awesome-copilot

    project-workflow-analysis-blueprint-generator

    Comprehensive technology-agnostic prompt generator for documenting end-to-end application workflows. Automatically detects project architecture patterns, technology stacks, and data flow patterns to generate detailed implementation blueprints covering entry points, service layers, data access, error handling, and testing approaches across multiple technologies including .NET, Java/Spring, React, and microservices architectures.

    Computed 9137,126

    github/awesome-copilot

    adobe-illustrator-scripting

    Write, debug, and optimize Adobe Illustrator automation scripts using ExtendScript (JavaScript/JSX). Use when creating or modifying scripts that manipulate documents, layers, paths, text frames, colors, symbols, artboards, or any Illustrator DOM objects. Covers the complete JavaScript object model, coordinate system, measurement units, export workflows, and scripting best practices.