frontend-ui-designer

Design and refine frontend interfaces for clarity, usability, and visual hierarchy.

15|2|Updated Jan 8, 2026

Search Tags:#typography #accessibility #components #ui-design #design-system #micro-interactions #responsive-design

Ready to run

npx skills add https://github.com/GrishaAngelovGH/gemini-cli-agent-skills --skill frontend-ui-designer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-designer
Source: https://github.com/GrishaAngelovGH/gemini-cli-agent-skills/tree/main/frontend-ui-designer
Command: npx skills add https://github.com/GrishaAngelovGH/gemini-cli-agent-skills --skill frontend-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams and designers create clear, usable, and visually consistent front-end interfaces that reduce cognitive load, improve accessibility, and accelerate implementation for web and mobile products.

Core Features & Use Cases

Visual Hierarchy & Layout: Guidance on prioritization, F-pattern/Z-pattern layouts, 8pt spacing grid, and responsive containerization for dashboards, landing pages, and forms.
Color, Typography & Styling: Recommendations for accessible palettes, dark mode equivalents, typographic scale, subtle shadows, gradients, and border-radius for a modern aesthetic.
Components & Polishing: Best practices for forms, empty states, skeleton loading, micro-interactions, and navigation patterns to improve perceived performance and UX consistency.

Quick Start

Design a responsive dashboard UI that emphasizes clear visual hierarchy, accessible color contrast, modular spacing, and mobile-first behavior.

Frequently Asked Questions about frontend-ui-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design a responsive dashboard UI with accessible color contrast?▼

Design a responsive dashboard UI by applying an 8pt spacing grid for modular layout, ensuring accessible color contrast ratios, and using a defined typographic scale to establish clear visual hierarchy across mobile and web applications.

What is the best way to structure visual hierarchy for frontend component design?▼

Structure visual hierarchy for frontend component design by prioritizing content using F-pattern or Z-pattern layouts, applying an 8pt spacing grid, and leveraging typographic scale to guide user attention effectively across dashboards and forms.

How do I create dark mode equivalents for my web application interface?▼

Create dark mode equivalents by adjusting your accessible color palettes for sufficient contrast, modifying subtle shadows and gradients, and ensuring typographic scale remains legible against dark backgrounds for modern aesthetic consistency.

Does responsive design require an 8pt spacing grid for onboarding flows?▼

Responsive design for onboarding flows benefits from an 8pt spacing grid, which ensures consistent modular spacing, responsive containerization, and clear visual hierarchy across different screen sizes for web and mobile applications.

How do I add micro-interactions and skeleton loading to improve perceived performance?▼

Add micro-interactions and skeleton loading to improve perceived performance by applying best practices for empty states and navigation patterns, enhancing UX consistency and reducing cognitive load during content rendering delays.