Skills/Claude Skills/Claude Skill/Source: Composio 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.

View on GitHub Source

Overview

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

Target users

Claude Code, Claude.ai, Codex, Cursor, Gemini CLI, and other AI agent users who want a reusable workflow for this task.

How to use

Install or copy the Artifacts Builder skill into your agent's skills directory, then ask the agent for a task that matches the skill description so it can load the detailed SKILL.md workflow.

Effect review

Best for repeatable tasks where a documented workflow helps an AI agent produce more consistent results than an ad hoc prompt.

Frequently asked questions

What is Artifacts Builder?

How do I use Artifacts Builder?

Install or copy the Artifacts Builder skill into your agent's skills directory, then ask the agent for a task that matches the skill description so it can load the detailed SKILL.md workflow.

Where does this skill come from?

It is synced from ComposioHQ/awesome-claude-skills, a curated directory of Claude Skills and agent workflow packages.

Quick install

Install command

Copy artifacts-builder/SKILL.md into your Claude/Codex skills directory, then restart the agent session.

Featured recommendations

Awesome Claude Skills

manual

Source repository for reusable Claude Skills and plugins.

Composio Toolkits

manual

Browse app automation toolkits that can be connected through Composio.

Related Toolkits

CSkills / Claude Skills

Connect Apps

Connect Claude to external apps like Gmail, Slack, GitHub. Use this skill when the user wants to send emails, create issues, post messages, or take actions in external services.

View Details

DSkills / Claude Skills

Developer Growth Analysis

Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends a personalized growth report to your Slack DMs.

View Details

SSkills / Claude Skills