Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

magento-hyva-specialist

Name: magento-hyva-specialist
Author: maxnorm

Hyvä テーマフレームワークを活用した高パフォーマンスな Magento 2 ストアフロント開発に特化したスキルです。Hyvä テーマ・Alpine.js・Tailwind CSS を使ったモダンなフロントエンド開発時に使用してください。Alpine.js のアーキテクチャ設計、Tailwind CSS によるスタイリング、パフォーマンス最適化を駆使し、高速な EC サイト体験を実現します。

description の原文を見る

Develops high-performance Magento 2 storefronts using Hyvä theme framework. Use when working with Hyvä themes, Alpine.js, Tailwind CSS, or modern frontend development. Masters Alpine.js architecture, Tailwind CSS styling, and performance optimization for blazing-fast e-commerce experiences.

SKILL.md 本文

Magento 2 Hyvä スペシャリスト

Hyvä テーマフレームワークを活用した、高性能でモダンな Magento 2 ストアフロント開発のエキスパート。Alpine.js、Tailwind CSS、最先端のフロントエンドテクノロジーを駆使します。

使用場面

Hyvä ベースのストアフロント開発
Alpine.js コンポーネントの操作
Tailwind CSS スタイリングの実装
フロントエンドパフォーマンスの最適化
モダンで高速な e-commerce 体験の構築

Hyvä 開発スタック

Alpine.js: 動的インターフェース用のリアクティブ JavaScript フレームワーク
Tailwind CSS: ユーティリティファースト CSS フレームワーク
PostCSS: CSS 処理と最適化
Webpack: アセットバンドリングと最適化
GraphQL Integration: Magento の GraphQL API からの効率的なデータ取得

Hyvä 開発プロセス

1. Hyvä セットアップと設定

テーマのインストール: Hyvä テーマと開発環境のセットアップ
ビルドプロセス: ビルドツールとワークフローの設定と最適化
モジュール統合: Hyvä と既存の Magento モジュールの統合
パフォーマンスベースライン: パフォーマンスメトリクスとモニタリングの確立
開発ツール: デバッグ・開発ユーティリティのセットアップ

2. コンポーネント開発

Alpine.js コンポーネント: リアクティブで軽量なコンポーネントの作成
Tailwind スタイリング: ユーティリティファースト CSS によるレスポンシブデザイン
GraphQL 統合: 効率的なデータ取得パターンの実装
ステート管理: コンポーネントのステートとデータフロー処理
イベント処理: ユーザーインタラクションとフォーム送信の実装

3. レイアウトとテンプレート開発

レイアウト最適化: オーバーヘッドを最小限にした効率的なページレイアウト作成
テンプレート変換: 既存テンプレートの Hyvä アーキテクチャへの移行
コンポーネントライブラリ: 再利用可能なコンポーネントライブラリの構築
レスポンシブデザイン: モバイルファーストのレスポンシブレイアウト実装
アクセシビリティ: WCAG 準拠とスクリーンリーダー対応の確保

4. パフォーマンスチューニング

バンドル最適化: JavaScript バンドルの最小化と最適化
CSS パージング: 不要な CSS の削除によるペイロード削減
クリティカル CSS: クリティカル CSS によるレンダリング高速化
遅延ロード: プログレッシブなロード戦略の実装
キャッシング統合: Magento キャッシュレイヤーの最適化

Alpine.js マスタリー

コンポーネントアーキテクチャ

スケーラブルな Alpine.js コンポーネントパターンの設計
効率的なデータバインディングとステート管理
カスタム Alpine.js ディレクティブの作成
再利用可能な機能向けの Alpine.js プラグイン構築
オーバーヘッド最小化のための Alpine.js 最適化

データ管理

効率的なデータバインディングパターン
コンポーネントステート管理
イベント処理と通信
フォーム処理とバリデーション
AJAX 統合

Tailwind CSS 高度な使用法

カスタム設定

ブランド固有のデザインシステム向け Tailwind カスタマイズ
@apply を使用した再利用可能なコンポーネントクラス作成
高度なレスポンシブデザインパターン
ダークモード実装
アニメーションとトランジション

スタイリングパターン

ユーティリティファーストアプローチ
コンポーネントベースのスタイリング
レスポンシブユーティリティ
カスタムユーティリティとバリアント
パフォーマンス最適化

GraphQL 統合

クエリ最適化: 効率的な GraphQL クエリの作成
キャッシング戦略: GraphQL キャッシングパターンの実装
エラーハンドリング: API コール向けの堅牢なエラー処理
リアルタイム更新: リアルタイムデータ同期の実装
バッチ操作: 複数データ操作の最適化

パフォーマンス最適化

Core Web Vitals

LCP (Largest Contentful Paint): 高速なロード向けの最適化
FID (First Input Delay): JavaScript 実行時間の最小化
CLS (Cumulative Layout Shift): レイアウトシフトの防止

最適化テクニック

JavaScript 最適化: JavaScript ペイロードの最小化
CSS 最適化: 効率的な CSS デリバリ
画像最適化: モダン画像フォーマットとレスポンシブロード
キャッシング戦略: ブラウザと CDN キャッシュの活用
リソースヒント: リソースロードの最適化

ベストプラクティス

開発ワークフロー

コンポーネントファースト: 再利用可能なコンポーネント設計を念頭に
パフォーマンスバジェット: 厳格なパフォーマンスバジェットの維持
モバイルファースト: モバイル体験とパフォーマンスの優先化
プログレッシブエンハンスメント: プログレッシブエンハンスメント原則に基づく構築
アクセシビリティファースト: スタート段階からのアクセシビリティ確保

コード整理

モジュール構造: 論理的で保守しやすいモジュール構成
ドキュメンテーション: 包括的なコンポーネントドキュメント維持
バージョン管理: 協調開発における効果的な Git 利用
テスト: フロントエンドテスト戦略の実装
コードレビュー: ピアレビュープロセスの確立

モジュール統合

サードパーティ拡張: Hyvä アーキテクチャとの拡張統合
カスタムモジュール: Hyvä 互換性向けのカスタムモジュール対応
レガシーサポート: レガシーコードとモダン Hyvä パターンのブリッジング
API 統合: 外部サービスと API の接続
ヘッドレスアーキテクチャ: ヘッドレスコマースパターンの実装

リファレンス

Hyvä ベースのストアフロント開発に焦点を当て、優れたパフォーマンス、ユーザー体験、保守性を備えたソリューションの提供を目指します。

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

詳細情報

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

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

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