frontend-mix

Q: How to install frontend-mix?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/frontend-mix.md https://raw.githubusercontent.com/coleam00/frontend-mix/main/SKILL.md. Finally, /frontend-mix in Claude Code.

Q: What is frontend-mix best for?

frontend-mix is categorized under General. It covers: frontend, design.

New

16GitHub TrendingGeneralby coleam00

Mixed-provider frontend workflow: Opus 4.8 plans, Gemini 3.5 Flash designs, Opus ships. Six skills + an Archon workflow.

First seen 6/4/2026

Summary

This skill orchestrates a multi-model frontend workflow: Claude Opus handles planning and shipping, while Gemini Flash generates designs.

It includes six sub-skills and an Archon workflow for seamless handoffs between AI providers, helping developers build polished UIs faster.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/frontend-mix.md https://raw.githubusercontent.com/coleam00/frontend-mix/main/SKILL.md

Invoke in Claude Code

/frontend-mix

Use Cases

Plan a complex React component architecture using Opus, then generate pixel-perfect CSS with Gemini Flash.

Design a responsive landing page layout with Gemini Flash, then have Opus implement the logic and state management.

Rapidly prototype a UI mockup in Gemini Flash, then refine and ship production-ready code with Opus.

Debug a frontend styling issue by having Gemini Flash suggest visual fixes and Opus integrate them into the codebase.

Create a design system token set with Gemini Flash, then use Opus to apply it consistently across components.

Generate multiple design variants with Gemini Flash, then have Opus evaluate and merge the best one.

Usage Examples

/frontend-mix plan a dashboard layout with charts and a sidebar, then design it with Gemini Flash and ship with Opus

Use the Archon workflow to design a login form in Gemini Flash and implement validation in Opus

/frontend-mix prototype a card component, then refine and export as a React component

View source on GitHub

frontenddesign

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is frontend-mix?

This skill orchestrates a multi-model frontend workflow: Claude Opus handles planning and shipping, while Gemini Flash generates designs. It includes six sub-skills and an Archon workflow for seamless handoffs between AI providers, helping developers build polished UIs faster.

How to install frontend-mix?

To install frontend-mix: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/frontend-mix.md https://raw.githubusercontent.com/coleam00/frontend-mix/main/SKILL.md. Finally, /frontend-mix in Claude Code.

What is frontend-mix best for?

frontend-mix is a skill categorized under General. It is designed for: frontend, design. Created by coleam00.

What can I use frontend-mix for?

frontend-mix is useful for: Plan a complex React component architecture using Opus, then generate pixel-perfect CSS with Gemini Flash.; Design a responsive landing page layout with Gemini Flash, then have Opus implement the logic and state management.; Rapidly prototype a UI mockup in Gemini Flash, then refine and ship production-ready code with Opus.; Debug a frontend styling issue by having Gemini Flash suggest visual fixes and Opus integrate them into the codebase.; Create a design system token set with Gemini Flash, then use Opus to apply it consistently across components.; Generate multiple design variants with Gemini Flash, then have Opus evaluate and merge the best one..