Svelte+skeletonUI :: create new module under a monorepo

I built my monorepo based on the link you suggested: https://vercel.com/templates/svelte/turborepo-sveltekit-starter

There's a folder apps/web, which we are NOT going to change.

Suggest a monorepo organization, containing another project called chatbot, which follows the architecture: Svelte + Sveltekit + Typescript + SkeletonUI.

Show which files need to be changed in order to make sure the new project chatbot is included properly into the Vite build.

In addition, provide a "Hello World" for a typical SkeletonUI app, so that I can test the build in the browser.

Of course. Here is a complete guide to organizing your monorepo to include a new chatbot application, configuring the necessary build files, and providing a testable "Hello World" example using Skeleton UI.

Monorepo Organization

Your new monorepo structure will look like this. The chatbot app will live alongside the existing web and docs applications, maintaining a clean and parallel architecture.

/
├── apps/
│   ├── docs/             # The existing docs site
│   ├── web/              # The existing institutional site (untouched)
│   └── chatbot/          # Your NEW SvelteKit + Skeleton UI app
├── packages/
│   ├── ui/               # Shared component library
│   └── ...               # Other shared configs
└── ...                   # Root config files

Step 1: Create the `chatbot` App 🤖

First, use the official SvelteKit scaffolder to create the new chatbot application from the root of your monorepo.

# This command will create a new SvelteKit app in the apps/chatbot folder
npx sv create apps/chatbot

When prompted, make sure to select the following options to match your required stack:

Which Svelte app template? > SvelteKit minimal
Add type checking with TypeScript? > Yes, using TypeScript syntax
Select additional options > Add prettier, eslint, vitest, playwirht, tailwindcss (This is crucial for Skeleton UI)
vitest: What do you want to use vitest for? > unit testing, component testing
tailwindcss: Which plugins would you like to add? > typography, forms
Which package manager do you want to install dependencies with? > pnpm

Step 2: Add and Configure Skeleton UI 🏗️

Now, install and set up Skeleton UI specifically for the chatbot app.

Install Skeleton Packages: Run this command from the monorepo root to add the necessary dependencies only to the chatbot workspace.
```
pnpm --filter chatbot add -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin postcss autoprefixer
```

Configure Tailwind: Replace the contents of apps/chatbot/tailwind.config.js with the following to include the Skeleton UI plugin.

// apps/chatbot/tailwind.config.js
import { join } from 'path';
import skeleton from '@skeletonlabs/tw-plugin';

export default {
  darkMode: 'class',
  content: [
    './src/**/*.{html,js,svelte,ts}',
    join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
  ],
  theme: {
    extend: {},
  },
  plugins: [
    skeleton({
      themes: { preset: [ "skeleton" ] }
    })
  ]
};

Configure your Root Layout: Create a new root layout file at apps/chatbot/src/routes/+layout.svelte to import the core Skeleton CSS.
```
<script lang="ts">
  import '../app.postcss';
</script>

<slot />
```
Then create apps/chatbot/src/app.postcss as per below:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Configure your App Shell: Modify apps/chatbot/src/app.html to include the data-theme attribute, which enables Skeleton's theming.

<!doctype html>
<html lang="en" data-theme="skeleton">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Step 3: Configure the Vite Build for Monorepo Integration

This is the key step to ensure the chatbot app can correctly use shared packages from your monorepo.

Replace the contents of apps/chatbot/vite.config.ts with the following. This configuration tells Vite's development server how to handle files from outside the apps/chatbot directory.

// apps/chatbot/vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  // This is the important part for monorepo support
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['../../'],
    },
  },
});

Step 4: Create the Skeleton UI "Hello World" Page 🎨

Now you can test your setup. Replace the content of apps/chatbot/src/routes/+page.svelte with this sample Skeleton UI page.

<script lang="ts">
  import { AppBar, AppShell, LightSwitch } from '@skeletonlabs/skeleton';
  import { Card, Button } from '@skeletonlabs/skeleton';
</script>

<AppShell>
  <svelte:fragment slot="header">
    <AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-self-end">
      <svelte:fragment slot="lead">
        <strong>Chatbot Interface</strong>
      </svelte:fragment>
      <svelte:fragment slot="trail">
        <LightSwitch />
      </svelte:fragment>
    </AppBar>
  </svelte:fragment>

  <div class="container p-10 mx-auto">
    <Card>
      <header class="card-header">
        <h2 class="h2">Hello World!</h2>
      </header>
      <section class="p-4">
        <p>If you can see this styled card and button, your Skeleton UI setup is working correctly in the monorepo.</p>
      </section>
      <footer class="card-footer">
        <Button type="button" class="variant-filled">Get Started</Button>
      </footer>
    </Card>
  </div>
</AppShell>

Step 5: Run the Chatbot App 🚀

Finally, run the development server from the root of your monorepo, targeting only the new chatbot app.

pnpm turbo run dev --filter=chatbot

Navigate to the local URL provided in your terminal (usually http://localhost:5173). You should now see your "Hello World" page, fully styled with Skeleton UI and properly integrated into your monorepo build.

frgomes/svelte_create_monorepo_module.md