Anthropic Claudeその他⭐ リポ 0品質スコア 50/100

mapbox-style-quality

Name: mapbox-style-quality
Author: mapbox

Mapboxスタイルの検証・アクセシビリティチェック・最適化を通じて、品質基準を満たすスタイルの作成を専門的にサポートします。本番環境へのスタイル適用前の確認、問題のデバッグ、地図品質基準の遵守確認が必要な際に活用してください。

description の原文を見る

Expert guidance on validating, optimizing, and ensuring quality of Mapbox styles through validation, accessibility checks, and optimization. Use when preparing styles for production, debugging issues, or ensuring map quality standards.

SKILL.md 本文

Mapbox スタイル品質スキル

このスキルは、検証、アクセシビリティ、および最適化ツールを通じて Mapbox スタイル品質を確保するための専門的なガイダンスを提供します。

品質ツールを使用する場合

本番環境前チェックリスト

Mapbox スタイルを本番環境にデプロイする前に:

すべての式を検証する - ランタイム前に構文エラーをキャッチ
色のコントラストをチェック - テキストが読み可能であることを確認 (WCAG 準拠)
GeoJSON ソースを検証する - データの整合性を確認
スタイルを最適化する - ファイルサイズを削減しパフォーマンスを向上
バージョンを比較する - 何が変更されたかを把握
空のレイヤーを削除する - 見える paint プロパティがないレイヤーを最終的なクリーンアップステップとして削除
冗長なブール式を簡略化する - 不要なブール論理を含むフィルタをクリーンアップ (例: ["all", expr] → expr, ["any", false, expr] → expr)

開発中

GeoJSON データを追加する場合:

ソースとして使用する前に、常に validate_geojson_tool で外部 GeoJSON を検証

式を書く場合:

validate_expression_tool で書きながら式を検証
型の不一致を早期にキャッチ (例: 数値に対して文字列演算子を使用)
Mapbox GL JS バージョンで演算子が利用可能であることを確認
期待されるデータ型で式をテスト

テキスト/ラベルのスタイリング時:

check_color_contrast_tool でフォアグラウンド/バックグラウンドのコントラストをチェック
WCAG AA 最小値を目指す (通常のテキストで 4.5:1、大きいテキストで 3:1)
より良いアクセシビリティのために AAA 標準を使用 (通常のテキストで 7:1)
異なるバックグラウンドシナリオを検討 (マップタイル、オーバーレイ)

変更をコミットする前に

スタイルバージョンを比較:

compare_styles_tool で diff レポートを生成
すべてのレイヤー変更、ソース変更、式の更新をレビュー
変更の影響を理解
コミットメッセージで重大な変更を文書化

デプロイ前に

スタイルを最適化:

optimize_style_tool を実行してファイルサイズを削減
削除されたレイヤーを参照する未使用のソースを削除
同一のプロパティを持つ重複レイヤーを削除
フィルタの冗長なブール式を簡略化 (例: ["all", expr] を expr に折りたたむ、トートロジーな条件を削除)
見える paint プロパティがないレイヤーを最終的なクリーンアップステップとして削除

検証のベストプラクティス

GeoJSON 検証

以下の場合は常に検証:

ユーザーアップロードから GeoJSON を読み込む場合
外部 API から GeoJSON をフェッチする場合
サードパーティソースから GeoJSON を処理する場合
データ形式を変換する場合

一般的な GeoJSON エラー:

無効な座標範囲 (経度 > 180 または < -180)
閉じられていないポリゴンリング (最初と最後の座標は一致する必要がある)
誤った座標順序 ([緯度, 経度] ではなく [経度, 緯度] である必要がある)
必須プロパティが不足 (type, coordinates, geometry)
無効なジオメトリタイプまたはネスト

ワークフロー例:

1. GeoJSON データを受け取る
2. validate_geojson_tool で検証
3. 有効な場合: スタイルにソースとして追加
4. 無効な場合: エラーを修正し、再検証

式の検証

以下の式を検証:

フィルタ条件 (レイヤーの filter プロパティ)
データドリブンスタイリング (paint および layout プロパティ)
フィーチャ状態の式
動的プロパティ計算

一般的な式エラー:

型の不一致 (数値の文字列演算子)
無効な演算子名または誤った構文
演算子の引数数が誤り
ネストされた式エラー
GL JS バージョンで利用不可能な演算子を使用

予防戦略:

ランタイムではなく、書きながら式を検証
代表的なデータで式をテスト
型チェック (expectedType パラメータ) を使用
コンテキストで検証 (レイヤー、フィルタ、paint、layout)

アクセシビリティ検証

WCAG レベル:

AA (最小): 通常のテキストで 4.5:1、大きいテキストで 3:1
AAA (強化): 通常のテキストで 7:1、大きいテキストで 4.5:1

テキストサイズカテゴリ:

通常: < 18pt または < 14pt bold
大きい: ≥ 18pt または ≥ 14pt bold

チェックする一般的なシナリオ:

マップタイル上のテキストラベル
バックグラウンドカラー付きの POI ラベル
テキスト付きカスタムマーカー
マップ上の UI オーバーレイ
legend テキストとシンボル
attribution テキスト

テスト戦略:

明るいマップタイルと暗いマップタイルの両方に対してテスト
オーバーレイバックグラウンド (ポップアップ、モーダル) を検討
異なる照明条件でテスト (モバイル屋外使用)
さまざまなズームレベルでコントラストを確認

品質ワークフロー例

基本的な品質チェック

1. スタイルの式を検証
2. テキストレイヤーの色のコントラストをチェック
3. 必要に応じて最適化

完全な本番環境前ワークフロー

1. すべての GeoJSON ソースを検証
2. すべての式を検証 (フィルタ、paint、layout)
3. すべてのテキストレイヤーの色のコントラストをチェック
4. 前の本番環境バージョンと比較
5. スタイルを最適化
6. 最適化されたスタイルをテスト
7. デプロイ

トラブルシューティングワークフロー

1. 動作しているスタイルと壊れたスタイルを比較
2. 違いを特定
3. 疑わしい式を検証
4. ソース関連の場合は GeoJSON データをチェック
5. 可視性の問題の場合は色のコントラストを確認

一般的な問題と解決策

ランタイム式エラー

問題: マップが実行時に式エラーをスロー 解決策: 開発中に validate_expression_tool で式を検証 予防: プリコミットフックまたは CI/CD に式検証を追加

テキストの読み取りが不十分

問題: マップのテキストラベルが読みづらい 解決策: check_color_contrast_tool でコントラストをチェック、WCAG AA を満たすように色を調整 予防: 明るいバックグラウンドと暗いバックグラウンドでテキストをテスト、異なるズームレベルでチェック

スタイルファイルが大きい

問題: スタイルの読み込みまたは転送に時間がかかる 解決策: optimize_style_tool を実行して冗長性を削除し簡略化 予防: 開発中に定期的に最適化し、未使用のソースをすぐに削除

無効な GeoJSON ソース

問題: GeoJSON ソースが読み込みまたはレンダリングに失敗 解決策: validate_geojson_tool で検証し、座標の問題を修正し、構造を確認 予防: スタイルに追加する前にすべての外部 GeoJSON を検証

予期しないスタイル変更

問題: スタイルが変更されたが、何が変更されたか不明確 解決策: compare_styles_tool で diff レポートを生成 予防: すべての重大な変更で変更前後を比較し、変更を文書化

ツールクイックリファレンス

ツール	使用場面	出力
`validate_geojson_tool`	GeoJSON ソースを追加	有効/無効 + エラーリスト
`validate_expression_tool`	式を書く	有効/無効 + エラーリスト
`check_color_contrast_tool`	テキストラベルをスタイリング	合格/不合格 + WCAG レベル
`compare_styles_tool`	変更をレビュー	パス付き diff レポート
`optimize_style_tool`	デプロイ前	最適化スタイル + 削減量

リファレンスファイル

特定のトピックに関する詳細なガイダンスについては、関連するリファレンスを読み込んでください:

references/optimization.md — 最適化タイプ、戦略、推奨順序、およびメンテナンスのベストプラクティス
references/comparison.md — スタイル比較ワークフロー、ignoreMetadata の使用、およびリファクタリングワークフロー
references/ci-integration.md — Git プリコミットフック、CI/CD パイプラインステップ、およびコードレビューチェックリスト

読み込み指示: ユーザーがそのトピックに関する詳細なガイダンスが必要な場合、リファレンスファイルを読み込んでください。

その他のリソース

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: mapbox
リポジトリ: mapbox/mapbox-agent-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/mapbox/mapbox-agent-skills / ライセンス: MIT