← Back to list
nextjs-styling-ui-performance
by HoangNguyen0403
A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages
⭐ 111🍴 40📅 Jan 23, 2026
Run in ManusSKILL.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.
Score
Total Score
85/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
✓説明文
100文字以上の説明がある
+10
✓人気
GitHub Stars 100以上
+5
✓最近の活動
1ヶ月以内に更新
+10
✓フォーク
10回以上フォークされている
+5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
Reviews
💬
Reviews coming soon
