بنقرة واحدة
add-responsive-layout
Add responsive layouts following mobile-first design principles with Tailwind CSS
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Add responsive layouts following mobile-first design principles with Tailwind CSS
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Add a new Recharts visualization with theme-aware styling to the dashboard
Add a new metric card to the dashboard with proper styling and components
Add Lucide React icons to components following project conventions
Add a new shadcn/ui component to the project following the New York style variant
Add or customize theme colors in the CSS custom properties system
Create a new dashboard page following Next.js 15 App Router conventions
| name | add-responsive-layout |
| description | Add responsive layouts following mobile-first design principles with Tailwind CSS |
When creating responsive layouts in this Next.js dashboard:
Mobile-first approach (default):
Grid layouts for card-based designs:
// Dashboard cards: 1 column mobile, 2 tablet, 4 desktop
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{cards.map(card => <Card key={card.id} />)}
</div>
// Charts: 1 column mobile, 3 desktop
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{charts.map(chart => <Chart key={chart.id} />)}
</div>
Typography scaling:
// Headings
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold">
// Body text
<p className="text-sm sm:text-base md:text-lg">
// Small text
<span className="text-xs sm:text-sm">
Spacing adjustments:
// Padding
<div className="p-4 md:p-6 lg:p-8">
// Margins
<div className="mt-4 md:mt-6 lg:mt-8">
// Gap between items
<div className="gap-4 md:gap-6 lg:gap-8">
Sidebar and navigation (handled by LayoutWrapper):
Chart responsiveness:
// Charts use ResponsiveContainer from Recharts
<ResponsiveContainer
width="100%"
height={250}
className="sm:h-[300px]"
>
<LineChart data={data}>
{/* Chart content */}
</LineChart>
</ResponsiveContainer>
Hide/show elements at different breakpoints:
// Hidden on mobile, visible on desktop
<div className="hidden md:block">Desktop only</div>
// Visible on mobile, hidden on desktop
<div className="md:hidden">Mobile only</div>
// Visible on tablet and up
<div className="hidden sm:block">Tablet and desktop</div>
Flexbox for complex layouts:
// Stack on mobile, row on desktop
<div className="flex flex-col md:flex-row gap-4">
<div className="flex-1">Content 1</div>
<div className="flex-1">Content 2</div>
</div>
Container and max-width:
// Contained layout with max width
<div className="container mx-auto px-4 max-w-7xl">
Content
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{stats.map((stat, i) => (
<DashboardStatCard key={i} stat={stat} />
))}
</div>
<header className="space-y-2">
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
Dashboard
</h1>
<p className="text-sm text-muted-foreground sm:text-base">
Welcome back! Here's what's happening today.
</p>
</header>
<Card className="p-4 sm:p-6">
<CardHeader className="px-0 pt-0">
<CardTitle className="text-lg sm:text-xl">
Card Title
</CardTitle>
</CardHeader>
<CardContent className="px-0 pb-0">
<div className="text-xl sm:text-2xl md:text-3xl font-bold">
$45,231
</div>
</CardContent>
</Card>
<nav className="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-4">
<Link href="/dashboard" className="text-sm sm:text-base">
Dashboard
</Link>
<Link href="/analytics" className="text-sm sm:text-base">
Analytics
</Link>
<Link href="/settings" className="text-sm sm:text-base">
Settings
</Link>
</nav>
src/components/LayoutWrapper.tsxsrc/components/DashboardCharts.tsxsrc/components/AppSidebar.tsxcreate-dashboard-pageadd-dashboard-card