# How to Integrate Custom CSS with the Clone-Website Skill
> Learn to integrate custom CSS with the clone-website skill. Extend your project's styling by modifying globals.css or adding new stylesheets within the Next.js 16 project.
- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-30
---
**You integrate custom CSS with the `clone-website` skill by extending [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) (see the *Colors* and *Global UI patterns* steps in [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)).
2. **Append custom rules** – Edit [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx)** – Loads [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) and configures the `` 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), then reference via `bg-[var(--brand-primary)]` or create a Tailwind token in [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css):
```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:
```tsx
// src/components/ui/button.tsx
import { cn } from '@/lib/utils';
export default function BrandButton({ children }: { children: React.ReactNode }) {
return (
);
}
```
The `cn()` function merges Tailwind classes and handles conditional logic while maintaining type safety (see [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)).
### Defining Custom Keyframe Animations
Add the animation definition to your global stylesheet:
```css
/* 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:
```tsx
// src/components/ui/hero.tsx
export function Hero() {
return (
Welcome
Your custom-styled hero.
);
}
```
### Extending Tailwind with Custom Utilities
For systematic design tokens, extend the Tailwind configuration:
```ts
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)** to add custom CSS variables, animations, or utility classes alongside the skill's generated design tokens.
- **Use [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts)** to extend the design system with new utilities when you need consistent, reusable tokens.
- **Leverage `cn()` from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) for site-wide tokens, you can create component-scoped CSS modules (e.g., [`Component.module.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.