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.
62
72%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./ai/skills/lynx-api-docs/skills/using-lynx-api-docs/SKILL.mdPre-training knowledge is insufficient for Lynx. Lynx is a rendering platform (like a browser) with its own elements, non-standard CSS behavior, unique layout systems, and web-incompatible defaults. Always retrieve from the installed API docs before writing or modifying Lynx page code.
MUST ALWAYS read the relevant API docs BEFORE writing or editing any Lynx code.
Do not rely on web CSS knowledge. Do not assume standard HTML behavior. Do not guess element APIs. Lynx is a distinct platform with its own rules.
Lynx is not a web browser. Web assumptions produce broken Lynx code:
<view>, <text>, <image> — not <div>, <span>, <img>border-box, no margin collapsing, Linear layout (not Flow)css/ docsEvery web assumption is a potential bug.
elements/ or css/ directories| Task | Read These Files First |
|---|---|
| Choose layout | layout/linear-layout.md (default), layout/flex-layout.md, layout/grid-layout.md, layout/relative-layout.md |
| CSS properties/units | css/supported-properties.md, css/values-and-units.md |
| CSS selectors | css/selectors.md, css/pseudo-classes.md |
| Use an element | elements/<element-name>.md |
| Migrate from web | lynx-vs-web/migration-guide.md, lynx-vs-web/css-differences.md |
| Theming/animation/responsive | patterns/theming.md, patterns/animation.md, patterns/responsive.md |
| General lookup | quick-reference.md, best-practices.md |
The compact layout decision rules and key CSS constraints are documented in quick-reference.md. Most critical:
<text> componentborder-box (not content-box)rem + vw for screen adaptation<div> or <span> → Lynx uses <view>, <text>margin without checking if margin collapsing applies → It doesn'tcontent-box → Default is border-boxcss/supported-properties.mdelements/<name>.mdrpx for web-portable code → rpx is Lynx-specific; use rem + vw for web compatibility<text> wrapper → Invalid in Lynxcss/pseudo-classes.mdc17426b
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.