frontend-design-complete
Complete Frontend Design Guidelines
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics while ensuring proper mobile responsiveness and cross-element consistency.
Part 1: Design Thinking & Aesthetics
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
More from nhatmobile1/claude-skills
design-styles
Comprehensive web design aesthetics guide for applying specific design styles to projects. Use when: (1) User mentions a specific design style name (glassmorphism, brutalist, minimalist, neomorphism, cyberpunk, etc.), (2) User asks for design style recommendations or suggestions, (3) User wants to browse/see available design styles, (4) User is starting a frontend project and needs aesthetic guidance, (5) User asks what style fits their industry/audience/brand, (6) Working with the frontend-design skill and style direction is needed. Provides actionable design direction including color palettes, typography, layout principles, and implementation examples.
14color-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.
1