Framework Adapter

Framework-Specific Configurations

Next.js (App Router)

Detection: next in dependencies + app/ directory exists

Component Structure:

// components/ui/button.tsx
'use client'; // Only if interactive

import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

export function Button({ variant = 'default', size = 'md', className, ...props }: ButtonProps) {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center rounded-md font-medium transition-colors',
        variants[variant],
        sizes[size],
        className
      )}
      {...props}
    />
  );
}

UI Library Priority: shadcn/ui > Radix UI > Headless UI > Custom

Styling: Tailwind CSS with CSS variables for design tokens

File Organization:

app/
├── (routes)/
├── components/
│   ├── ui/           # Base components (shadcn-style)
│   └── blocks/       # Composite components
├── lib/
│   └── utils.ts      # cn() helper
└── styles/
    └── globals.css   # CSS variables + Tailwind

React (Vite/CRA)

Detection: react in dependencies, no next

Component Structure:

// src/components/ui/Button.tsx
import { forwardRef } from 'react';
import { clsx } from 'clsx';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', className, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={clsx('btn', `btn-${variant}`, className)}
        {...props}
      />
    );
  }
);

UI Library Priority: Radix UI > Headless UI > Custom

Styling: Tailwind CSS or CSS Modules (detect from config)

Vue 3 / Nuxt 3

Detection: vue in dependencies

Component Structure:

<!-- components/ui/Button.vue -->
<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
});
</script>

<template>
  <button
    :class="[
      'btn',
      `btn-${variant}`,
      `btn-${size}`,
    ]"
  >
    <slot />
  </button>
</template>

<style scoped>
.btn {
  @apply inline-flex items-center justify-center rounded-md font-medium transition-colors;
}
</style>

UI Library Priority: Nuxt UI > Headless UI Vue > PrimeVue > Custom

Styling: Tailwind CSS with UnoCSS as alternative

SvelteKit / Svelte

Detection: svelte in dependencies

Component Structure:

<!-- src/lib/components/ui/Button.svelte -->
<script lang="ts">
  export let variant: 'primary' | 'secondary' | 'ghost' = 'primary';
  export let size: 'sm' | 'md' | 'lg' = 'md';
</script>

<button
  class="btn btn-{variant} btn-{size}"
  on:click
  {...$$restProps}
>
  <slot />
</button>

<style>
  .btn {
    @apply inline-flex items-center justify-center rounded-md font-medium transition-colors;
  }
</style>

UI Library Priority: Skeleton UI > Melt UI > Custom

Astro

Detection: astro in dependencies

Component Structure:

---
// src/components/ui/Button.astro
interface Props {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  href?: string;
}

const { variant = 'primary', size = 'md', href, ...attrs } = Astro.props;
const Element = href ? 'a' : 'button';
---

<Element
  href={href}
  class:list={['btn', `btn-${variant}`, `btn-${size}`]}
  {...attrs}
>
  <slot />
</Element>

<style>
  .btn {
    @apply inline-flex items-center justify-center rounded-md font-medium transition-colors;
  }
</style>

Note: Can integrate React/Vue/Svelte components via Astro islands

Vanilla HTML + CSS

Detection: No framework detected

Structure:

<!-- components/button.html -->
<button class="btn btn-primary" data-size="md">
  Click me
</button>

/* styles/components/button.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

Enhancement: Alpine.js for interactivity if detected

Styling System Detection

Tailwind CSS

Detect: tailwindcss in devDependencies.

• Version 4: Package version >= 4.0.0 OR presence of CSS with @import "tailwindcss"; or @theme block.
• Version 3: Package version < 4.0.0 AND presence of tailwind.config.js or tailwind.config.ts.

Token Integration (Version 3):

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          foreground: 'var(--color-primary-foreground)',
        },
      },
      spacing: {
        // Map Figma spacing tokens
      },
      borderRadius: {
        // Map Figma radius tokens
      },
    },
  },
};

Token Integration (Version 4):

/* app/globals.css or styles/main.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-primary-foreground: #ffffff;
  
  /* Extend spacing */
  --spacing-18: 4.5rem; /* 72px */
  
  /* Extend radius */
  --radius-sm: 4px;
}

CSS Modules

Detect: .module.css files exist or CSS modules config in build tool

CSS-in-JS

Detect: styled-components, @emotion/styled, or stitches in dependencies

Plain CSS

Detect: No styling library, use CSS custom properties

Component Library Detection

Check for existing UI libraries to reuse:

Adaptation Algorithm

1. DETECT framework from package.json
2. DETECT styling system (Tailwind, CSS Modules, etc.)
3. DETECT existing UI library
4. SCAN existing components for patterns:
   - Naming convention (PascalCase, kebab-case)
   - File structure (flat, nested)
   - Props pattern (destructured, interface)
   - Export style (named, default)
5. GENERATE code matching detected patterns
6. INTEGRATE with existing design tokens if present

Output Consistency Rules

1. Match existing naming: If project uses Button.tsx, don't create button.tsx
2. Match existing structure: If components are in src/components/, use same path
3. Match existing patterns: Copy prop typing style from existing components
4. Reuse utilities: If cn() or clsx() exists, use it
5. Respect config: Use existing Tailwind/PostCSS configuration