diff --git a/skills/create-sveltekit/SKILL.md b/skills/create-sveltekit/SKILL.md new file mode 100644 index 00000000..2212d0c7 --- /dev/null +++ b/skills/create-sveltekit/SKILL.md @@ -0,0 +1,103 @@ +--- +name: create-sveltekit +description: Creates a new SvelteKit project with a wide range of selectable integrations. +inputs: + - id: workspace_name + name: Workspace Name + type: string + description: The name of the folder for the new project. + default: my-sveltekit-app + - id: template + name: Template + type: enum + description: The SvelteKit template to start with. + default: minimal + options: + demo: Demo app + minimal: Minimal app + library: Library project + - id: types + name: Type Checking + type: enum + description: How to handle type checking. + default: ts + options: + ts: TypeScript syntax + jsdoc: JSDoc comments + null: None + - id: prettier + name: Add Prettier + type: boolean + description: Add Prettier for code formatting. + default: true + - id: eslint + name: Add ESLint + type: boolean + description: Add ESLint for code linting. + default: true + - id: vitest + name: Add Vitest + type: boolean + description: Add Vitest for unit testing. + default: false + - id: playwright + name: Add Playwright + type: boolean + description: Add Playwright for browser testing. + default: false + - id: tailwindcss + name: Add Tailwind CSS + type: boolean + description: Add Tailwind CSS for styling. + default: false + - id: drizzle + name: Add Drizzle + type: boolean + description: Add Drizzle ORM for database access. + default: false + - id: lucia + name: Add Lucia + type: boolean + description: Add Lucia for authentication. + default: false + - id: mdsvex + name: Add MDsveX + type: boolean + description: Add MDsveX for using Markdown in Svelte. + default: false + - id: paraglide + name: Add Paraglide + type: boolean + description: Add Paraglide for i18n. + default: false + - id: storybook + name: Add Storybook + type: boolean + description: Add Storybook for component development. + default: false +--- + +## When to Use This Skill + +Use this skill to create a new, customized SvelteKit project. It allows for the selection of common tools and integrations from the start. + +## Instructions + +1. **Read Setup Instructions** + Review the [setup instructions](resources/setup_instructions.md) to understand how to initialize the project, run installer scripts from the `scripts` folder, and install dependencies. + + *Action:* Read `resources/setup_instructions.md`. + +2. **Execute Setup** + Follow the steps outlined in `resources/setup_instructions.md` to: + - Build and execute the `npm create svelte` command with the correct flags based on user inputs. + - Copy `init.js` and `package.json` from the `templates/sveltekit` directory into the new project. + - Execute the `init.js` script, passing the selected integrations as arguments. This script will run `npx svelte-add` for each tool and install all dependencies. + - Create the `.agents/rules/sveltekit.md` file. + +3. **Final Verification** + Check that the following files exist in the new project directory: + - `package.json` + - `init.js` + - `svelte.config.js` + - `.agents/rules/sveltekit.md` diff --git a/skills/create-sveltekit/resources/ai_rules.md b/skills/create-sveltekit/resources/ai_rules.md new file mode 100644 index 00000000..4a067151 --- /dev/null +++ b/skills/create-sveltekit/resources/ai_rules.md @@ -0,0 +1,33 @@ +# Gemini AI Rules for SvelteKit Projects + +## 1. Persona & Expertise + +You are an expert full-stack developer specializing in Svelte and SvelteKit. You are highly proficient in TypeScript, Vite, and the entire Svelte ecosystem. Your expertise includes building performant applications using SvelteKit's file-based routing, load functions, and endpoints, as well as integrating various tools like Tailwind CSS, Drizzle, Lucia, and Vitest. + +## 2. Project Context + +This project is a SvelteKit application built with Vite. The focus is on leveraging SvelteKit's features to build fast, modern web applications. The project may be configured with a variety of integrations. You should check `package.json` and `svelte.config.js` to understand which tools are currently installed. + +## 3. Coding Standards & Best Practices + +### SvelteKit Core Concepts + +- **File-Based Routing:** All routes are defined by the structure of the `src/routes` directory. Acknowledge this as the primary routing mechanism. + - `src/routes/about/+page.svelte` creates an `/about` route. + - `src/routes/blog/[slug]/+page.svelte` creates a dynamic route. +- **Load Functions:** For loading data into a page, use `load` functions in `+page.ts` or `+page.server.ts`. Explain the difference (universal vs. server-only execution). +- **Form Actions:** For handling form submissions, use SvelteKit's built-in form actions in `+page.server.js` or `+page.server.ts`. +- **API Routes:** Create API endpoints by creating `+server.ts` files within the `src/routes` directory. +- **Layouts:** Use `+layout.svelte` files to create shared layouts for different sections of the application. + +### Component Structure (`.svelte` files) + +- A component consists of three optional parts in this order: + 1. A `