---

name: frontend-master description: Frontend UI/UX work with Gemini CLI in --yolo mode. Use when (1) modifying visual/styling elements in frontend files (.tsx, .jsx, .vue, .svelte, .css), (2) implementing UI components, (3) adjusting layout, colors, spacing, typography, or animations, (4) creating responsive designs, or (5) any frontend task involving how things LOOK rather than how they WORK.

Gemini Frontend Skill

Execute frontend UI/UX tasks using Gemini CLI in --yolo mode for automatic approval.

When to Use

• Visual changes: colors, backgrounds, borders, shadows
• Layout: flexbox, grid, margins, padding, positioning
• Typography: font sizes, weights, line heights
• Animation: transitions, keyframes, hover states
• Responsive design: breakpoints, media queries
• Component styling: Tailwind, CSS-in-JS, styled-components

When NOT to Use

• Pure logic changes (API calls, state management, event handlers)
• Type definitions, utility functions, business logic
• Use logic-master skill for logic optimization or image-based tasks

Execution Pattern

Basic Command Structure

Copy# With file context
cat <frontend-file> | gemini --yolo --prompt "<instruction>"

# With directory context
gemini --yolo --prompt "<instruction>" --include-directories <dirs>

# With all project files
gemini --yolo --prompt "<instruction>" --all-files

Required Flags

Workflow

1. Identify frontend file(s) to modify
2. Construct Gemini command with --yolo flag
3. Execute via bash tool
4. Verify results with lsp_diagnostics
5. Apply changes if output is satisfactory

Example Commands

Modify Component Styling

Copy# Update button styles
cat src/components/Button.tsx | gemini --yolo -p "Change button color to blue-500, add hover:scale-105 transition"

# Responsive navbar
gemini --yolo -p "Make the navbar responsive with hamburger menu on mobile" --include-directories src/components

Layout Changes

Copy# Convert to grid layout
cat src/pages/Dashboard.tsx | gemini --yolo -p "Convert this layout to CSS Grid with 3 columns"

# Add spacing
gemini --yolo -p "Add consistent spacing between cards using gap-4" --include-directories src/components/cards

Animation & Effects

Copy# Add transitions
cat src/components/Modal.tsx | gemini --yolo -p "Add fade-in animation when modal opens"

# Hover effects
gemini --yolo -p "Add subtle shadow and scale effect on card hover" --include-directories src/components

Full Project Changes

Copy# Theme update
gemini --yolo -p "Update all components to use dark mode color palette" --all-files

# Design system alignment
gemini --yolo -p "Align all buttons to use design system tokens" --all-files

Output Handling

Get JSON Output for Scripting

Copygemini --yolo -p "List all CSS classes used in this component" --output-format json | jq '.response'

Save Changes to File

Copycat src/styles/main.css | gemini --yolo -p "Add responsive utilities" > src/styles/main.css.new

Integration with Subagents

When delegating to frontend-ui-ux-engineer:

Copy1. TASK: Execute Gemini CLI to update component styling
2. EXPECTED OUTCOME: Component with updated visual styles
3. REQUIRED SKILLS: frontend-master
4. REQUIRED TOOLS: Bash (for gemini CLI), Read, lsp_diagnostics
5. MUST DO: 
   - Use --yolo flag for auto-approval
   - Verify changes with lsp_diagnostics after execution
   - Match existing Tailwind/CSS patterns in codebase
6. MUST NOT DO:
   - Modify logic or event handlers
   - Remove existing functionality
   - Use --approval-mode (use --yolo instead)
7. CONTEXT: [file paths, design requirements, existing patterns]

Troubleshooting

Security Note

--yolo mode auto-approves ALL actions. Use only when:

• Working in version-controlled directories
• Changes can be easily reverted
• No sensitive operations involved