artifacts-builder

ComposioHQ/awesome-claude-skills · Agent Skill

Набор инструментов для создания сложных многокомпонентных веб-интерфейсов на React, Tailwind CSS и shadcn/ui. Подходит для разработки интерактивных приложений с управлением состоянием и маршрутизацией внутри Claude AI.

Перейти к установке ↓

Обзор

Автор	ComposioHQОрганизация
Репозиторий	ComposioHQ/awesome-claude-skills ↗
Папка скилла	`artifacts-builder`
Звёзды	75 517
Форки	8 757
Файлы	5
Лицензия	не указана — уточните у автора
Обновлён	18 сентября 2026 г.
Ссылки	Исходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность

средний риск · обнаружено 1 момент, требующий внимания

Совместимость

подходит не для всех систем

Похожие скиллы

найдено 144 похожих скилла

Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «artifacts-builder» с mozgi.io (https://mozgi.io/skills/artifacts-builder-ComposioHQ/).

1. Скачай архив: https://mozgi.io/skills/artifacts-builder-ComposioHQ/download
Если не скачивается — возьми папку скилла из исходника: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «artifacts-builder» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/artifacts-builder/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

git clone --depth 1 --branch master 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

Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /artifacts-builder. Для всех проектов сразу — папка ~/.claude/skills.

git clone --depth 1 --branch master https://github.com/ComposioHQ/awesome-claude-skills.git /tmp/awesome-claude-skills
mkdir -p .agents/skills
cp -r /tmp/awesome-claude-skills/artifacts-builder .agents/skills/artifacts-builder

Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $artifacts-builder. Для всех проектов — ~/.agents/skills.

git clone --depth 1 --branch master https://github.com/ComposioHQ/awesome-claude-skills.git /tmp/awesome-claude-skills
mkdir -p .cursor/skills
cp -r /tmp/awesome-claude-skills/artifacts-builder .cursor/skills/artifacts-builder

Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.

git clone --depth 1 --branch master https://github.com/ComposioHQ/awesome-claude-skills.git /tmp/awesome-claude-skills
mkdir -p .gemini/skills
cp -r /tmp/awesome-claude-skills/artifacts-builder .gemini/skills/artifacts-builder

Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.

Файлы скилла

5 файлов Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

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, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

✅ React + TypeScript (via Vite)
✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
✅ Path aliases (@/) configured
✅ 40+ shadcn/ui components pre-installed
✅ All Radix UI dependencies included
✅ Parcel configured for bundling (via .parcelrc)
✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
Creates .parcelrc config with path alias support
Builds with Parcel (no source maps)
Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

shadcn/ui components: https://ui.shadcn.com/docs/components

Вопросы и ответы

Что делает скилл artifacts-builder?

Как установить artifacts-builder?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает artifacts-builder?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому artifacts-builder подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл artifacts-builder бесплатный?

Скилл опубликован автором ComposioHQ в открытом доступе. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены. Лицензия в репозитории не указана — перед коммерческим использованием уточните условия у автора.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.