How to Integrate Custom CSS with the Clone-Website Skill

You integrate custom CSS with the clone-website skill by extending src/app/globals.css or creating sibling stylesheets, leveraging the Tailwind CSS v4 and shadcn/ui pipeline already configured in the generated Next.js 16 project.

The clone-website skill in the JCodesMore/ai-website-cloner-template repository automates the creation of production-ready Next.js applications. When you integrate custom CSS with the clone-website skill, you work within a Tailwind CSS v4 environment where src/app/globals.css serves as the central stylesheet for both extracted design tokens and your custom extensions.

Architectural Flow for Custom CSS Integration

Following this five-step workflow ensures your styles compile correctly alongside the skill's generated code:

1. Run the skill – Execute the clone operation to extract the target site's design tokens (colors, fonts, spacing) into src/app/globals.css (see the Colors and Global UI patterns steps in .github/skills/clone-website/SKILL.md).

2. Append custom rules – Edit src/app/globals.css or create a sibling CSS file, adding your selectors. Because Tailwind processes this file, any utility classes you reference will be available throughout the application.

3. Extend Tailwind configuration – If you need new utility classes (bespoke animations or design-system tokens), add them to tailwind.config.ts in the repository root.

4. Rebuild the application – Run npm run build or npm run dev to recompile the CSS, integrating your custom rules into the final stylesheet.

5. Reference in components – Import your new classes using className="my-custom-class" or the cn() helper from src/lib/utils.ts to merge Tailwind classes safely.

Critical File Locations for Styling

The skill expects style modifications in specific locations to maintain compatibility with the Next.js 16 and shadcn/ui architecture:

• src/app/globals.css – The central stylesheet where the skill inserts extracted :root and .dark variable blocks (lines 51-88 in the source). This is your primary entry point for site-wide custom CSS.

• src/app/layout.tsx – Loads globals.css and configures the <html> element, ensuring any CSS changes apply globally across the application.

• postcss.config.mjs – Configures Tailwind's processor; you can safely add custom PostCSS plugins here without breaking the skill's pipeline.

• tailwind.config.ts – Located at the repository root, this file allows you to extend Tailwind's design system with custom colors, spacing, or animations.

• src/lib/utils.ts – Provides the cn() helper function for composing class names in a type-safe manner.

Common Integration Patterns

Goal	Implementation	Why It Works
Add a brand-specific color	Append :root { --brand-primary: #0044ff; } to globals.css, then reference via bg-[var(--brand-primary)] or create a Tailwind token in tailwind.config.ts	Variables are defined before Tailwind processes the file, allowing utility generation.
Create a reusable animation	Define @keyframes spin-slow and .animate-spin-slow in globals.css	Tailwind's @layer base preserves the rule, making the class available anywhere via className="animate-spin-slow".
Override shadcn component styles	Append [data-theme='dark'] .btn-primary { background-color: var(--brand-primary); } to globals.css	The skill already scopes dark mode with @custom-variant dark; your selector respects this paradigm.

Code Examples

Adding a Brand Color and Using It in Components

First, define the CSS variable and utility class in src/app/globals.css:

/* src/app/globals.css - append at the bottom */
:root {
  --brand-primary: #0066ff;
}

/* Tailwind can now generate a utility */
.bg-brand-primary {
  background-color: var(--brand-primary);
}

Then reference it in a component using the cn() helper:

// src/components/ui/button.tsx
import { cn } from '@/lib/utils';

export default function BrandButton({ children }: { children: React.ReactNode }) {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded-md text-white',
        'bg-brand-primary hover:bg-brand-primary/90',
      )}
    >
      {children}
    </button>
  );
}

The cn() function merges Tailwind classes and handles conditional logic while maintaining type safety (see src/lib/utils.ts).

Defining Custom Keyframe Animations

Add the animation definition to your global stylesheet:

/* src/app/globals.css - after the :root block */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fade-in-up 0.4s ease-out forwards;
}

Apply it to any component:

// src/components/ui/hero.tsx
export function Hero() {
  return (
    <section className="animate-fade-in-up">
      <h1 className="text-4xl font-bold">Welcome</h1>
      <p className="mt-2 text-lg">Your custom-styled hero.</p>
    </section>
  );
}

Extending Tailwind with Custom Utilities

For systematic design tokens, extend the Tailwind configuration:

// tailwind.config.ts - add to the theme.extend section
module.exports = {
  theme: {
    extend: {
      spacing: {
        '9/16': '56.25%', // 16:9 aspect ratio
      },
      colors: {
        brand: 'var(--brand-primary)',
      },
    },
  },
};

This enables usage like className="bg-brand" or className="aspect-w-16 aspect-h-9" throughout the application.

Summary

• Edit src/app/globals.css to add custom CSS variables, animations, or utility classes alongside the skill's generated design tokens.
• Use tailwind.config.ts to extend the design system with new utilities when you need consistent, reusable tokens.
• Leverage cn() from src/lib/utils.ts to safely compose Tailwind classes in your components.
• Rebuild with npm run build to compile your custom styles into the production bundle.
• Maintain compatibility by respecting the existing @custom-variant dark rules and shadcn/ui variable structures.

Frequently Asked Questions

Where does the clone-website skill write extracted CSS variables?

The skill writes extracted color tokens and design variables to src/app/globals.css within the :root and .dark selector blocks, specifically following the Colors and Global UI patterns steps defined in .github/skills/clone-website/SKILL.md.

Can I use CSS modules instead of the global stylesheet?

Yes. While the skill populates src/app/globals.css for site-wide tokens, you can create component-scoped CSS modules (e.g., Component.module.css) in the Next.js 16 project. Tailwind CSS v4 processes these alongside the global styles without conflicts.

Do I need to install additional PostCSS plugins for custom CSS?

No. The postcss.config.mjs file already configures Tailwind CSS v4 processing. You can safely add custom PostCSS plugins to this configuration if your project requires specific transformations, but the default setup handles standard CSS imports and Tailwind utilities without modification.

How do I ensure my custom CSS overrides shadcn/ui component styles?

Append your override rules to src/app/globals.css using the [data-theme='dark'] selector or higher-specificity class names. The skill initializes dark mode via @custom-variant dark, so respecting this scoping ensures your overrides apply correctly in both light and dark themes.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}