name: kombai-workflow
description: Figma to code workflow using Kombai AI. Includes cleanup patterns, integration steps, and best practices for React/Vue/Tailwind output. Use when converting designs to production code.
license: MIT
metadata:
author: thesimpleapp
version: "1.0"

Kombai Workflow

Figma → Production Code with Kombai AI.

When to Use

• Converting Figma designs to code
• Building new UI components rapidly
• Prototyping features quickly
• Generating responsive layouts

Prerequisites

• Kombai extension installed in Cursor/VSCode
• Figma design ready (or image/screenshot)
• Target framework configured (React/Vue/Svelte)

Workflow

┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   FIGMA     │ →  │   KOMBAI    │ →  │   CLEANUP   │ →  │  INTEGRATE  │
│   Design    │    │   Generate  │    │   Patterns  │    │   + State   │
└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘

Step 1: Generate with Kombai

1. Open Figma design or paste screenshot
2. Select target framework (React recommended)
3. Configure:
   - Tailwind CSS (preferred)
   - TypeScript (always)
   - Component-based output
4. Generate code
5. Review in Kombai preview
6. Accept into codebase

Step 2: Apply Cleanup Patterns

Remove Redundant Wrappers

// ❌ Kombai output (often nested)
<div className="flex">
  <div className="flex flex-col">
    <div className="flex items-center">
      <span>Text</span>
    </div>
  </div>
</div>

// ✅ Cleaned up
<div className="flex flex-col items-center">
  <span>Text</span>
</div>

Fix Naming Conventions

// ❌ Kombai output
const Frame1234 = () => { ... }
const Group5678 = () => { ... }

// ✅ Semantic names
const UserProfileCard = () => { ... }
const NavigationHeader = () => { ... }

Add Proper TypeScript Types

// ❌ Kombai output (often untyped)
const Card = ({ title, description, image }) => { ... }

// ✅ With types
interface CardProps {
  title: string;
  description: string;
  image: string;
  onClick?: () => void;
}

const Card = ({ title, description, image, onClick }: CardProps) => { ... }

Extract Magic Numbers

// ❌ Kombai output
<div className="w-[347px] h-[89px] mt-[23px]">

// ✅ Use design tokens or standard values
<div className="w-full max-w-sm h-24 mt-6">

Connect to State Management

// ❌ Kombai output (static)
<button>Add to Cart</button>

// ✅ Connected
<button onClick={() => addToCart(product.id)}>
  {isLoading ? <Spinner /> : 'Add to Cart'}
</button>

Step 3: Integrate with Codebase

1. Move to proper feature folder
   components/features/[feature]/ComponentName.tsx

2. Update imports to use project aliases
   import { Button } from '@/components/ui/button'

3. Connect to existing state/hooks
   const { data, isLoading } = useProduct(productId)

4. Add to barrel exports
   export { ProductCard } from './ProductCard'

5. Write basic tests
   it('renders product name', () => { ... })

Framework-Specific Patterns

React + Tailwind

// Standard component structure
import { cn } from '@/lib/utils';

interface ComponentProps {
  className?: string;
  children: React.ReactNode;
}

export function Component({ className, children }: ComponentProps) {
  return (
    <div className={cn('base-styles', className)}>
      {children}
    </div>
  );
}

Vue + Tailwind

<script setup lang="ts">
interface Props {
  title: string;
  description?: string;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="component-styles">
    <h2>{{ props.title }}</h2>
    <p v-if="props.description">{{ props.description }}</p>
  </div>
</template>

Flutter (from Kombai web output)

// Convert Tailwind concepts to Flutter
// flex → Row/Column
// rounded-lg → BorderRadius.circular(8)
// shadow-md → BoxShadow
// p-4 → EdgeInsets.all(16)

class ProductCard extends StatelessWidget {
  final String title;
  final String imageUrl;

  const ProductCard({
    required this.title,
    required this.imageUrl,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: [/* shadow */],
      ),
      child: Column(
        children: [
          Image.network(imageUrl),
          Text(title),
        ],
      ),
    );
  }
}

Cleanup Checklist

After Kombai generation:

□ Remove unnecessary wrapper divs
□ Rename components from Frame/Group to semantic names
□ Add TypeScript interfaces for all props
□ Replace magic pixel values with design tokens
□ Add responsive breakpoints where needed
□ Connect interactive elements to state/handlers
□ Add accessibility attributes (aria-*, role)
□ Extract repeated styles to shared classes
□ Add loading/error states
□ Write basic component test

Integration with Other Skills

/kombai-workflow     → Generate and clean up component
       ↓
/frontend-design     → Polish interactions and animations
       ↓
/react-excellence    → Ensure follows project patterns
       ↓
/code-review         → Final quality check

Common Issues

Issue: Hardcoded text

// ❌ From Kombai
<h1>Welcome to Dashboard</h1>

// ✅ Prop or i18n
<h1>{title}</h1>
// or
<h1>{t('dashboard.welcome')}</h1>

Issue: Missing responsive design

// ❌ Fixed width from Figma
className="w-[1440px]"

// ✅ Responsive
className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"

Issue: Inline styles

// ❌ Sometimes Kombai uses inline
style={{ color: '#FF5733', fontSize: '14px' }}

// ✅ Tailwind classes
className="text-orange-500 text-sm"

Tips

1. Start with mobile frame - Kombai handles mobile → desktop better than reverse
2. Use auto-layout in Figma - Produces cleaner flexbox output
3. Name layers in Figma - Kombai uses layer names for component names
4. Group logically - Related elements = single component
5. Export assets separately - Icons/images as separate files