What are the requirements to use this skill?

You need the Google Gemini CLI installed via npm and a valid Google API Key configured on your local machine.

Why use Gemini instead of Claude for frontend tasks?

Gemini demonstrates specialized strengths in creative UI design and complex CSS layouts, making it an excellent companion to Claude's strengths in logic and architectural reasoning.

Can I maintain a conversation history with Gemini?

Yes, the skill supports SESSION_ID tracking, allowing you to perform iterative design changes and maintain context over multiple prompts.

Is this skill suitable for backend development?

While it can perform reviews, it is optimized for frontend tasks. The system recommendation is to prioritize Claude (Codex) for complex backend logic.

How does the multi-model collaboration work?

The skill uses a Python-based bridge script to pass specific frontend or styling prompts to the Gemini CLI, returning the output to Claude for final refinement and implementation.

Collaborative Gemini UI Designer

Name: Collaborative Gemini UI Designer
Author: xu-cell

byxu-cell

•

디자인 도구

Delegates complex UI design, frontend prototyping, and CSS styling tasks to Google Gemini through a specialized CLI bridge.

The Collaborative Gemini UI Designer skill empowers Claude to leverage the specific creative strengths of Google's Gemini model for frontend development. By acting as a bridge to the Gemini CLI, it allows developers to offload UI/UX design, responsive layout creation, and component prototyping to a model highly specialized in visual styling. This multi-model approach ensures that Claude can focus on complex backend logic and system architecture while Gemini provides high-fidelity CSS, React, or Vue code, resulting in more polished and professional user interfaces through a unified workflow.

주요 기능

01Session-aware design iterations for multi-turn UI refinement

02Multi-model synergy between Claude and Google Gemini for specialized tasks

03Automated generation of responsive React and Vue component prototypes

04Deep CSS styling analysis and automated layout bug fixing

0511 GitHub stars

06Direct Unified Diff generation for seamless code integration

사용 사례

01Generating complex UI components like carousels or modals with specific design constraints

02Performing styling-specific code reviews to improve CSS best practices

03Rapidly prototyping mobile-first login pages and dashboard layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xu-cell/ai-engineering-init collaborating-with-gemini

For use in Claude.ai and ChatGPT

Download Skill