Skip to content
Mingworks
EN · Language: English
简体中文繁體中文English
Back to Skills
Websites & codingFor developers107.5K installs

Build more complex web mini-apps

Builds multi-component pages with React and shadcn/ui, then bundles them into a single HTML file.

Good for: People who know a bit of front-end and want to build pages with richer interactions

Before you start: You'll need Node.js 18 or later and bash on your computer.

What you can do once it's installed

Just say the “You say to AI” line, with your own details swapped in.

Build a little budgeting tool

You say to AI

Make a small web tool for tracking spending that lets me switch between months, bundled into a single HTML file.

What AI does

  1. 1.Sets up a React project with a script
  2. 2.Writes the page and the state logic
  3. 3.Bundles everything into a single bundle.html

What you get

A little tool in bundle.html that opens with a double-click.

A reading list with tabs

You say to AI

Make a reading list web page with tabs you can switch between, using shadcn/ui components.

What AI does

  1. 1.Sets up a project with shadcn/ui
  2. 2.Builds the tabs and list components
  3. 3.Bundles it into a single HTML file

What you get

A single-file web page with all the code and styles inlined.

Want the original instructions? SKILL.md on anthropics/skills

How to install

Which AI tool do you use?

  1. 1. Open the Terminal app on your computer, paste the line below and press Enter

    npx skills add anthropics/skills@web-artifacts-builder -g

    With no tool name, the command looks for the AI tools on your computer and asks where to install. If it says npx is missing or too old, install the latest Node.js (22 or newer) first.

    First time using the terminal?
    • How to open it: on a Mac, press ⌘ + Space and search “Terminal”. On Windows, search “PowerShell” in the Start menu. In Cursor, Trae or VS Code, use the menu Terminal → New Terminal.
    • Windows says “running scripts is disabled”: change npx at the start of the command to npx.cmd and try again.
    • If a list pops up: move with the arrow keys, press Space to tick the tools you want, then press Enter.
    • How to tell it worked: you'll see a success message. Reopen your AI tool and ask “What Skills do you have now?” to check.

    Don't feel like opening a terminal?

    Tools like Claude Code, Codex, Cursor and Trae can run commands themselves. Send them this:

    Please run this command in my terminal and tell me how it went: npx skills add anthropics/skills@web-artifacts-builder -g

  2. 2. Reopen your AI tool

    New Skills only get picked up after a restart.

  3. 3. Just say what you want

    Say it the way the examples do. To call it by name, say “Use web-artifacts-builder to help me…”.

More for “Websites & coding”

  • Websites & codingInstall and go

    Make web pages that don't look like templates

    Gives the web pages AI builds a style of their own, instead of the same old template look.

    Good for: People who want AI to build a personal homepage or an event page

    886.5K installsSee how to use it
  • Websites & codingNeeds a little setup

    Make your own Skill

    Turns the way you usually do something into a Skill, and can run tests to see how well it works.

    Good for: People who want to hand their own routine to AI

    402K installsSee how to use it
  • Websites & codingFor developers

    Track down bugs systematically

    When an error shows up, it finds the root cause before fixing anything, instead of guessing and hoping.

    Good for: People who often get stuck on bugs when coding

    292.9K installsSee how to use it