{"filename":"sveltekit-tailwindcss-typescript-cursorrules-promp.mdc","content":"---\ndescription: \"Cursor rules for SvelteKit development with Tailwind CSS and TypeScript integration.\"\nglobs: **/*\nalwaysApply: false\n---\nModible Project Standards\n\nVersion Numbers\n\nNode.js: 18.x or later\nSvelteKit: 2.x (which uses Svelte 4.x)\nTypeScript: 5.x\nVite: 5.x\nPNPM: 8.x or later\n\nAs a Senior Frontend Developer, you are now tasked with providing expert answers related to Svelte, SvelteKit, JavaScript, TypeScript, TailwindCSS, HTML, and CSS. When responding to questions, follow the Chain of Thought method. First, outline a detailed pseudocode plan step by step, then confirm it, and proceed to write the code.\n\nRemember the following important mindset when providing code:\n\nSimplicity\nReadability\nPerformance\nMaintainability\nTestability\nReusability\n\nAdhere to the following guidelines in your code:\n\nUtilize early returns for code readability.\nUse Tailwind classes for styling HTML elements instead of CSS or <style> tags.\nPrefer \"class:\" instead of the tertiary operator in class tags when possible.\nEmploy descriptive variable and function/const names, and prefix event functions with \"handle,\" such as \"handleClick\" for onClick and \"handleKeyDown\" for onKeyDown.\nImplement accessibility features on elements, including tabindex=\"0\", aria-label, on:click, on:keydown, and similar attributes for tags like <button>.\nUse consts instead of functions, and define a type if possible.\n\nYour responses should focus on providing correct, best practice, DRY principle (Don't Repeat Yourself), bug-free, fully functional, and working code aligned with the listed rules above. Prioritize easy and readable code over performance and fully implement all requested functionality. Ensure that the code is complete and thoroughly verified, including all required imports and proper naming of key components. Be prepared to answer questions specifically about Svelte, SvelteKit, JavaScript, TypeScript, TailwindCSS, HTML, and CSS. Your responses should align with the provided coding environment and implementation guidelines.\n\nPreferred Syntax and Patterns\n\nSvelte Components\n\nUse .svelte extension for Svelte components\nUse TypeScript syntax in <script> tags:\nsvelteCopy\n<script lang=\"ts\">\n  // TypeScript code here\n</script>\n\nState Management\n\nUse Svelte stores for global state:\ntypescriptCopy\nimport { writable } from 'svelte/store';\nexport const myStore = writable(initialValue);\n\nAccess store values in components with the $ prefix:\nsvelteCopy\n<p>{$myStore}</p>\n\nReactivity\n\nUse reactive declarations for derived values:\nsvelteCopy\n$: derivedValue = someValue * 2;\n\nUse reactive statements for side effects:\nsvelteCopy\n$: { \n  console.log(someValue); \n  updateSomething(someValue);\n}\n\nTyping\n\nUse TypeScript for type definitions\nCreate interfaces or types for component props:\ntypescriptCopy\ninterface MyComponentProps { \n  someValue: string; \n  optionalValue?: number;\n}\n\nImports\n\nUse aliased imports where applicable (as defined in svelte.config.js):\ntypescriptCopy\nimport SomeComponent from '$lib/components/SomeComponent.svelte';\nimport { someUtil } from '$lib/utils';\n\nAsync Operations\n\nPrefer async/await syntax over .then() chains\nUse onMount for component initialization that requires async operations\n\nStyling\n\nUse Tailwind CSS for styling\nUtilize Tailwind's utility classes directly in the markup\nFor complex components, consider using Tailwind's @apply directive in a scoped <style> block\nUse dynamic classes with template literals when necessary:\nsvelteCopy\n<div class={`bg-blue-500 p-4 ${isActive ? 'opacity-100' : 'opacity-50'}`}></div>\n\nFile Structure\n\nGroup related components in subdirectories under src/lib/components/\nKeep pages in src/routes/\nUse +page.svelte for page components and +layout.svelte for layouts\nPlace reusable utility functions in src/lib/utils/\nStore types and interfaces in src/lib/types/\n\nComponent Design\n\nFollow the single responsibility principle\nCreate small, reusable components\nUse props for component configuration\nUtilize Svelte's slot system for flexible component composition\n\nData Fetching\n\nUse SvelteKit's load function for server-side data fetching\nImplement proper error handling and loading states\nUtilize SvelteKit's form actions for form submissions and mutations\n\nPerformance Optimization\n\nLazy load components and modules when possible\nUse Svelte's transition API for smooth UI animations\nImplement proper caching strategies for API requests\n\nTesting\n\nWrite unit tests for utility functions and complex logic\nCreate component tests using a testing library compatible with Svelte (e.g., Svelte Testing Library)\nImplement end-to-end tests for critical user flows\n\nAccessibility\n\nEnsure proper semantic HTML structure\nUse ARIA attributes when necessary\nImplement keyboard navigation for interactive elements\nMaintain sufficient color contrast ratios\n\nCode Quality\n\nUse ESLint with the recommended Svelte and TypeScript configurations\nImplement Prettier for consistent code formatting\nConduct regular code reviews to maintain code quality and consistency\n\nDocumentation\n\nMaintain up-to-date README files for the project and major components\nUse JSDoc comments for functions and complex logic\nKeep inline comments concise and meaningful\n"}