メニュー
This guide provides step-by-step instructions for recording Lynx performance traces. Use this guide when the user asks how to record a trace.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Generate valid OpenUI Lang v0.5 functional-notation programs for the Lynx OpenUI renderer. Use when Codex must turn a natural-language UI request into raw OpenUI DSL for OpenUiRenderer, including static mobile UI, $state, Query/Mutation tool flows, Action plans, streaming-friendly output, or catalog-constrained revisions. Do not use for JSX, HTML, CSS, A2UI JSON, or implementing new ReactLynx components.
Convert natural-language UI requests into A2UI v0.9 JSON protocol messages that an A2UI renderer can consume.
Query @lynx-js/css-defines compat_data to check Lynx CSS property and nested feature/value support by rendering backend and Lynx version, or check whether a newer dataset version exists. Use when asked whether CSS is supported in Lynx or ReactLynx, which backends support it, when support was added, whether a style change is compatible, whether the bundled data is current, or when inspecting the raw definition JSON.
Use this Skill when building Lynx applications directly with vanilla Lynx Element PAPI APIs from @lynx-js/type-element-api, without ReactLynx JSX. It covers Rspeedy project structure for native Lynx artifacts, main-thread Element PAPI rendering, UI event binding, main/background thread event communication, CSS packaging, and common Element API patterns. Trigger Scenarios: - User wants to build a Lynx app without ReactLynx, JSX, or a framework - User asks to use @lynx-js/type-element-api, Element PAPI, vanilla Lynx, or APIs such as __CreatePage, __CreateView, __CreateText, __AppendElement, __SetAttribute, or __FlushElementTree - User needs a native Lynx artifact with main-thread, optional background-thread, and CSS assets - User asks how vanilla Lynx UI events should stay on the main thread or be forwarded to background logic
Use when working with Lynx DevTool or debugging a Lynx app, page, or device, especially when the task mentions clients or sessions, CDP or App commands, DOM/CSS inspection, runtime or console logs, screenshots, heap snapshots, Page.reload or App.openPage, global switches, or inspecting a ReactLynx component tree (`reactlynx tree`), searching components (`reactlynx find`), inspecting props/state/hooks (`reactlynx component`), or mutating props/state/context (`reactlynx update-prop` / `update-state` / `update-context`) on Android, iOS, or Desktop.
Remap the function_id:pc_index to the original source code position by provided debug info json file.
| 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. |
The recording process requires using the trace_record CLI tool. The order of operations is critical.
First, list all connected clients to get the client ID. This helps you identify which app to trace.
--client parameter to trace.--client parameter.node <path_to_the_skill>/scripts/trace_record.bundle.cjs list-clients
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.
node <path_to_the_skill>/scripts/trace_record.bundle.cjs start --client <client-id>
Start your development server. If it does not auto-open the page, manually open the target page.
pnpm run dev
If you are debugging interactions (e.g., scrolling, clicking, data updates), perform those actions on the device now.
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.
node <path_to_the_skill>/scripts/trace_record.bundle.cjs end --client <client-id>
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.
node <path_to_the_skill>/scripts/trace_record.bundle.cjs readData --client <client-id> --stream <stream-handle> --output ./my-trace.pftrace
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.
Make sure you're using the Lynx development version. For more information, visit: https://lynxjs.org/guide/start/integrate-lynx-dev-version.html
You need to run start before running end and readData.