skills.rest
GrishaAngelovGH
GrishaAngelovGHCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/GrishaAngelovGH/gemini-cli-agent-skills --skill frontend-ui-designer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
yaomindong1996yaomindong1996
103

frontend-design

Generates frontend interfaces with intentional aesthetic direction and refined typography for Vue, React, or HTML/CSS/JS projects.

Community
Intermediate
Renzo-TognellaRenzo-Tognella

PerfectJob — Skill: UI/UX Design

Apply UI/UX design principles to cross-platform applications with user flows and wireframes.

Community
Advanced
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic