design-styles
Design Styles
Apply professional design aesthetics to web and app projects with comprehensive style guidance, recommendations, and implementation details.
How to Use This Skill
1. Apply a Specific Style by Name
When user mentions a style (e.g., "use glassmorphism", "apply brutalist design", "make it minimalist"):
- Read
references/design-styles-comprehensive-reference.mdand locate the requested style - Extract key characteristics, color palettes, typography, and layout principles
- Provide specific, actionable implementation guidance:
- Color schemes with hex codes
- Typography recommendations (font families, sizes, weights)
- Layout principles (spacing, grid, structure)
- CSS/code examples demonstrating the style
- Component-specific guidance (buttons, cards, navigation, etc.)
- Reference real-world examples from the guide
More from nhatmobile1/claude-skills
color-palette
Create distinctive, accessible color palettes for UI/web design that avoid generic AI aesthetics. Use when designing websites, applications, or any digital interface requiring thoughtful color selection. Provides curated domain-specific palettes, color theory guidance, accessibility validation, and strategies to break away from overused patterns (purple gradients, orange-teal combinations, generic tech blues). Includes contrast checkers, palette generators, and comprehensive reference materials organized by domain (Tech/SaaS, E-commerce, Healthcare, Finance, Creative, Food).
4ios-development
Comprehensive iOS development guidelines covering SwiftUI, UIKit, architecture patterns, and Apple platform best practices. Use when building iOS, iPadOS, watchOS, or macOS applications.
1frontend-design-complete
Create distinctive, production-grade frontend interfaces with high design quality. Covers aesthetics, mobile-first patterns, modern CSS, performance (Core Web Vitals), dark mode/theming, AI-era patterns, interaction design, data visualization, fluid typography, responsive images, component architecture, forms, internationalization, cognitive accessibility, design tokens, and cascade layers. Use this as your single frontend design skill.
1