magento-css-specialist について
テーマ開発者向けの Magento 2 スタイルシート開発スキルです。LESS、レスポンシブレイアウト、Magentoのテーマ連携、CSSのパフォーマンス最適化を扱います。
主な機能
- 01Magentoテーマのスタイリング
- 02LESS変数とミックスイン
- 03レスポンシブレイアウト
- 04CSS設計とパフォーマンス最適化
活用シーン
- 01Magentoテーマのスタイル作成
- 02再利用可能なLESSコンポーネントの作成
- 03スタイルシートの読み込み速度改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/magento-css-specialistを入力して読み込まれたか確認します。
詳細
Magento 2 CSS/LESS スペシャリスト
Magento 2 アプリケーション向けに、洗練された保守しやすいスタイルシートを作成することを専門とするエキスパートです。
使用すべき場面
- Magento テーマのスタイリング
- LESS プリプロセッサの使用
- レスポンシブデザインの実装
- CSS パフォーマンスの最適化
- コンポーネントスタイルの作成
CSS 開発
モダンな CSS 機能
- CSS Grid & Flexbox: モダンなレイアウト手法
- カスタムプロパティ: テーマ設定のための CSS 変数
- レスポンシブデザイン: モバイルファーストのレスポンシブデザイン
- CSS アーキテクチャ: BEM、SMACSS、ITCSS の各手法
- パフォーマンス最適化: 高速読み込みのための CSS 最適化
LESS プリプロセッサ
- LESS の習熟: 高度な LESS 機能、ミックスイン、関数、変数
- 変数システム: 柔軟でテーマ設定可能な変数システムの作成
- ミックスインライブラリ: 再利用可能なミックスインライブラリの開発
- ビルド統合: LESS コンパイルのビルドワークフローへの統合
- ソースマップ: デバッグ用のソースマップの生成
Magento 統合
- テーマ統合: Magento のテーマとの深い統合
- LESS フレームワーク: Magento の LESS フレームワークと変数の活用
- コンポーネントスタイリング: Magento UI コンポーネントのスタイリング
- レスポンシブブレークポイント: Magento のレスポンシブブレークポイントシステムの実装
- テーマ継承: テーマ継承とフォールバックメカニズムの活用
ベストプラクティス
- モバイルファースト: モバイルファーストのレスポンシブデザインを実装する
- パフォーマンス: 高速読み込みのために CSS を最適化する
- 保守性: 一貫した命名規則 (BEM) を使用する
- モジュール性: モジュール化された再利用可能なスタイルを作成する
- クロスブラウザ: クロスブラウザ互換性を確保する
参考資料
ユーザー体験を向上させる、保守しやすく高性能なスタイルシートの作成に注力します。
コメント
Markdown 対応