What problem does it solve?
This Skill provides a standardized design system to ensure consistency across all web development projects, simplifying the implementation of brand colors, typography, and responsive design.
Core Features & Use Cases
- Brand Colors: Implement brand colors with dark mode support.
- Typography System: Utilize Google Fonts for consistent typography across projects.
- Spacing & Layout: Define standardized spacing and layout rules.
- Responsive Design: Apply mobile-first responsive breakpoints.
- Dark Mode: Implement dark mode for improved user experience.
- Component Styling: Follow established component styling patterns.
- Accessibility: Ensure WCAG AA compliance for accessibility.
- Use Case: When starting a new web project or updating existing styles to align with brand guidelines.
Quick Start
Use the brand-styling skill to set up a new project with the following steps:
- Install dependencies:
npm install next-themes lucide-react
- Copy configuration files:
cp -r assets/tailwind.config.js assets/globals.css assets/theme-provider.tsx assets/theme-toggle.tsx .
- Update your layout:
import { ThemeProvider } from '@/components/providers/theme-provider'; import '@/styles/globals.css'; export default function RootLayout({ children }) { return ( <html lang="en" suppressHydrationWarning> <body> <ThemeProvider> {children} </ThemeProvider> </body> </html> ); }
