ReddRadar
Agent skill
tailwind-theme-styling
Style the dev-quiz-battle app using Tailwind CSS v4 with OKLCH colors, dark mode support, and modern design patterns. Use when creating responsive layouts, applying themes, and implementing visual components.
Install this agent skill to your Project
npx add-skill https://github.com/violabg/dev-quiz-battle/tree/main/skills/tailwind-theme-styling
Metadata
Additional technical details for this skill
- author
- dev-quiz-battle
- version
- 1.0
SKILL.md
Tailwind Theme Styling
This skill covers styling the dev-quiz-battle application with Tailwind CSS v4.
Step-by-step instructions
1. Using Tailwind v4 Syntax
Tailwind 4 uses simplified syntax:
@import "tailwindcss";
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
}
.card {
@apply rounded-lg border border-gray-200 shadow-sm p-6;
}
}
2. OKLCH Color Format
Use OKLCH for CSS custom properties:
:root {
--color-primary: oklch(0.65 0.15 260);
--color-accent: oklch(0.7 0.12 40);
--color-success: oklch(0.65 0.15 150);
--color-error: oklch(0.65 0.22 30);
}
.element {
color: var(--color-primary);
}
3. Dark Mode Implementation
Use next-themes for theme switching:
// In layout.tsx
import { ThemeProvider } from "@/components/theme-provider";
export default function RootLayout({ children }) {
return (
<html suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
);
}
4. Responsive Design
Use Tailwind breakpoints:
export const ResponsiveLayout = ({ children }: Props) => {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{children}
</div>
);
};
5. Component Styling
Style game components with utility classes:
export const GameCard = ({ title, children }: Props) => {
return (
<div className="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-6 hover:shadow-md transition-shadow bg-white dark:bg-gray-900">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
{title}
</h3>
{children}
</div>
);
};
6. Animation and Transitions
Use Tailwind's animation utilities:
export const LoadingSpinner = () => {
return (
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
);
};
export const FadeInComponent = ({ children }: Props) => {
return <div className="animate-fade-in duration-300">{children}</div>;
};
7. Gradient Text
Create modern gradient effects:
export const GradientHeading = ({ text }: Props) => {
return (
<h1 className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent text-4xl font-bold">
{text}
</h1>
);
};
Common Patterns
- Card components: Border, shadow, rounded corners
- Buttons: Primary, secondary, danger variants
- Forms: Input styling, error states, labels
- Navigation: Sticky headers, active states
- Games: Score displays, player cards, status badges
Color Palette
Use these Tailwind colors throughout:
- Primary:
blue-500,blue-600 - Secondary:
purple-500,purple-600 - Success:
green-500,green-600 - Error:
red-500,red-600 - Background:
white/gray-900(dark mode)
Dark Mode Classes
Always include dark mode variants:
className = "bg-white dark:bg-gray-900 text-gray-900 dark:text-white";
See Theme Configuration Reference for detailed color system.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
violabg/dev-quiz-battle
next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
violabg/dev-quiz-battle
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
violabg/dev-quiz-battle
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
violabg/dev-quiz-battle
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
violabg/dev-quiz-battle
convex
Umbrella skill for all Convex development patterns. Routes to specific skills like convex-functions, convex-realtime, convex-agents, etc.
violabg/dev-quiz-battle
quiz-game-mechanics
Implement quiz game logic including game creation, player turn management, score calculation, answer validation, and game completion. Use when building game flows, turn-based mechanics, and scoring algorithms.
Didn't find tool you were looking for?