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.
Before you install
- Last update
- Files in folder
- 5
- Scripts
- Contains scripts. Review them before running.
- SKILL.md size
- 3.0 KB (about 770 tokens of context each time it loads)
- License
- No license file
- Source on GitHub
- ComposioHQ/awesome-claude-skills
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.
Install
npx skills add ComposioHQ/awesome-claude-skills@artifacts-builderRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add ComposioHQ/awesome-claude-skills@artifacts-builder --agent claude-code -y- Project install writes to
.claude/skills/artifacts-builder- Global install writes to
~/.claude/skills/artifacts-builder
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /artifacts-builder.
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.
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.
- 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.
- 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.
- 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.
- anthropic-administrator-automation
ComposioHQ/awesome-claude-skills
Automate Anthropic Admin tasks via Rube MCP (Composio). Always search tools first for current schemas.
- api-bible-automation
ComposioHQ/awesome-claude-skills
Automate API Bible tasks via Rube MCP (Composio). Always search tools first for current schemas.