mcpField
L
lynx-api-docs

lynx-api-docs

github.com/lynx-community開発28153 回インストール1 日前に更新
リポジトリ

lynx-api-docs について

lynx-api-docsは、Lynxページの作成・編集を資料に沿って進めるためのスキルです。Webの前提に頼らず、作業前に関連するインストール済みAPIドキュメントを確認するよう促します。

主な機能

  1. 01作業別のドキュメント検索
  2. 02LynxのレイアウトとCSSの指針
  3. 03要素とセレクターのリファレンス
  4. 04WebからLynxへの移行ガイド
  5. 05編集前のドキュメント確認

活用シーン

  1. 01スタイル作成前のCSS対応確認
  2. 02Lynxのレイアウト方式の選択
  3. 03編集前の要素API確認
  4. 04WebコードのLynxへの移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/lynx-community/skills --skill lynx-api-docs

インストール後、Claude Code で/lynx-api-docsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

best-practices.md
css/
pseudo-classes.md
selectors.md
supported-properties.md
values-and-units.md
elements/
blur-view.md
image.md
input.md
list.md
overlay.md
page.md
refresh.md
scroll-coordinator.md
scroll-view.md
svg.md
text.md
textarea.md
view.md
viewpager.md
webview.md
examples/
bottom-nav.md
card-list.md
sidebar-layout.md
sticky-header.md
waterfall.md
layout/
flex-layout.md
grid-layout.md
linear-layout.md
relative-layout.md
lynx-vs-web/
css-differences.md

詳細

Lynx API ドキュメントの使用方法

概要

事前学習の知識だけでは Lynx には不十分です。 Lynx はレンダリングプラットフォーム（ブラウザーのようなもの）であり、独自の要素、標準外の CSS の動作、固有のレイアウトシステム、ウェブと互換性のないデフォルト設定を備えています。Lynx のページコードを作成または変更する前に、必ずインストール済みの API ドキュメントを参照してください。

基本ルール

Lynx のコードを作成または編集する前に、必ず関連する API ドキュメントを読んでください。

ウェブの CSS に関する知識に頼らないでください。標準の HTML の動作を前提にしないでください。要素の API を推測しないでください。Lynx は独自のルールを持つ別個のプラットフォームです。

ウェブの知識が通用しない理由

Lynx はウェブブラウザーではありません。ウェブに関する前提を適用すると、Lynx のコードに不具合が生じます。

  • 要素：<view>、<text>、<image> — <div>、<span>、<img> ではありません
  • CSS のデフォルト設定：通常、box-sizing: auto は border-box のボックスサイズを使用します。マージンの相殺はなく、レイアウトは Linear（Flow ではありません）です
  • プロパティ：多くの CSS プロパティはサポートされていないか、動作が異なります。必ず css/ のドキュメントを確認してください

ウェブに関する思い込みは、すべて不具合の原因になり得ます。

ドキュメントの使い方

  1. 作業内容を特定します（レイアウト、CSS、要素、移行、パターン）
  2. 下の表から関連するドキュメントファイルを探します
  3. コードを作成または編集する前に、ドキュメントを読みます
  4. ドキュメントに記載されたルールと制約を適用します
  5. 不明な場合は、elements/ または css/ ディレクトリを検索します

クイックリファレンス

作業最初に読むファイル
レイアウトの選択layout/linear-layout.md（デフォルト）、layout/flex-layout.md、layout/grid-layout.md、layout/relative-layout.md
CSS プロパティ／単位css/supported-properties.md、css/values-and-units.md
CSS セレクターcss/selectors.md、css/pseudo-classes.md
要素の使用elements/<element-name>.md
ウェブからの移行lynx-vs-web/migration-guide.md、lynx-vs-web/css-differences.md
テーマ設定／アニメーション／レスポンシブ対応patterns/theming.md、patterns/animation.md、patterns/responsive.md
一般的な参照quick-reference.md、best-practices.md

基本ルール

コンパクトなレイアウト選択ルールと、CSS に関する主な制約は quick-reference.md に記載されています。特に重要な点は以下のとおりです。

  • テキストには <text> コンポーネントを使用する必要があります
  • ボックスサイズは初期状態で auto を使用し、通常は border-box のボックスサイズになります。互換性設定によって異なる場合は、明示的な値を設定してください
  • マージンの相殺はありません
  • 画面に合わせて調整するには、rem + vw を使用します

要注意 — 作業を止めてドキュメントを読む

  • <div> または <span> を追加する → Lynx では <view>、<text> を使用します
  • マージンの相殺が適用されるか確認せずに margin を使用する → マージンの相殺は適用されません
  • content-box を前提にする → 通常、auto は border-box のボックスサイズを使用します。css/supported-properties.md#box-model を確認してください
  • css/supported-properties.md を確認せずにウェブの CSS プロパティを使用する
  • 要素の属性を推測する → elements/<name>.md を読んでください
  • ウェブと互換性のあるコードに rpx を選ぶ → rpx は Lynx 固有です。ウェブとの互換性には rem + vw を使用してください
  • <text> で囲まずにプレーンテキストを書く → Lynx では無効です
  • css/pseudo-classes.md を確認せずにウェブの疑似クラスを使用する
  • 標準の HTML フロー・レイアウトを前提にする → Lynx ではデフォルトで線形レイアウトを使用します

コメント

Markdown 対応