syncfusion-react-timeline — скилл для Claude Code: таймлайны на React
Подсказывает агенту, как собрать хронологию событий на компоненте Timeline из Syncfusion для React. Пригодится для роадмапов, трекинга доставки и лент активности.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a claude-codeЧто делает syncfusion-react-timeline
Скилл описывает компонент TimelineComponent из пакета @syncfusion/ej2-react-layouts: вертикальная и горизонтальная раскладка, выравнивание Before, After, Alternate, AlternateReverse, разворот порядка через reverse. Внутри — примеры на ItemsDirective и ItemDirective, настройка точек через dotCss, шаблоны и события created и beforeItemRender.
Кроме быстрого старта в скилле есть справочники: установка через npm и подключение тем, раскладка, содержимое элементов, стилизация коннекторов и точек, шаблоны, доступность. Отдельный раздел объясняет, когда брать Timeline, а когда Stepper, список или график — это заметно экономит время на выборе компонента.
Чтобы примеры заработали, в проект нужны пакет @syncfusion/ej2-react-layouts и импорт CSS темы, например @syncfusion/ej2-layouts/styles/tailwind3.css. Без этих импортов разметка отрисуется без стилей, и первое, что вы увидите, — голый список вместо таймлайна.
Какие задачи решает
- собрать вертикальную хронологию событий проекта
- показать этапы доставки заказа по датам
- сделать ленту активности с последними событиями сверху
- вывести историю карьеры или этапы роадмапа
- настроить свои иконки и цвета точек на таймлайне
Примеры запросов агенту
- Собери вертикальный таймлайн этапов проекта на TimelineComponent
- Сделай горизонтальный таймлайн доставки с выравниванием Alternate
- Покажи ленту активности в обратном порядке через reverse
Как установить syncfusion-react-timeline
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-timeline/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-timeline/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-timeline/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-timeline/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-timeline2Вручную: положить файлы
.github/skills/syncfusion-react-timeline/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-timelineВручную: положить файлы
.devin/skills/syncfusion-react-timeline/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора15
Похожие
Вопросы о syncfusion-react-timeline
Как установить syncfusion-react-timeline в Claude?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-timeline -a claude-code. После этого файл скилла лежит в ~/.claude/skills/syncfusion-react-timeline/SKILL.md.
Что делает syncfusion-react-timeline?
Даёт агенту инструкции по компоненту Timeline из Syncfusion для React: раскладка, выравнивание, точки, шаблоны и события. Агент опирается на них, когда вы просите собрать хронологию событий.
Чем Timeline отличается от Stepper?
Timeline показывает уже прошедшие события в хронологическом порядке, а Stepper ведёт пользователя по шагам. Скилл разбирает этот выбор отдельно.
