← スキル一覧に戻る
nextjs-styling-ui-performance
by HoangNguyen0403
nextjs-styling-ui-performanceは、other分野における実用的なスキルです。複雑な課題への対応力を強化し、業務効率と成果の質を改善します。
⭐ 111🍴 40📅 2026年1月23日
Manusで実行SKILL.md
name: Next.js Styling & UI Performance description: Zero-runtime CSS strategies (Tailwind) and RSC compatibility. metadata: labels: [nextjs, styling, tailwind, css] triggers: files: ['/*.css', 'tailwind.config.ts', '/components/ui/*.tsx'] keywords: [tailwind, css modules, styled-components, clsx, cn]
Styling & UI Performance
Priority: P1 (HIGH)
Prioritize Zero-Runtime CSS for Server Components.
Library Selection
| Library | Verdict | Reason |
|---|---|---|
| Tailwind / shadcn | Preferred (P1) | Zero-runtime, RSC compatible. Best for App Router. |
| CSS Modules | Recommended | Scoped, zero-runtime. |
| MUI / Chakra (Runtime) | Avoid | Forces use client widely. Degrades performance. |
Patterns
- Dynamic Classes: Use
clsx+tailwind-merge(cnutility).- Reference: Dynamic Classes & Button Example
- Font Optimization: Use
next/fontto prevent Cumulative Layout Shift (CLS).- Reference: Font Setup
- CLS Prevention: Always specify
width/heighton images.
スコア
総合スコア
85/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
✓説明文
100文字以上の説明がある
+10
✓人気
GitHub Stars 100以上
+5
✓最近の活動
3ヶ月以内に更新
+5
✓フォーク
10回以上フォークされている
+5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
レビュー
💬
レビュー機能は近日公開予定です
