agentleFS
Sign inStart free
GrishaAngelovGHGrishaAngelovGH/gemini-cli-agent-skills/frontend-ui-designer/SKILL.md

frontend-ui-designer

Skill16 starsChanged 10 months agoMITView on GitHub

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.

The file

Show its rules and text

We split this skill into the rules it gives an agent

23 rules. About 0 are common, 19 are distinctive, and 4 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈19

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 4

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Priority: Ensure the most important actions (CTAs) are most prominent.

    line 9
  2. Distinctive:

    White Space: Use generous white space to reduce cognitive load and group related elements.

    line 11
  3. Distinctive:

    Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).

    line 12
  4. Distinctive:

    Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).

    line 17
  5. Distinctive:

    Dark Mode Support: Ensure all colors have a dark mode equivalent.

    line 18
  6. Distinctive:

    Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'.

    line 25
  7. Distinctive:

    Scale: Use a modular scale (e.g., Major Third).

    line 26
  8. Distinctive:

    8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing.

    line 35
  9. Distinctive:

    Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.

    line 36
  10. Distinctive:

    Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.

    line 37
  11. Distinctive:

    Responsive Design: Always consider Mobile-First.

    line 38
  12. Very specific:

    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).

    line 41
  13. Distinctive:

    Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.

    line 43
  14. Very specific:

    Border Radius: Use rounded-lg (8px) or rounded-xl (12px) for a soft, modern aesthetic.

    line 44
  15. Distinctive:

    Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight.

    line 45
  16. Distinctive:

    Labels: Always visible above inputs (avoid placeholders as labels).

    line 50
  17. Distinctive:

    Educational: Use this space to teach users about the feature.

    line 55
  18. Distinctive:

    Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.

    line 57
  19. Distinctive:

    Thumb Zone: Place primary navigation/actions at the bottom on mobile.

    line 60
  20. Very specific:

    Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., ring-2 ring-offset-2).

    line 64
  21. Very specific:

    Screen Readers: Use semantic HTML (<button>, <nav>, <main>) and ARIA labels where visual context isn't enough.

    line 66
  22. Distinctive:

    Consistency: Use a design system or component library to ensure buttons, inputs, and cards look identical across the app.

    line 72
  23. Distinctive:

    Ethical Design: Avoid dark patterns. Be transparent about data usage and provide easy opt-outs.

    line 73

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Frontend UI Designer Instructions

1. Visual Hierarchy & Composition

  • Priority: Ensure the most important actions (CTAs) are most prominent. Use size, weight, and color to guide the eye.
  • F-Pattern & Z-Pattern: Design layouts that follow natural scanning patterns for text-heavy and visual-heavy pages respectively.
  • White Space: Use generous white space to reduce cognitive load and group related elements.
  • Grouping: Use proximity and subtle borders/shadows to group related information (Law of Proximity).

2. Color Theory & Application

  • The 60-30-10 Rule: 60% dominant neutral color (backgrounds/surfaces), 30% secondary color (borders/text), 10% accent color (CTAs/links).
  • Contrast: Maintain WCAG AA/AAA compliance. Use high-contrast ratios for readability.
  • Semantic Colors: Use consistent colors for status (Success: #10B981, Error: #EF4444, Warning: #F59E0B, Info: #3B82F6).
  • 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.
  • Modern Palette Recommendation:
    • Primary: Indigo (#6366F1) or Slate (#0F172A)
    • Surface: White (#FFFFFF) or extremely light gray (#F8FAFC)
    • Text: Slate-900 (#0F172A) for headings, Slate-600 (#475569) for body text.

3. Typography

  • Font Pairing: Use modern sans-serif fonts like 'Inter', 'Geist', 'Roboto', or 'SF Pro Display'. Limit to two font families.
  • Scale: Use a modular scale (e.g., Major Third).
    • H1: 2.25rem (36px), Bold
    • H2: 1.875rem (30px), Semi-bold
    • H3: 1.5rem (24px), Semi-bold
    • Body: 1rem (16px), Regular
    • Small: 0.875rem (14px), Medium
  • Line Height: 1.5 - 1.6 for body text to ensure readability; tighter (1.2-1.3) for headings.

4. Layout & Spacing

  • 8pt Grid System: Use 4, 8, 16, 24, 32, 48, 64px for all spacing. This creates a rhythmic, professional feel.
  • Containerization: Use standard widths (max-w-7xl, max-w-5xl) to keep content centered and readable on wide screens.
  • Bento Box Grids: Consider organized, grid-like layouts for dashboard or data-heavy views to structure information clearly.
  • Responsive Design: Always consider Mobile-First. Use flexible flex/grid layouts.

5. Modern UI Trends & Techniques (2025/2026)

  • 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.
  • Glassmorphism: For overlays/navbars, use background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);.
  • Subtle Gradients: Use very subtle linear gradients (e.g., Slate-50 to White) or mesh gradients to add depth without distraction.
  • Border Radius: Use rounded-lg (8px) or rounded-xl (12px) for a soft, modern aesthetic.
  • Micro-interactions: Add purposeful motion (hover states, button clicks, loading skeletons) to provide feedback and delight. Keep animations fast (150-300ms).

6. Component Patterns & Polishing

  • Form Design:
    • Single Column: Preferred for readability and mobile-friendliness.
    • Labels: Always visible above inputs (avoid placeholders as labels).
    • Validation: Real-time inline validation with clear error messages.
    • Autofill: Support appropriate autocomplete attributes.
  • Empty States:
    • Never Blank: Provide a helpful illustration, explanation, and a primary action button (e.g., "No projects yet. [Create Project]").
    • Educational: Use this space to teach users about the feature.
  • Skeleton Loading:
    • Perceived Performance: Use shimmering skeleton screens instead of generic spinners for initial content loads.
    • Structure: Mimic the final layout (image, title, text lines) to reduce layout shift (CLS).
  • Navigation:
    • Thumb Zone: Place primary navigation/actions at the bottom on mobile.
    • Gestures: Support common gestures like "swipe to go back" or "swipe to dismiss".

7. Accessibility & Inclusivity (A11y)

  • Keyboard Navigation: Ensure all interactive elements are focusable and have visible focus states (e.g., ring-2 ring-offset-2).
  • Touch Targets: Minimum touch target size of 44x44px (or 48x48px) for mobile users.
  • Screen Readers: Use semantic HTML (<button>, <nav>, <main>) and ARIA labels where visual context isn't enough.
  • Neurodiversity: Offer clear, distraction-free modes where possible. Avoid autoplaying media.

8. Best Practices & UX

  • Affordance: Buttons should look clickable. Links should be clearly identifiable.
  • Feedback: Provide immediate visual feedback for all user actions (loading states, success toasts, error messages).
  • Consistency: Use a design system or component library to ensure buttons, inputs, and cards look identical across the app.
  • Ethical Design: Avoid dark patterns. Be transparent about data usage and provide easy opt-outs.

Available Resources

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free