Skills Directory

ComposioHQ/awesome-claude-skills

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.

3.9K installs 74K starsUpdated Aug 11, 2026License: No license file

Install

npx skills add ComposioHQ/awesome-claude-skills@artifacts-builder

Runs in your terminal. Adds the skill globally for Claude Code, Cursor, Codex and others; add -g -y to skip prompts.

What it does

Artifacts Builder To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using scripts/init-artifact.sh 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh 4. Display artifact to user 5. (Optional) Test the artifact Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui Design & Style Guidelines VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners,…

Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.

View source on GitHub

Before you install

Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.

Categories

Related skills

  • changelog-generator

    ComposioHQ/awesome-claude-skills

    Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

    6.4K installs 74KDocumentationProductivityWriting
  • competitive-ads-extractor

    ComposioHQ/awesome-claude-skills

    Extracts and analyzes competitors' ads from ad libraries (Facebook, LinkedIn, etc.) to understand what messaging, problems, and creative approaches are working. Helps inspire and improve your own ad campaigns.

    4.7K installs 74KResearchProductivity
  • canvas-design

    ComposioHQ/awesome-claude-skills

    Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

    3.9K installs 74KDesign & UIOffice documents
  • brand-guidelines

    ComposioHQ/awesome-claude-skills

    Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

    3.6K installs 74KDesign & UIMarketingAI & agents
  • anthropic-administrator-automation

    ComposioHQ/awesome-claude-skills

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

    10 installs 74KDocumentationAI & agentsProductivity
  • api-bible-automation

    ComposioHQ/awesome-claude-skills

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

    9 installs 74KDocumentationAI & agentsProductivity

← Search skills

/skills/ComposioHQ/awesome-claude-skills/artifacts-builder/