frontend-math-foundations について
フロントエンド開発で数学を使うためのリファレンススキルです。視覚や操作の課題を適切な数学的手法に置き換え、CSS と JavaScript のどちらが計算を担うか判断できます。
主な機能
- 01タスクに合う資料への案内
- 02算術と代数の活用
- 03比率、幾何、三角法の活用
- 04CSS と JavaScript の担当判断
- 05段階的な導出とデバッグ
活用シーン
- 01レイアウト寸法の計算
- 02視覚的なインタラクションの実装
- 03フロントエンド数式のデバッグ
- 04数学的な実装方針のレビュー
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/frontend-math-foundationsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/math-foundations/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/choose-math-approach.md詳細
フロントエンド数学の基礎
このスキルは、フロントエンド数学の基礎レイヤーとして使用します。視覚的な問題やインタラクションの問題を、算術、代数、比率、幾何学、三角法、座標、または CSS と JavaScript のどちらが担うべきかという判断に変換するのに役立ちます。
クイックスタート
guidelines.mdを読み、関連するファイルを最小限に絞ります。- 実装上の判断を行う際は、
references/math-foundations/rules.mdを読み込みます。 - コードを編集する際は、
references/math-foundations/examples.mdを読み込みます。 - 複数ステップの導出やデバッグには、
workflows/choose-math-approach.mdを使用します。
目次
| リソース | 目的 |
|---|---|
guidelines.md | タスクに適したリファレンスファイルを案内します |
references/source-map.md | 書籍の出典と章・節の対応を示します |
references/math-foundations/knowledge.md | 中核となる概念と用語を説明します |
references/math-foundations/rules.md | 実践的なルール、ガイドライン、例外をまとめています |
references/math-foundations/examples.md | 悪い例・良い例とリファクタリングの方法を示します |
references/math-foundations/patterns.md | 再利用可能な数式と実装パターンをまとめています |
references/math-foundations/checklist.md | レビューチェックリストと注意すべき点をまとめています |
workflows/choose-math-approach.md | 手順に沿ったワークフロー |
出典
Paul McFedries 著『Math for Web Design』第 1 章「Web 開発における数学の基礎」をもとにしています。
引用情報は references/source-map.md で管理しています。
コメント
Markdown 対応