--- name: modern-ui-skill description: Helps Claude design the best, modern, and market up-to-date user interfaces, leveraging the Context7 Skill for context awareness and the Skill Creator Skill for structuring new skills with current UI\/UX best practices. --- # Modern-UI-Skill This skill enables Claude to design modern, responsive, and market-relevant user interfaces that align with current design trends and best practices. ## Purpose The modern-ui-skill provides Claude with the capability to: - Analyze project requirements using Context7 Skill for comprehensive understanding - Generate modern, responsive UI designs aligned with current market trends - Provide color schemes, typography, layout suggestions, and component recommendations - Create actionable code snippets for popular front-end frameworks - Apply skill creator methodology when structuring UI components as modular skills ## Instructions for Modern UI Design ### 1. Context Analysis with Context7 When analyzing UI requirements: - Apply Context7 analysis to understand project scope and user needs - Identify key elements, themes, and interconnections in requirements - Extract actionable UI elements and user journey insights - Maintain context continuity for consistent design language - Note specific user interactions and accessibility requirements ### 2. Modern Design Principles When creating UI designs: - Follow current design trends (neumorphism, glassmorphism, brutalism, etc.) appropriately - Apply clean, minimalist aesthetics with purposeful visual elements - Ensure responsive design across all device sizes - Implement accessibility best practices (WCAG 2.1 guidelines) - Consider performance implications of design choices ### 3. Color and Typography When selecting visual elements: - Use modern color palettes (monochromatic, complementary, or gradient-based) - Apply consistent typography hierarchy with appropriate font pairings - Ensure sufficient contrast ratios for readability - Consider brand alignment while maintaining modern aesthetics - Use system fonts or optimized web fonts for performance ### 4. Component Recommendations When suggesting UI components: - Recommend reusable, modular components for consistency - Focus on intuitive user interactions and micro-interactions - Include data visualization components when needed (charts, graphs, etc.) - Suggest appropriate animation and transition effects - Consider mobile-first design approach ### 5. Code Implementation When providing code examples: - Use modern frameworks (React, Vue, Angular) with current best practices - Implement Tailwind CSS, Material UI, or other popular styling libraries - Include responsive design patterns and mobile considerations - Provide accessibility attributes and semantic HTML - Follow component architecture best practices ## Examples ### Example 1: SaaS Landing Page Design **Input:** ``` Design a landing page UI for a SaaS product using modern best practices. ``` **Expected Output:** ``` ## Analysis (Context7) - Product: SaaS solution requiring clear value proposition - Users: Business professionals seeking productivity tools - Key elements: Hero section, features, testimonials, pricing, CTA ## Modern Design Approach - Layout: Clean, asymmetrical design with generous whitespace - Color scheme: Professional blue (#3B82F6) with neutral grays (#1F2937, #F9FAFB) - Typography: Inter for headings, Open Sans for body text - Visual elements: Subtle gradients, soft shadows, micro-interactions ## Implementation (React + Tailwind) ```jsx import React from 'react'; const LandingPage = () => { return (

{\/* Navigation *\/}