skills.rest
daangn
daangnOFFICIAL
Explore all skills by this author →
Website𝕏@daangnteamGitHub

seed-write-lynx-component-docs

Writes SEED Lynx component documentation and runnable examples aligned with React docs.

1.1k|89|Updated Mar 11, 2021
Search Tags:#examples#design-system#mdx#Documentation#lynx#reAct#Component
One-click install
npx skills add https://github.com/daangn/seed-design --skill seed-write-lynx-component-docs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seed-write-lynx-component-docs
Source: https://github.com/daangn/seed-design/tree/main/skills/seed-write-lynx-component-docs
Command: npx skills add https://github.com/daangn/seed-design --skill seed-write-lynx-component-docs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing documentation for SEED Lynx components requires keeping parity with the corresponding React docs while accounting for Lynx runtime differences, deployment paths (Registry vs package), and Engine/XElement compatibility. This Skill standardizes that process so docs and examples stay consistent and accurate.

Core Features & Use Cases

  • React-to-Lynx parity mapping: Classifies each React doc scenario as identically supported, needing Lynx-style conversion, or unsupported, preserving section order, example titles, and user-visible results.
  • Deployment path resolution: Determines whether a component is consumed via Registry (@/components/ui/<name>) or directly from @seed-design/lynx-react, and applies the correct import path in docs and examples.
  • Compatibility frontmatter: Computes compatibility.lynx.engine minimum versions and x-elements lists from official Lynx compatibility data.
  • Use Case: When adding docs for a new Lynx component like Switch, use this Skill to mirror the React doc structure, write docs/examples/lynx/switch/*.tsx entries, and hand off runtime verification to the verification skill.

Quick Start

Use the seed-write-lynx-component-docs skill to write the Lynx documentation and runnable examples for the Switch component based on its React docs.

Frequently Asked Questions about seed-write-lynx-component-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Lynx component documentation that matches the React docs?▼

Start from the React doc's section order, example titles, and scenarios, then classify each scenario as identically supported, needing Lynx-style conversion, or unsupported. Keep user-visible results identical where supported and document differences with reasons instead of silently dropping scenarios.

How do I choose between Registry and package imports in Lynx examples?▼

Check the component's distribution with the component map: Registry-distributed components use `@/components/ui/<name>` in Installation, Usage, and examples, while package-only components import public exports directly from `@seed-design/lynx-react`. Never invent Registry install steps for package-only components.

How is the Lynx Engine compatibility version in frontmatter determined?▼

List every Lynx API, element, and CSS feature the component actually uses, including conditional paths, then look up each item's Android and iOS `version_added` in official compatibility JSON data. The highest minimum version across all features becomes `compatibility.lynx.engine`; never estimate versions.

When should I use main-thread event handlers in Lynx examples?▼

Use `main-thread:*` handlers only when synchronous screen response is required, such as updating styles during scroll or drag, with `"main thread"` as the first line. Plain React state updates should use normal `bind*` events or component callbacks, adding `"background only"` when crossing component boundaries.

What are the limitations of the browser preview for Lynx examples?▼

Browser previews cannot show native-only behaviors such as icon tint-color rendering. Document these with a short callout near the example directing users to verify in Lynx Explorer, and never reshape shipped components just to satisfy the preview.

Related Skills

Explore More Software Engineering Skills→
alamenaialamenai
243

check

Validate new map components for required outputs and wiring.

Community
Intermediate
hanzlahabibhanzlahabib
2

rcode-browser-verify

Verify live browser behavior and UI state using Chrome DevTools MCP.

Community
Advanced
graphreflygraphrefly
1

parity

Compare graphrefly-ts and graphrefly-py API surfaces, behavior, and test conformance.

Official
Advanced
compozycompozy
182

assistant-ui-runtime

Manage Assistant UI thread and message runtime state with React hooks.

Official
Intermediate