frontend-master

• 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

• 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

Basic Command Structure

```bash

# With file context

cat | gemini --yolo --prompt ""

# With directory context

gemini --yolo --prompt "" --include-directories

# With all project files

gemini --yolo --prompt "" --all-files

```

Required Flags

| Flag | Purpose |

|------|---------|

| --yolo | MANDATORY - Auto-approve all changes |

| --prompt or -p | Specify the task |

| --include-directories | Add specific folders to context |

| --all-files or -a | Include full project context |

| --output-format json | Get structured output for parsing |

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

Modify Component Styling

```bash

# 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

```bash

# 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

```bash

# 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

```bash

# 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

```

Get JSON Output for Scripting

```bash

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

```

Save Changes to File

```bash

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

```

When delegating to frontend-ui-ux-engineer:

```

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

1. MUST NOT DO:

- Modify logic or event handlers

- Remove existing functionality

- Use --approval-mode (use --yolo instead)

1. CONTEXT: [file paths, design requirements, existing patterns]

```

| Issue | Solution |

|-------|----------|

| Command hangs | Ensure --yolo flag is present |

| No changes made | Check file is in context (use --include-directories) |

| Unexpected changes | Add more specific constraints in prompt |

| Build errors | Run lsp_diagnostics and fix type issues |

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

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