Gemini Frontend Skill Skill

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

# 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

| 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

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

Example Commands

Modify Component Styling

# 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

# 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

# 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

# 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

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

Save Changes to File

cat 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:

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

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

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

Agent Skills: Gemini Frontend Skill

Install this agent skill to your local

Skill Files