frontend-ui-designer
CommunityCreate modern, accessible, and delightful UIs
Design & Creative#typography#accessibility#components#ui-design#design-system#micro-interactions#responsive-design
AuthorGrishaAngelovGH
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-ui-designer Download link: https://github.com/GrishaAngelovGH/gemini-cli-agent-skills/archive/main.zip#frontend-ui-designer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.