Skill

optimize-ui

UIのパフォーマンスを最適化する。Core Web Vitals・レンダリング性能・アニメーション性能・バンドルサイズ・画像最適化を分析し改善する。パフォーマンス改善・速度向上・表示最適化を依頼されたときに使用する。

npx claudepluginhub nextscape/ns-plugins --plugin ui-design-grounding

Tool Access

This skill uses the workspace's default tool permissions.

Preview

ui-design-grounding スキルを呼び出し、以下のリファレンスを読み込む:

SKILL.md

Similar Skills

cache-components

139.2k

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

canvas-design

124.2k

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

20 files

anthropics-skills-13

Stats

Stars0

Forks0

Last CommitApr 8, 2026

Actions

View Source View Plugin View on GitHub View README

optimize-ui

準備（MANDATORY PREPARATION）

ui-design-grounding スキルを呼び出し、以下のリファレンスを読み込む:

ui-design-grounding/reference/implementation.md
ui-design-grounding/reference/motion-design.md
ui-design-grounding/reference/responsive-design.md
ui-design-grounding/reference/typography.md

手順

1. 現状の確認

対象UIの技術スタック、既知のパフォーマンス問題、計測値（あれば）を把握する。

2. レンダリング性能

不要な再レンダリングの特定と修正
コンポーネントのメモ化（React.memo、useMemo、useCallback）の検討
仮想スクロールの必要性判断（大量リスト）
DOM要素数の削減

3. アニメーション性能

transform/opacity 以外のアニメーションプロパティを特定し修正
will-change の不適切な先行使用を特定し除去
高さアニメーション → grid-template-rows: 0fr → 1fr への変更
60fps維持の確認

4. 画像・アセット最適化

適切なフォーマット選択: WebP、AVIF（フォールバック付き）
レスポンシブ画像: srcset + sizes の実装
遅延読み込み: loading="lazy"（ビューポート外の画像）
画像サイズの最適化（不要に大きい画像の特定）

5. フォント最適化

font-display: swap の設定
メトリクスマッチング: size-adjust、ascent-override でレイアウトシフト防止
使用しないウェイト・文字セットの除去
システムフォントの検討（性能最優先の場合）

6. バンドル・ローディング

コード分割の機会特定（ルートベース、コンポーネントベース）
クリティカルCSSのインライン化
不要なCSS/JSの除去
プリロード・プリフェッチの適用

7. Core Web Vitals 改善提案

LCP（Largest Contentful Paint）: ヒーロー画像の最適化、フォント読み込み、サーバー応答時間
INP（Interaction to Next Paint）: イベントハンドラの最適化、長いタスクの分割
CLS（Cumulative Layout Shift）: 画像の寸法指定、フォントのメトリクスマッチング、動的コンテンツの領域確保

出力フォーマット

## 最適化結果

### 改善項目
| 項目 | 対象 | 改善内容 | 影響度 |
|------|------|---------|-------|
| ... | ... | ... | 高/中/低 |

### Core Web Vitals への影響
- LCP: ...
- INP: ...
- CLS: ...

### 追加で検討すべき最適化
- ...

推奨される次のステップ

パフォーマンス最適化後、以下のコマンドスキルの実行を検討する:

/audit-ui — 最適化後の技術品質を総合監査
/adapt-ui — 最適化がモバイル等の各デバイスで有効か確認