用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/tomevault-io/skills-registry --skill designing-nextjs-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
| Use when this capability is needed.
> Use when this capability is needed.
Review architecture and API design for the vfs-s3 project. Use when the user mentions @architect, asks to review an issue's design, discuss module boundaries, API shape, or architectural decisions for vfs-s3. Also trigger when the user wants to create an ADR (Architecture Decision Record) or evaluate a technical approach for the project. Intended for dispatch from Codex automation or Claude routines; GitHub trigger phrase: @vfs-s3-bot please prepare design doc Use when this capability is needed.
基于 SOC 职业分类
正在显示 SKILL.md
| name | designing-nextjs-ui |
| description | Use when building beautiful websites, landing pages, dashboards, or any UI that needs |
| metadata | {"author":"abdullahmalik17"} |
Create visually stunning and highly functional interfaces using modern design patterns and Tailwind CSS.
Avoid generic aesthetics. Every interface should have a clear visual identity:
Balance beauty with function. Beautiful design serves the user experience:
Don't reinvent the wheel. Use this proven combination for consistency and speed.
next/font)Use next/font/google to eliminate layout shift.
Inter or Geist Sans (clean, modern legibility).Playfair Display or Merriweather (for "classy" contrast).import { Inter, Playfair_Display } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' })
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${inter.variable} ${playfair.variable}`}>
<body className="font-sans antialiased">{children}</body>
</html>
)
}
Isolate key numbers. Use the "Label (Muted) -> Value (Bold) -> Context (Color)" hierarchy.
// See references/ui-patterns.md for full component code
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
Total Revenue
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">$45,231.89</div>
<p className="text-xs text-emerald-500 flex items-center mt-1">
+20.1% from last month
</p>
</CardContent>
</Card>
Organize dashboard widgets into a grid of distinct rectangular areas.
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
<div className="md:col-span-2 md:row-span-2 rounded-xl border bg-card text-card-foreground shadow">
{/* Main Chart */}
</div>
<div className="md:col-span-1 rounded-xl border bg-card text-card-foreground shadow">
{/* KPI 1 */}
</div>
<div className="md:col-span-1 rounded-xl border bg-card text-card-foreground shadow">
{/* KPI 2 */}
</div>
<div className="md:col-span-2 rounded-xl border bg-card text-card-foreground shadow">
{/* Recent Activity List */}
</div>
</div>
font-mono) if strict alignment is needed.Create stunning gradient text effects:
<h1 className="text-5xl font-extrabold">
<span className="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent">
Beautiful Gradient
</span>
</h1>
Frosted glass effect for cards and overlays:
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 ring-1 ring-white/20 shadow-xl">
<h3>Glass Card</h3>
</div>
Use animations strategically for attention and feedback:
animate-bounce - Scroll indicators, CTAsanimate-pulse - Loading states, skeleton loadersanimate-spin - Loading spinnershover:scale-105, hover:shadow-xltransition-all duration-300See references/visual-effects.md for comprehensive guide on gradients, shadows, blur effects, animations, and hover patterns.
Color Emphasis:
<p className="text-gray-700">
Normal text with <span className="font-semibold text-violet-600">highlighted words</span>
</p>
Gradient Text:
<span className="bg-gradient-to-r from-yellow-400 to-pink-500 bg-clip-text text-transparent">
Vibrant text
</span>
Background Highlight:
<span className="bg-yellow-200 px-1 font-medium">marked text</span>
Weight & Size Contrast:
font-light with font-bold in same paragraphtext-6xl) with small labels (text-xs)tracking-tight, tracking-wide, tracking-widestSee references/typography-advanced.md for font loading, hierarchy systems, responsive typography, and dark mode patterns.
Always design for mobile first, then enhance for larger screens:
<div className="
grid grid-cols-1 /* Mobile: single column */
sm:grid-cols-2 /* Tablet: 2 columns */
lg:grid-cols-3 /* Desktop: 3 columns */
gap-4 sm:gap-6 lg:gap-8 /* Progressive spacing */
">
{/* Grid items */}
</div>
Use consistent spacing (0.25rem increments):
gap-2, gap-4, gap-6, gap-8 - Between itemsp-4, px-6, py-8 - Paddingmt-8, mb-4, mx-auto - Marginsflex items-center justify-betweengrid grid-cols-4 gap-4max-w-6xl mx-auto px-4aspect-video, aspect-squareSee references/layout-patterns.md for complete responsive patterns, Flexbox, Grid systems, spacing utilities, and container patterns.
Make the app feel "alive" but not noisy.
// Subtle fade-in for page content
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
Typography:
next/font/google for zero layout shifttext-6xl → text-4xl → text-2xl → text-xl → text-baseVisual Effects:
bg-gradient-to-r from-{color} to-{color}shadow-md, shadow-lg, shadow-xl, shadow-2xlbackdrop-blur-md, backdrop-blur-lganimate-bounce, animate-pulse, hover:scale-105Layout:
sm:, md:, lg:, xl: breakpointsflex items-center justify-between gap-4grid grid-cols-{n} gap-{size}p-{n}, m-{n}, gap-{n} (multiples of 0.25rem)Colors:
text-gray-900 dark:text-whitebg-white dark:bg-gray-800border border-gray-200 dark:border-gray-700Run: python scripts/verify.py
Converted and distributed by TomeVault — claim your Tome and manage your conversions.