ui-design-styles
UI Design Styles
This skill provides specialized knowledge and workflows for implementing the most popular modern UI design styles. It focuses on achieving a professional, polished look while maintaining high standards for accessibility and legibility.
Core UI Styles
Select the style that best fits the project's goals:
- Soft UI / Modern Design: Best for friendly, inviting B2C interfaces. Uses subtle gradients and lifelike shadows. See soft_ui.md.
- Dark Mode: Essential for modern apps. Focuses on hierarchy through lighting and OLED-friendly black levels. See dark_mode.md.
- Flat Design: Focuses on minimalism, high-contrast typography, and clarity. Great for e-commerce and luxury brands. See flat_design.md.
- Neumorphism: A stylized "extruded plastic" look. Best used sparingly for specific container elements. See neumorphism.md.
- Glassmorphism: A frosted glass effect using background blur and transparency. Adds depth and a premium feel. See glassmorphism.md.
- Aurora UI Gradients: Organic, blurry, northern-lights-style backgrounds. Excellent for ornamentation and pairing with Glassmorphism. See aurora_ui.md.
General Design Principles
Regardless of the chosen style, always apply these fundamental practices:
More from neversight/skills_feed
ai-image-generation
|
7react-best-practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
7ui-designer
Use when user needs visual UI design, interface creation, component systems, design systems, interaction patterns, or accessibility-focused user interfaces.
7python-env
Fast Python environment management with uv (10-100x faster than pip). Triggers on: uv, venv, pip, pyproject, python environment, install package, dependencies.
7typescript-best-practices
Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation. Must use when reading or writing TypeScript/JavaScript files.
6ai-marketing-videos
|
6