Skip to content
mcp/skillhub

Agent Skill

Artifacts Builder skill

artifacts-builderComposioHQ/awesome-claude-skillsartifacts-builder/SKILL.md

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.

78kComplete terms in LICENSE.txt

always on

63 tokname + description

once used

620 tokSKILL.md body

bundled files

42 scripts

repo stars

78kGitHub

Install the Artifacts Builder skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/ComposioHQ/awesome-claude-skills --skill artifacts-builder

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/ComposioHQ/awesome-claude-skills.git /tmp/awesome-claude-skills
mkdir -p ~/.claude/skills
cp -R /tmp/awesome-claude-skills/artifacts-builder ~/.claude/skills/artifacts-builder

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description63 tok
When the agent uses itThe SKILL.md instructions620 tok
Only if opened4 bundled files (42 KB)varies

Until it is used, artifacts-builder costs about 22× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 150 skills from ComposioHQ/awesome-claude-skills would load 4,376 tokens of descriptions. Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Artifacts Builder
  • Design & Style Guidelines
  • Quick Start
  • Step 1: Initialize Project
  • Step 2: Develop Your Artifact
  • Step 3: Bundle to Single HTML File
  • Step 4: Share Artifact with User
  • Step 5: Testing/Visualizing the Artifact (Optional)
  • Reference

More skills from ComposioHQ/awesome-claude-skills

All skills in this repo
  1. -21risk-automationComposioHQ/awesome-claude-skills

    Automate 21risk tasks via Rube MCP (Composio). Always search tools first for current schemas.

    78k29 tok idle · 692 in use
  2. -2chat-automationComposioHQ/awesome-claude-skills

    Automate 2chat tasks via Rube MCP (Composio). Always search tools first for current schemas.

    78k29 tok idle · 692 in use
  3. Ahrefs AutomationComposioHQ/awesome-claude-skills

    Automate SEO research with Ahrefs -- analyze backlink profiles, research keywords, track domain metrics history, audit organic rankings, and perform batch URL analysis through the Composio Ahrefs integration.

    78k42 tok idle · 1,924 in use
  4. Apify AutomationComposioHQ/awesome-claude-skills

    Automate web scraping and data extraction with Apify -- run Actors, manage datasets, create reusable tasks, and retrieve crawl results through the Composio Apify integration.

    78k38 tok idle · 1,628 in use
  5. Apollo AutomationComposioHQ/awesome-claude-skills

    Automate Apollo.io lead generation -- search organizations, discover contacts, enrich prospect data, manage contact stages, and build targeted outreach lists -- using natural language through the Composio MCP integration.

    78k41 tok idle · 1,704 in use
  6. Ashby AutomationComposioHQ/awesome-claude-skills

    Automate recruiting and hiring workflows in Ashby -- manage candidates, jobs, applications, interviews, and notes through natural language commands.

    78k30 tok idle · 1,588 in use
  7. Attio AutomationComposioHQ/awesome-claude-skills

    Automate Attio CRM operations -- search records, query contacts and companies with advanced filters, manage notes, list attributes, and navigate your relationship data -- using natural language through the Composio MCP integration.

    78k45 tok idle · 1,508 in use
  8. Braintree AutomationComposioHQ/awesome-claude-skills

    Braintree Automation: manage payment processing via Stripe-compatible tools for customers, subscriptions, payment methods, and transactions

    78k25 tok idle · 1,779 in use