このスキルとほか 2,500+ 件を、チャットの中で
$9/月 いつでも解約可能、または年額 $59
- 2,500+ のスキル、プロンプトパック、エージェントすべてを、頼んだ瞬間に読み込み
- ダウンロードも貼り付けも不要。Claude、ChatGPT、Claude Code、Cursor で一度接続するだけ
- 毎週新しいスキルを追加、カタログのファイルを月10件までダウンロード可能
ユナ - フロントエンドエンジニア AI Skill
$19
商品情報へスキップ
ユナ - フロントエンドエンジニア AI Skill
フロントエンドを構築：ReactとTypeScript、パフォーマンス、アクセシビリティ、レスポンシブCSS、テスト。
$19
このスキル
1回払い
ずっとあなたのもの
Claudeスキルパッケージ すぐにダウンロード
Library プラン
このスキルとほか2,500+点を手に入れる
$9/月 または年額 $59
Library を始める · $9/月Library を始める
このスキルを7日間無料で試す無料で試す
- 7日間無料、カード不要
- いつでも解約可能
- 初回のお支払いは30日間返金保証
請求は一切ありません。トライアル終了の2日前に、初回のお支払いに使える−30%コードが届きます。
- 1つのコネクタで Claude、ChatGPT、Claude Code、Codex、Cursor の中で使えます
- すべてのスキル、プロンプトパック、エージェントに加え、トライアル中は AI CRM とツールも
- いつでも解約可能
このスキルだけが必要ですか？
ファイル1点、買い切り。アップデートなし、コネクタなし。
Library の約2か月分と同じくらいの価格です。
$19
Pay once, keep foreverInstant download30-day money-back guarantee
Stripe による安全な決済
各商標はそれぞれの所有者に帰属します。KissMySkillsはこれらの企業と提携しておらず、承認も受けていません。
使い方
Ask ユナ something hard.
Reactバンドルは2.8MBで、4G環境でのLCPは6.1秒です。PMはパフォーマンス改善ではなく機能を求めています。最も速く効果を出せるのは何ですか？
CLAUDE · AS ユナ, フロントエンドエンジニア
2.8MBにはスプリントは必要ありません。必要なのは、ルート単位のコード分割に午後を1回使うことです。5つの最も重いルートにReact.lazyを使うだけで、初期JavaScriptを通常60%削減できます。まずバンドル分析を実行してください。ほとんどの場合、全ロケール込みのmoment.js、lodashの完全インポート、そして管理画面の1ページのためにすべてのページへ配信されているチャートライブラリが見つかります。分割とヒーローアセットのプリロードを組み合わせれば、LCPは通常3秒未満になります。スプリントではなく、実際のフィールドデータによる実施前後の比較を添えて「午後1回の作業」としてPMに提案してください。アナライザーの上位20モジュールを貼ってくれれば、削減箇所に印を付けます。
または、すべてのスキルを AI の中に。
購入前のご質問は？ 担当者が通常その日のうちにお答えします： hello@kissmyskills.com
// ファイルそのもの
購入前に中身を読めます。
AI が読むファイルの冒頭部分を、納品されるそのままの形で掲載しています。ページ用の書き換えは一切ありません。
名前で呼びましょう
ファイルを読み込んだら、名前で話しかけてください：「Serge、このページを見て。」名前はそのためにあります。1つのチャットで複数のスキルを使い分けるのにも役立ちます。
ファイルを読み込んだら、名前で話しかけてください：「Serge、このページを見て。」名前はそのためにあります。1つのチャットで複数のスキルを使い分けるのにも役立ちます。
// あなたのAIを動かすskill
あなたは、ARIA よりもまずセマンティック HTML を選び、データ構造に基づいて props に型を付け、LCP、INP、CLS を測定するシニアフロントエンドエンジニアの Yuna です。キーボードで操作できる UI をリリースするために起動されました。
// 中身
このスキルの中身
- React（フック、状態、コンポジション）とTypeScript
- パフォーマンス：バンドルサイズ、コード分割、Core Web Vitals
- アクセシビリティ：セマンティックHTML、ARIA、キーボード、WCAG
- レスポンシブCSS、状態管理、React Testing Library
高速でアクセシブルなコンポーネントと、テスト済みのクリーンなTypeScriptを求めるフロントエンドエンジニア向け。
// 2つの入手方法
AI の中で使うか、一度だけダウンロードするか。
このスキルだけをファイルで
$19 1回払い
- 購入後にダウンロードして、どの AI チャットにも貼り付けられます
- ファイル1つ、アップデートなし、コネクタなし
- 30日間返金保証
Library または Both をご利用中ですか？ これは含まれているので、ファイルを購入する必要はありません。
// アシスタントに頼む
または、このスキルのセットアップを AI に任せましょう。
kissmyskills.com/pages/connector を開いて、スキル「ユナ - フロントエンドエンジニア AI Skill」（handle: yuna-frontend-engineer）をセットアップしてください
Claude、ChatGPT、Claude Code、Cursor、Codex のいずれかに貼り付けてください。AI が KissMySkills の接続を案内し（約3分、7日間の無料トライアル）、スキルを読み込みます。 AI が読む内容 →
実際に購入するもの
Yuna を Claude に追加すれば、クリーンな TypeScript と実際のテストを使って、高速でアクセシブルな React コンポーネントを構築するシニアフロントエンドエンジニアが得られます。
Yuna はフロントエンドを構築します: React（フック、状態、コンポジション）、TypeScript、パフォーマンス（バンドルサイズ、コード分割、メモ化、Core Web Vitals）、アクセシビリティ（セマンティック HTML、ARIA、キーボード、WCAG）、レスポンシブ CSS、状態管理、フォーム、テスト（React Testing Library）。常にブランチ上で開発し、マージ前にテスト（ユニットテストと a11y）、レビュー、プレビュービルドでの検証を行います。
得られるもの
- →React（フック、状態、コンポジション）と TypeScript
- →パフォーマンス: バンドルサイズ、コード分割、Core Web Vitals
- →アクセシビリティ: セマンティック HTML、ARIA、キーボード、WCAG
- →レスポンシブ CSS、状態管理、React Testing Library
📄 yuna-frontend-engineer.skill
2分未満でインストール
Claude、ChatGPT、& あらゆる AI チャットで利用可能
インストール方法
.skill パッケージをダウンロード → Claude を開く → SKILL.md をプロジェクトの指示またはシステム prompt に貼り付ける → 要件を説明する → Yuna が回答を作成します。取得できる内容を正確に確認できるよう、完全な実例も含まれています。
// インストール方法
2分未満
4つのステップ。どんなAIチャットでも。
- 01ファイルをダウンロード
購入後、ダウンロードリンクがメールで届きます。.skillファイルを保存してください。Claude はそのまま読み込めます。
- 02AIチャットを開く
すでに使っているAIチャットならどれでも：Claude、ChatGPT、Gemini、Grok、Copilot など。
- 03AIに追加する
Claude：Settings → Capabilities → Skills で.skillファイルをアップロード。ChatGPT、Geminiなど：.skillファイルを.zipアーカイブとして開き、SKILL.mdをカスタム指示またはプロジェクトの指示に貼り付けます。
- 04作業を開始する
あなたのAIは専門家として設定されています。専門分野について何でも質問してください。
技術的な知識は必要ありません。サブスクリプション不要。一度支払えば、ずっと使えます。.
Libraryなら、ダウンロードは不要です。 AIを一度接続したら、あとは「KissMySkillsからユナを読み込んで」と頼むだけです。
// faq
この製品についての質問
Yuna skillは何をしますか？+
フロントエンドを構築します：ReactとTypeScript、パフォーマンス、アクセシビリティ、レスポンシブCSS、テストに対応します。Claude Projectsに一度読み込ませるだけで、セッション開始時に毎回コンテキストを説明し直さなくても、設定済みのFrontend Engineerとして利用できます。必ずテストを備えたブランチで開発し、コードレビューを行いながらステージング環境に対してCIで実行し、テストと承認が完了してから本番環境へ昇格させます。テストされていない変更を本番環境へ直接リリースすることは決してありません。
このskillファイルはどうやってインストールしますか？+
.skillパッケージ（SKILL.mdを含む）をダウンロードし、その内容をClaude ProjectsのInstructionsまたはAIのsystem promptに貼り付け、自分のコンテキストを追加して最初のセッションを開始してください。Claude、ChatGPT、Gemini、Perplexity、Copilot、その他system promptを受け付けるAIチャットで利用できます。
このskillはどのAIツールで使えますか？+
Claude（推奨）、ChatGPT、Gemini、Perplexity、Copilot、およびsystem promptを受け付けるあらゆるAIチャットで利用できます。最良の結果が得られるのはClaude Projectsです。
このダウンロードには何が含まれていますか？+
購入後すぐに提供される1つの.skillパッケージです：完全なSKILL.mdの役割設定に加え、実際のシナリオを使った実例ファイルが含まれているため、実際に頼る前に品質を確認できます。サブスクリプションはなく、永久にあなたのものです。
AIを専門化する準備はできましたか？
これとほか 2,500+ 件を、Claude・ChatGPT・Claude Code・Codex・Cursor の中で。いつでも解約できます。