К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

artifacts-builder — скилл для Claude Code: что делает и как установить

Скилл помогает создавать сложные многокомпонентные HTML-артефакты для claude.ai. В работе опирается на React и Tailwind CSS с библиотекой shadcn/ui.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill artifacts-builder -a claude-code
Открыть на GitHub

Что делает artifacts-builder

Скилл добавляет в окружение агента инструкции для сборки интерактивных веб-артефактов. Он ориентирован на связку React и Tailwind CSS с компонентами shadcn/ui. Агент использует эту запись при планировании, когда требуется сгенерировать интерфейс со сложной компонентной структурой.

Запись взята из репозитория ComposioHQ awesome-claude-skills и помечена как прототип. Входной манифест только объявляет скилл для поиска агентом. Если для работы понадобятся оригинальные вспомогательные скрипты upstream-проекта, их придётся загрузить отдельно. Это повод проверить готовность окружения перед запуском генерации.

Какие задачи решает

  • создать многокомпонентный прототип интерфейса для claude.ai
  • подготовить интерактивный веб-артефакт на React и Tailwind CSS
  • встроить готовые компоненты shadcn/ui в генерируемый макет

Примеры запросов агенту

  • Собери многокомпонентный артефакт интерфейса на React.
  • Используй artifacts-builder для вёрстки панели на Tailwind CSS и shadcn/ui.
  • Подготовь интерактивный html artifact для claude.ai.

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

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill artifacts-builder -a claude-code

2Вручную: положить файлы

~/.claude/skills/artifacts-builder/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/artifacts-builder/

Из того же набора39

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок

Похожие

react-native-best-practices callstackincubator Скилл передаёт агенту правила оптимизации React Native на базе опыта Callstack: от профилирования FPS и TTI до чистки бандла. Помогает устранить лаги анимаций и утечки памяти. Claude Code CX Codex Cursor +1 30 100установок screen-reader-testing Seth Hobson Скилл помогает проверять веб-приложения с VoiceOver, NVDA и JAWS. Пригодится для отладки ARIA, форм, навигации и объявлений динамического контента. Claude Code CX Codex Cursor 10 700установок threejs-fundamentals CloudAI-X Помогает настроить базовую сцену Three.js r186: рендерер, камеры, цикл анимации с THREE.Timer и import map для WebGL или WebGPU с TSL. Claude Code CX Codex Cursor +1 17 100установок gsap-framer-scroll-animation официальный Utkarsh Patrikar Скилл помогает создавать анимации, связанные со скроллом, через GSAP ScrollTrigger и Framer Motion. Подойдёт для React, Next.js и vanilla JS. GitHub Copilot 3 900установок magic-ui magicuidesign Скилл magic-ui учит Claude Code работать с компонентами Magic UI в React и Next.js: выбирать анимации, ставить через shadcn-реестр и проверять доступность. Claude Code CX Codex Cursor +1 1 200установок build-zoom-contact-center-app официальный anthropics Справочный скилл по архитектуре Zoom Contact Center. Помогает настроить интеграцию для клиента Zoom, веб-виджетов и мобильных SDK на iOS и Android. Claude Code CX Codex Cursor +1 2 100установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о artifacts-builder

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

Выполните команду npx skills add nexu-io/open-design --skill artifacts-builder -a claude-code. Также можно вручную сохранить файл манифеста по пути ~/.claude/skills/artifacts-builder/SKILL.md.

Что делает artifacts-builder?

Скилл настраивает агента на генерацию сложных HTML-артефактов для claude.ai с использованием стека React, Tailwind CSS и shadcn/ui.

Где взять оригинальные скрипты из upstream-репозитория?

Манифест скилла взят из проекта ComposioHQ awesome-claude-skills. Для запуска полного процесса исходники и скрипты нужно загрузить из оригинального репозитория по внешней ссылке.

Исходный текст

SKILL.md · Apache-2.0
---
name: artifacts-builder
description: |
  Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
triggers:
  - "artifacts builder"
  - "html artifact"
  - "multi component artifact"
  - "react artifact"
od:
  mode: prototype
  category: web-artifacts
  upstream: "https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder"
---

# artifacts-builder

> Curated from ComposioHQ awesome-claude-skills.

## What it does

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

## Source

- Upstream: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder
- Category: `web-artifacts`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder
```

Then ask the agent to invoke this skill by name (`artifacts-builder`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой