Name: Frontend-design

Description: Design modern, professional, and user-friendly web interfaces with a strong focus on usability, visual consistency, responsiveness, and real-world product quality. Suitable for dashboards, management systems, SaaS applications, admin panels, and business software.

Frontend Design Guidelines

The purpose of this skill is to create frontend interfaces that feel like real products used in production environments.

The design should balance aesthetics and usability while maintaining a professional appearance.

Understanding the Product

Before starting implementation, understand:

• Who will use the application?
• What problem does it solve?
• What information is most important for users?
• How can users complete tasks quickly and efficiently?

Design decisions should support the user's workflow rather than focusing only on visual effects.

Design Approach

Build interfaces that are:

• Clean
• Professional
• Responsive
• Easy to navigate
• Visually consistent
• Pleasant to use

The interface should feel trustworthy and polished.

Visual Style

Choose a design style that matches the application's purpose.

For business applications, dashboards, and management systems:

• Modern SaaS-inspired layouts
• Clean spacing
• Consistent color palette
• Clear hierarchy
• Professional components

Avoid unnecessary complexity and visual clutter.

Typography

Typography should improve readability.

Guidelines:

• Use a clear visual hierarchy
• Maintain consistent spacing
• Ensure text remains readable on all devices
• Choose fonts appropriate for professional software

Typography should support the content, not distract from it.

Color System

Use a consistent color system across the application.

Colors should communicate:

• Primary actions
• Success states
• Warning states
• Error states
• Information states

Avoid random or inconsistent color usage.

Layout and Structure

Create layouts that help users understand information quickly.

Prefer:

• Dashboard cards
• Data tables
• Search and filtering tools
• Navigation sidebars
• Responsive grids

Important content should be easy to locate.

User Experience

Focus on usability throughout the application.

Provide:

• Clear navigation
• Helpful feedback
• Error handling
• Success messages
• Loading states

Users should always understand what is happening.

Interactions

Use subtle interactions to improve the experience.

Examples:

• Hover effects
• Smooth transitions
• Button feedback
• Form validation indicators

Animations should enhance usability, not distract from it.

Responsive Design

Support:

• Desktop
• Laptop
• Tablet
• Mobile devices

The experience should remain consistent across screen sizes.

Accessibility

Consider accessibility from the beginning.

Ensure:

• Good contrast ratios
• Clear focus states
• Readable font sizes
• Accessible form controls

Quality Standards

The final interface should feel like a production-ready application rather than a tutorial project.

A reviewer should notice:

• Professional appearance
• Clean organization
• Consistent design
• Good usability
• Attention to detail
• Responsive behavior