К основному содержанию
скилл CX Codex

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

Инструкция для ИИ-агента по записи трейсов производительности в приложениях на Lynx через скрипт trace_record. Помогает снять метрики первого кадра и памяти.

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

Что делает lynx-trace-record

Скилл настраивает пошаговый процесс профилирования мобильных Lynx-приложений через CLI-утилиту trace_record.bundle.cjs. Агент находит подключённые устройства через list-clients, запрашивает нужный идентификатор клиента и переводит текстовые требования в системные флаги для команды start.

Утилита собирает автоматические дампы кучи для виртуальных машин shared-group, фильтрует категории событий вроде vitals или devtool, а также логирует профили движков QuickJS или V8. Запуск записи обязательно выполнять до открытия экрана. Иначе первый кадр потеряется.

После завершения сессии агент останавливает процесс командой end, забирает дескриптор потока и сохраняет файл .pftrace через вызов readData. Для работы требуется dev-сборка Lynx: на релизных версиях сбор данных заблокирован средой исполнения.

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

  • записать трейс производительности Lynx-приложения в файл .pftrace
  • поймать метрики отрисовки первого кадра до старта экрана
  • собрать профиль JS-движка V8 или QuickJS с нужным интервалом
  • выгрузить автоматические снапшоты памяти для shared-group VM

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

  • Запиши трейс с помощью trace_record, включи сбор памяти и снапшоты кучи для VM xxx
  • Сними трейс с устройства, исключи категории devtool и vitals
  • Запусти запись трейса с v8 JS profile и интервалом 100

Как установить lynx-trace-record

1Через Skills CLI (Vercel)

npx skills add lynx-community/skills --skill lynx-trace-record -a claude-code

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

~/.claude/skills/lynx-trace-record/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о lynx-trace-record

Как установить lynx-trace-record в Claude Code?

Выполните команду npx skills add lynx-community/skills --skill lynx-trace-record -a claude-code. Инструкция сохранится в ~/.claude/skills/lynx-trace-record/SKILL.md.

Что делает lynx-trace-record?

Скилл учит агента управлять утилитой trace_record.bundle.cjs. Он по шагам опрашивает подключённые клиенты, запускает мониторинг с нужными флагами и сохраняет полученный поток в локальный файл .pftrace.

Почему трейс нужно запускать до сборки страницы?

Команду start запускают до выполнения pnpm run dev или перехода на экран приложения. Этот строгий порядок действий гарантирует фиксацию метрик первого кадра целиком.

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

SKILL.md · Apache-2.0
---
name: lynx-trace-record
description: This guide provides step-by-step instructions for recording Lynx performance traces. Use this guide when the user asks how to record a trace.
---

## 1. Workflow Example

The recording process requires using the `trace_record` CLI tool. **The order of operations is critical**.

### Step 1. List connected clients:
First, list all connected clients to get the client ID. This helps you identify which app to trace.
- If you have multiple connected clients, ask the user to specify the client ID you want to trace. Then, use this ID with the `--client` parameter to trace.
- If you have only one connected client, you can omit the `--client` parameter.
- If no clients are found, prompt the user to connect their device via USB and open the debugging app.
   ```bash
   node <path_to_the_skill>/scripts/trace_record.bundle.cjs list-clients
   ```

### Step 2. Start recording:
Execute the start command **BEFORE** building or opening the page on your device. This ensures you capture the entire first frame of the page. Use the `--client` parameter with the client ID from Step 1.
   ```bash
   node <path_to_the_skill>/scripts/trace_record.bundle.cjs start --client <client-id>
   ```

Optional start parameters can be controlled from the user's natural language request:

| User intent | CLI parameter | Trace config field | Default |
| --- | --- | --- | --- |
| Include only specific trace categories | `--include-categories <categories>` | `includedCategories` | `*` |
| Exclude specific trace categories | `--exclude-categories <categories>` | `excludedCategories` | `*` |
| Enable memory data collection | `--enable-memory-trace` | `enableMemoryTrace` | `false` |
| Disable automatic Garbage Collection | `--no-force-gc` | `forceGC` | `true` |
| Automatically capture heap snapshots for "shared-group" VMs | `--enable-auto-heap-snapshot` | `enableAutoHeapSnapshot` | `false` |
| Only capture automatic heap snapshots for a specific "shared-group" VM | `--shared-group-id <id>` | `sharedGroupId` | empty string |
| Specify the JS profile type, such as quickjs or v8 | `--js-profile-type <type>` | `JSProfileType` | empty string (JS profile disabled) |
| Specify the JS profile interval, such as 100 | `--js-profile-interval <interval>` | `JSProfileInterval` | `100` when `JSProfileType` is non-empty and interval is `<= 0`; otherwise `-1` |

When the user asks in natural language, translate the request into the corresponding `start` flags. For example, if the user says "record a trace with trace_record, enable memory data collection, and automatically capture heap snapshots for the VM named 'xxx'", run:
   ```bash
   node <path_to_the_skill>/scripts/trace_record.bundle.cjs start --client <client-id> --enable-memory-trace --enable-auto-heap-snapshot --shared-group-id xxx
   ```

Common trace categories are `lynx`, `vitals`, `javascript`, `jsb`, and `devtool`. If the user asks to include only specific event categories, pass them as a comma-separated list with `--include-categories`. For example, "录制trace时只允许以下类型的事件js,jsb" maps to `--include-categories lynx,jsb`. If the user asks "录制trace时允许所有事件", do not pass `--include-categories`; the default `includedCategories: ['*']` records all events.

If the user asks to exclude specific event categories, pass them as a comma-separated list with `--exclude-categories`. For example, "录制trace时关闭devtool事件和vitals事件" maps to `--exclude-categories devtool,vitals`.

If the user asks to use a specific JS engine profile type, such as "record with v8 JS profile", add `--js-profile-type v8`. If the user does not ask for JS profile collection, do not pass `--js-profile-type`; the default empty string disables JS profile collection.

If the user asks to use a specific JS profile interval, such as "record with JS profile interval 100", add `--js-profile-interval 100`. For example, "record with v8 JS profile and interval 100" maps to `--js-profile-type v8 --js-profile-interval 100`.

### Step 3. Build and Open the Page
Start your development server. If it does not auto-open the page, manually open the target page.
  ```bash
    pnpm run dev
  ```

### Step 4. Perform Actions
If you are debugging interactions (e.g., scrolling, clicking, data updates), perform those actions on the device now.

### Step 5. Stop Recording & Get Stream Handle
Stop the trace recording. The CLI will output a JSON response containing a `stream` field (this is your stream handle). Use the `--client` parameter with the same client ID from Step 1.
   ```bash
   node <path_to_the_skill>/scripts/trace_record.bundle.cjs end --client <client-id>
   ```

### Step 6. Read and Save Trace Data
Use the stream handle obtained from Step 5 to download and save the trace file to your local machine. Use the `--client` parameter with the same client ID from Step 1.
   ```bash
   node <path_to_the_skill>/scripts/trace_record.bundle.cjs readData --client <client-id> --stream <stream-handle> --output ./my-trace.pftrace
   ```

## 2. Troubleshooting Common Errors

### "Please restart the app to enable tracing functionality"

`enable_debug_mode` was off. The CLI attempted to enable it automatically. Solution: Force close the app on your device, restart it, and try recording again from Step 1.

### "Tracing functionality is not supported in the current version"

Make sure you're using the Lynx development version. For more information, visit: https://lynxjs.org/guide/start/integrate-lynx-dev-version.html

### "Tracing is not started, please start tracing first"

You need to run `start` before running `end` and `readData`.

© lynx-community · Apache-2.0 · lynx-community/skills

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

Все скиллы по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

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

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

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