agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/composio-artifacts/SKILL.md

composio-artifacts

Skill32 starsChanged 6 months agoMITView on GitHub

Build elaborate multi-component claude.ai HTML artifacts with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui, then bundle them into a single HTML file. This is the artifacts-builder skill from ComposioHQ's awesome-claude-skills collection, a copy of Anthropic's web-artifacts-builder. It does not integrate Composio tools.

  • Installs packages

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 0 are distinctive, and 2 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈0

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    When you want Anthropic's own maintained copy — use anthropics-skills (installs web-artifacts-builder)

    line 74
  2. Very specific:

    When you want an artifact wired to external services (GitHub, Slack, Linear, Notion) through Composio: that is a different Composio skill …

    line 75

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

composio-artifacts

Catalogue stub — full skill: ComposioHQ/awesome-claude-skills

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. Is the full skill already installed? Upstream names this skill artifacts-builder, so it installs next to this pointer (the pointer is not replaced).
    • Global: f=~/.agents/skills/artifacts-builder/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/artifacts-builder/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as artifacts-builder, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/composio-artifacts ] && echo "global" || echo "project"

    Global:

    npx skills add ComposioHQ/awesome-claude-skills --skill artifacts-builder -g -y

    Project:

    npx skills add ComposioHQ/awesome-claude-skills --skill artifacts-builder -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Node.js 18+ and a shell (the bundled init script runs npm install -g pnpm if pnpm is missing, then installs npm dependencies)
  • License: Apache-2.0 (skill's own LICENSE.txt; the repo has no top-level LICENSE file)
<!-- das:install:end -->

Invoke after install

  • Skill name: artifacts-builder
  • Trigger phrases: "composio artifacts", "interactive artifact", "artifacts builder", "shadcn artifact", "bundle artifact to single HTML"

What it does

A suite of tools for building complex claude.ai artifacts that need state management, routing, or shadcn/ui components. The skill scaffolds a React + TypeScript + Vite project with Tailwind CSS and a set of pre-installed shadcn/ui components (scripts/init-artifact.sh), lets the agent develop the artifact in that project, then bundles everything into one self-contained bundle.html with Parcel and html-inline (scripts/bundle-artifact.sh) that can be shared as an artifact. It also carries design guidance to avoid "AI slop" (centered layouts, purple gradients, uniform rounded corners, Inter).

The skill is a copy of Anthropic's web-artifacts-builder that happens to live in Composio's collection. Despite the stub name and trigger "composio", it contains no Composio integration: no external tool calls, no API key.

When NOT to use

  • Simple single-file HTML or JSX artifacts that need no state, routing, or component library
  • When you want Anthropic's own maintained copy — use anthropics-skills (installs web-artifacts-builder)
  • When you want an artifact wired to external services (GitHub, Slack, Linear, Notion) through Composio: that is a different Composio skill (connect-apps in the same upstream repo) and is not part of this catalogue

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free