skills

Use when building with lynx-ui: select components, verify public APIs, adapt examples, configure Luna themes, choose motion packages, compose screens, or troubleshoot lynx-ui usage.

Provides authoritative guidance for Lynx development involving pages, templates, components, CSS, layouts, elements, web migration, rendering or styling bugs, and code review. Applies to *.ttml, Lynx *.tsx, and all Lynx-specific files, and requires searching the installed API docs before acting.

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.

Remap the function_id:pc_index to the original source code position by provided debug info json file.

Guidance on using Habitat to manage multi-repo source and asset dependencies via .habitat/DEPS and hab sync, plus troubleshooting common sync failures.

Convert natural-language UI requests into A2UI v0.9 JSON protocol messages that an A2UI renderer can consume.

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, evaluating JavaScript on a device, screenshots, heap snapshots, performance traces, Page.reload or App.openPage, global switches, interactive snapshot refs and taps/fills/scrolls, inspecting or searching a ReactLynx component tree, linking DOM Snapshot refs to ReactLynx components (`reactlynx link`), or mutating ReactLynx props/state/context on Android, iOS, or Desktop.

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.

Specializes in analyzing Lynx trace data to diagnose performance issues and provide actionable optimization strategies. Key Scenarios: - Loading Performance: Diagnosing slow startup metrics (FCP, FMP, TTI) and white screen issues. - Smoothness Analysis: Investigating root causes for scroll jank, frame drops, and interaction lag. - Regression Detection: Comparing traces to identify performance degradation or verify optimization gains between versions. - Pipeline Deep Dive: Pinpointing bottlenecks in specific rendering stages like Layout, Paint, JS execution, and background threads. - Native Module Analysis: Investigating performance issues related to native module calls.

This guide provides step-by-step instructions for recording Lynx performance traces. Use this guide when the user asks how to record a trace.

This Skill summarizes common TypeScript issues and their solutions in Lynx development, mainly covering environment configuration, type extending, event handling, components, and ReactLynx advanced usages. Trigger Scenarios: - User inputs TypeScript error messages related to Lynx and seeks fix suggestions - LSP diagnoses Lynx-related TypeScript errors, proactively invoke query to get fix solutions - User asks about TypeScript best practices or common errors related to Lynx, proactively invoke query to provide guidance - User requests to configure the TypeScript environment of the current project to support Lynx development, proactively invoke query to provide configuration steps

Reviews, writes, and refactors ReactLynx code and component libraries for Lynx dual-thread best practices. Applies when writing ReactLynx components, or handling background-only, useLayoutEffect, bindtap/catchtap, main-thread:*, runOnMainThread/runOnBackground, lazy/Suspense, globalPropsMode/__globalProps, component-library publishing (preserved JSX vs React.createElement), or render/diff/commit performance traces. Excludes vanilla Lynx Element PAPI without ReactLynx JSX (use vanilla-lynx), running-app debugging via DevTool/CDP (use lynx-devtool), or Rspeedy/tsconfig config (use lynx-typescript).

Analyze and reduce the bundle size of rspeedy/Lynx (ReactLynx) apps — the size / `.lynx.bundle` lever (not runtime perf, types, or CI). Use when the user wants to optimize 包体积 / bundle size, find what is making a rspeedy bundle large, decide which size lever to pull, or shrink `main-thread.js` by stripping background-only code (jsb / telemetry / request / monitor SDKs) out of the render path via `__BACKGROUND__` / `'background only'` gating. Covers media, JS-background, and main-thread layers, plus mangle/eval-poisoning bloat, i18n-locale duplication, duplicate-package dedup, extractStr/compile knobs, and lazy/dynamic-component splitting (first-screen vs total size). Measure-first and evidence-based — produces a prioritized report; changes code only when asked.

Author, review, or explain Vanilla Lynx source that directly uses Element PAPI, delivered as a build-free `.lynxml` artifact or an Rspeedy project, including related build and serving workflows. Excludes ReactLynx, Canvas/WebGL, standalone API/CSS lookups, device-side runtime debugging, and bundle analysis.