Antigravity Skills - Build and Discover AI Agent SkillsAntigravity Skills

UIUX Designer Skill · Development

UIUX Designer – Comprehensive Design Intelligence for Web & Mobile

Get 97 color palettes, 57 font pairings, and 99 UX guidelines.

Design accessible, responsive apps with priority-based recommendations. Download now.

  • Color Palette
  • Typography
  • Accessibility
  • Responsive
  • Touch Targets
  • UI Components

About This Skill

This skill provides 50+ design styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 12 technology stacks. Use priority-based recommendations for accessibility, touch, performance, and more.

Quick Start

  1. 1Install the skill via Antigravity Skills.
  2. 2Use the 'design' command followed by your query (e.g., 'design: landing page palette').
  3. 3Get priority-based recommendations for accessibility, touch, layout, and typography.
Example Command
design: color palette for landing page, tech stack React

Core Capabilities

Accessibility Guidelines

Ensure WCAG compliance with minimum 4.5:1 contrast ratios, visible focus states, alt text, aria labels, and keyboard navigation.

Touch & Interaction Design

Optimize touch targets (minimum 44x44px), hover vs tap behavior, loading states, and clear error feedback.

Performance Optimization

Implement performance best practices for UI, reducing reflows, optimizing animations, and ensuring smooth interactions.

Layout & Responsive Design

Responsive grid systems, breakpoints, and adaptive layouts for all screen sizes, from mobile to desktop.

Usage Examples

Input

Design a landing page for a SaaS product with a modern style.

Output

Style: Modern. Color palette: #1E3A5F, #F9A825. Font pairing: Inter + Playfair Display. Accessibility: contrast ratio 4.5:1 met.

Before

blue on white button

After

dark blue #003366 on white button

Input

Touch target size for a mobile menu icon.

Output

Current size 32x32px – below minimum 44x44px. Increase to at least 44x44px for accessibility.

SKILL.md

---
name: uiux-designer
description: "Use this skill when designing UI components, choosing color palettes, implementing responsive layouts, or reviewing code for UX issues. For landing pages, dashboards, e-commerce, SaaS, and mobile apps. Provides 50+ design styles, 97 color palettes, 57 font pairings, and stack-specific guidelines for React, Vue, Next.js, Flutter, SwiftUI, and more."
---

# UIUX Designer - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 12 technology stacks. Searchable database with priority-based recommendations.

## Overview

Reference these guidelines when:
- Designing new UI components or pages
- Choosing color palettes and typography
- Reviewing code for UX issues
- Building landing pages or dashboards
- Implementing accessibility requirements

## Protocols

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

### Step 1: Analyze User Requirements
- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
- Industry: healthcare, fintech, gaming, education, etc.
- Stack: React, Vue, Next.js, or default to html-tailwind

### Step 2: Generate Design System (REQUIRED)
python3 .agent/skills/uiux-designer/scripts/search.py "<keywords>" --design-system -p "Project Name"

### Step 3: Supplement with Detailed Searches
python3 .agent/skills/uiux-designer/scripts/search.py "<keyword>" --domain <domain>

### Step 4: Stack Guidelines
python3 .agent/skills/uiux-designer/scripts/search.py "<keyword>" --stack html-tailwind

Frequently Asked Questions

FAQ

Which tech stacks does this skill support?
It supports React, Vue, Next.js, Flutter, SwiftUI, and 12 more stacks, with stack-specific guidelines.
Who is this skill for?
Designed for developers, designers, and product teams building web and mobile applications who need quick, reliable design guidelines.
How is this different from Figma or other design tools?
It provides priority-based design guidelines and code-level recommendations, not just visual mockups, helping you implement accessible and performant UIs directly.
Does it support multiple languages and RTL?
Yes, the skill includes guidelines for multiple languages, including RTL support, typography adjustments, and locale-specific considerations.
What results can I expect from using this skill?
You'll get accessible, responsive, and performant designs using 50+ styles, 97 color palettes, 57 font pairings, and 99 UX guidelines.

Discussion

Discussion

0 comments
U

On This Page

Trigger Phrases

Use these phrases to activate this skill in your AI coding assistant:

design a buttoncolor palettefont pairingaccessibility checktouch targetresponsive layoutUX guidelines