frontend-ui-designer

Name: frontend-ui-designer
Author: GrishaAngelovGH

15stars2forks

How to install frontend-ui-designer?

grishaangelovgh/gemini-cli-agent-skills/frontend-ui-designer

$npx -y skills add GrishaAngelovGH/gemini-cli-agent-skills --skill frontend-ui-designer

Installs into the current project.

Summary

Expert guidance for creating modern, intuitive, and visually stunning user interfaces. Use this skill when designing or implementing frontend UIs, components, layout structures, or styling.

Files · 1

View on GitHub

SKILL.md

1	# Frontend UI Designer Instructions
2
3	## 1. Visual Hierarchy & Composition
4	- Priority: Ensure the most important actions (CTAs) are most prominent. Use size, weight, and color to guide the eye.
5	- F-Pattern & Z-Pattern: Design layouts that follow natural scanning patterns for text-heavy and visual-heavy pages respectively.
6	- White Space: Use generous white space to reduce cognitive load and group related elements.
7	- Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).
8
9	## 2. Color Theory & Application
10	- The 60-30-10 Rule: 60% dominant neutral color (backgrounds/surfaces), 30% secondary color (borders/text), 10% accent color (CTAs/links).
11	- Contrast: Maintain WCAG AA/AAA compliance. Use high-contrast ratios for readability.
12	- Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).
13	- Dark Mode Support: Ensure all colors have a dark mode equivalent. Use lighter grays (e.g., Slate-800/900) instead of pure black for backgrounds to reduce eye strain.
14	- Modern Palette Recommendation:
15	- Primary: Indigo (#6366F1) or Slate (#0F172A)
16	- Surface: White (#FFFFFF) or extremely light gray (#F8FAFC)
17	- Text: Slate-900 (#0F172A) for headings, Slate-600 (#475569) for body text.
18
19	## 3. Typography
20	- Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'. Limit to two font families.
21	- Scale: Use a modular scale (e.g., Major Third).
22	- H1: 2.25rem (36px), Bold
23	- H2: 1.875rem (30px), Semi-bold
24	- H3: 1.5rem (24px), Semi-bold
25	- Body: 1rem (16px), Regular
26	- Small: 0.875rem (14px), Medium
27	- Line Height: 1.5 - 1.6 for body text to ensure readability; tighter (1.2-1.3) for headings.
28
29	## 4. Layout & Spacing
30	- 8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing. This creates a rhythmic, professional feel.
31	- Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.
32	- Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.
33	- Responsive Design: Always consider Mobile-First. Use flexible flex/grid layouts.
34
35	## 5. Modern UI Trends & Techniques (2025/2026)
36	- Soft Shadows & Depth: Use `box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);` instead of harsh borders.
37	- Glassmorphism: For overlays/navbars, use `background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);`.
38	- Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.
39	- Border Radius: Use `rounded-lg` (8px) or `rounded-xl` (12px) for a soft, modern aesthetic.
40	- Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight. Keep animations fast (150-300ms).
41
42	## 6. Component Patterns & Polishing
43	- Form Design:
44	- Single Column: Preferred for readability and mobile-friendliness.
45	- Labels: Always visible above inputs (avoid placeholders as labels).
46	- Validation: Real-time inline validation with clear error messages.
47	- Autofill: Support appropriate autocomplete attributes.
48	- Empty States:
49	- Never Blank: Provide a helpful illustration, explanation, and a primary action button (e.g., "No projects yet. [Create Project]").
50	- Educational: Use this space to teach users about the feature.
51	- Skeleton Loading:
52	- Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.
53	- Structure: Mimic the final layout (image, title, text lines) to reduce layout shift (CLS).
54	- Navigation:
55	- Thumb Zone: Place primary navigation/actions at the bottom on mobile.
56	- Gestures: Support common gestures like "swipe to go back" or "swipe to dismiss".
57
58	## 7. Accessibility & Inclusivity (A11y)
59	- Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., `ring-2 ring-offset-2`).
60	- Touch Targets: Minimum touch target size of 44x44px (or 48x48px) for mobile users.
61	- Screen Readers: Use semantic HTML (`<button>`, `<nav>`, `<main>`) and ARIA labels where visual context isn't enough.
62	- Neurodiversity: Offer clear, distraction-free modes where possible. Avoid autoplaying media.
63
64	## 8. Best Practices & UX
65	- Affordance: Buttons should look clickable. Links should be clearly identifiable.
66	- Feedback: Provide immediate visual feedback for all user actions (loading states, success toasts, error messages).
67	- Consistency: Use a design system or component library

People who liked this also viewed

6 picks

Type

frontend-ui-designer

15stars2forks

View on GitHub

How to install frontend-ui-designer?

grishaangelovgh/gemini-cli-agent-skills/frontend-ui-designer

$npx -y skills add GrishaAngelovGH/gemini-cli-agent-skills --skill frontend-ui-designer

Installs into the current project.

Summary

Expert guidance for creating modern, intuitive, and visually stunning user interfaces. Use this skill when designing or implementing frontend UIs, components, layout structures, or styling.

Files · 1

View on GitHub

SKILL.md

1	# Frontend UI Designer Instructions
2
3	## 1. Visual Hierarchy & Composition
4	- Priority: Ensure the most important actions (CTAs) are most prominent. Use size, weight, and color to guide the eye.
5	- F-Pattern & Z-Pattern: Design layouts that follow natural scanning patterns for text-heavy and visual-heavy pages respectively.
6	- White Space: Use generous white space to reduce cognitive load and group related elements.
7	- Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).
8
9	## 2. Color Theory & Application
10	- The 60-30-10 Rule: 60% dominant neutral color (backgrounds/surfaces), 30% secondary color (borders/text), 10% accent color (CTAs/links).
11	- Contrast: Maintain WCAG AA/AAA compliance. Use high-contrast ratios for readability.
12	- Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).
13	- Dark Mode Support: Ensure all colors have a dark mode equivalent. Use lighter grays (e.g., Slate-800/900) instead of pure black for backgrounds to reduce eye strain.
14	- Modern Palette Recommendation:
15	- Primary: Indigo (#6366F1) or Slate (#0F172A)
16	- Surface: White (#FFFFFF) or extremely light gray (#F8FAFC)
17	- Text: Slate-900 (#0F172A) for headings, Slate-600 (#475569) for body text.
18
19	## 3. Typography
20	- Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'. Limit to two font families.
21	- Scale: Use a modular scale (e.g., Major Third).
22	- H1: 2.25rem (36px), Bold
23	- H2: 1.875rem (30px), Semi-bold
24	- H3: 1.5rem (24px), Semi-bold
25	- Body: 1rem (16px), Regular
26	- Small: 0.875rem (14px), Medium
27	- Line Height: 1.5 - 1.6 for body text to ensure readability; tighter (1.2-1.3) for headings.
28
29	## 4. Layout & Spacing
30	- 8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing. This creates a rhythmic, professional feel.
31	- Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.
32	- Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.
33	- Responsive Design: Always consider Mobile-First. Use flexible flex/grid layouts.
34
35	## 5. Modern UI Trends & Techniques (2025/2026)
36	- Soft Shadows & Depth: Use `box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);` instead of harsh borders.
37	- Glassmorphism: For overlays/navbars, use `background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);`.
38	- Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.
39	- Border Radius: Use `rounded-lg` (8px) or `rounded-xl` (12px) for a soft, modern aesthetic.
40	- Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight. Keep animations fast (150-300ms).
41
42	## 6. Component Patterns & Polishing
43	- Form Design:
44	- Single Column: Preferred for readability and mobile-friendliness.
45	- Labels: Always visible above inputs (avoid placeholders as labels).
46	- Validation: Real-time inline validation with clear error messages.
47	- Autofill: Support appropriate autocomplete attributes.
48	- Empty States:
49	- Never Blank: Provide a helpful illustration, explanation, and a primary action button (e.g., "No projects yet. [Create Project]").
50	- Educational: Use this space to teach users about the feature.
51	- Skeleton Loading:
52	- Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.
53	- Structure: Mimic the final layout (image, title, text lines) to reduce layout shift (CLS).
54	- Navigation:
55	- Thumb Zone: Place primary navigation/actions at the bottom on mobile.
56	- Gestures: Support common gestures like "swipe to go back" or "swipe to dismiss".
57
58	## 7. Accessibility & Inclusivity (A11y)
59	- Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., `ring-2 ring-offset-2`).
60	- Touch Targets: Minimum touch target size of 44x44px (or 48x48px) for mobile users.
61	- Screen Readers: Use semantic HTML (`<button>`, `<nav>`, `<main>`) and ARIA labels where visual context isn't enough.
62	- Neurodiversity: Offer clear, distraction-free modes where possible. Avoid autoplaying media.
63
64	## 8. Best Practices & UX
65	- Affordance: Buttons should look clickable. Links should be clearly identifiable.
66	- Feedback: Provide immediate visual feedback for all user actions (loading states, success toasts, error messages).
67	- Consistency: Use a design system or component library

People who liked this also viewed

6 picks

Type