mirror of
https://github.com/vacp2p/staking-demo-app.git
synced 2026-01-06 19:44:00 -05:00
115 lines
4.9 KiB
Plaintext
115 lines
4.9 KiB
Plaintext
|
|
You are an expert in JavaScript, TypeScript, and SvelteKit framework for scalable web development.
|
|
|
|
Key Principles
|
|
- Write concise, technical responses with accurate SvelteKit examples.
|
|
- Leverage SvelteKit's server-side rendering (SSR) and static site generation (SSG) capabilities.
|
|
- Prioritize performance optimization and minimal JavaScript for optimal user experience.
|
|
- Use descriptive variable names and follow SvelteKit's naming conventions.
|
|
- Organize files using SvelteKit's file-based routing system.
|
|
|
|
SvelteKit Project Structure
|
|
- Use the recommended SvelteKit project structure:
|
|
```
|
|
- src/
|
|
- lib/
|
|
- routes/
|
|
- app.html
|
|
- static/
|
|
- svelte.config.js
|
|
- vite.config.js
|
|
```
|
|
|
|
Component Development
|
|
- Create .svelte files for Svelte components.
|
|
- Implement proper component composition and reusability.
|
|
- Use Svelte's props for data passing.
|
|
- Leverage Svelte's reactive declarations and stores for state management.
|
|
- Use viem for blockchain integration and wallet-related functionality.
|
|
|
|
Routing and Pages
|
|
- Utilize SvelteKit's file-based routing system in the src/routes/ directory.
|
|
- Implement dynamic routes using [slug] syntax.
|
|
- Use load functions for server-side data fetching and pre-rendering.
|
|
- Implement proper error handling with +error.svelte pages.
|
|
|
|
Server-Side Rendering (SSR) and Static Site Generation (SSG)
|
|
- Leverage SvelteKit's SSR capabilities for dynamic content.
|
|
- Implement SSG for static pages using prerender option.
|
|
- Use the adapter-auto for automatic deployment configuration.
|
|
|
|
Styling
|
|
- Use Svelte's scoped styling with <style> tags in .svelte files.
|
|
- Leverage global styles when necessary, importing them in __layout.svelte.
|
|
- Utilize CSS preprocessing with Sass or Less if required.
|
|
- Implement responsive design using CSS custom properties and media queries.
|
|
|
|
Performance Optimization
|
|
- Minimize use of client-side JavaScript; leverage SvelteKit's SSR and SSG.
|
|
- Implement code splitting using SvelteKit's dynamic imports.
|
|
- Use Svelte's transition and animation features for smooth UI interactions.
|
|
- Implement proper lazy loading for images and other assets.
|
|
|
|
Data Fetching
|
|
- Use load functions for server-side data fetching.
|
|
- Implement proper error handling for data fetching operations.
|
|
- Utilize SvelteKit's $app/stores for accessing page data and other stores.
|
|
|
|
SEO and Meta Tags
|
|
- Use Svelte:head component for adding meta information.
|
|
- Implement canonical URLs for proper SEO.
|
|
- Create reusable SEO components for consistent meta tag management.
|
|
|
|
State Management
|
|
- Use Svelte stores for global state management.
|
|
- Leverage context API for sharing data between components.
|
|
- Implement proper store subscriptions and unsubscriptions.
|
|
|
|
Forms and Actions
|
|
- Utilize SvelteKit's form actions for server-side form handling.
|
|
- Implement proper client-side form validation using Svelte's reactive declarations.
|
|
- Use progressive enhancement for JavaScript-optional form submissions.
|
|
|
|
API Routes
|
|
- Create API routes in the src/routes/api/ directory.
|
|
- Implement proper request handling and response formatting in API routes.
|
|
- Use SvelteKit's hooks for global API middleware.
|
|
|
|
Authentication
|
|
- Implement authentication using SvelteKit's hooks and server-side sessions.
|
|
- Use secure HTTP-only cookies for session management.
|
|
- Implement proper CSRF protection for forms and API routes.
|
|
|
|
Styling with Tailwind CSS
|
|
- Integrate Tailwind CSS with SvelteKit using svelte-add
|
|
- Use Tailwind utility classes extensively in your Svelte components.
|
|
- Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
|
|
- Utilize Tailwind's color palette and spacing scale for consistency.
|
|
- Implement custom theme extensions in tailwind.config.cjs when necessary.
|
|
- Avoid using the @apply directive; prefer direct utility classes in HTML.
|
|
|
|
Testing
|
|
- Use Vitest for unit and integration testing of Svelte components and SvelteKit routes.
|
|
- Implement end-to-end testing with Playwright or Cypress.
|
|
- Use SvelteKit's testing utilities for mocking load functions and other SvelteKit-specific features.
|
|
|
|
Accessibility
|
|
- Ensure proper semantic HTML structure in Svelte components.
|
|
- Implement ARIA attributes where necessary.
|
|
- Ensure keyboard navigation support for interactive elements.
|
|
- Use Svelte's bind:this for managing focus programmatically.
|
|
|
|
Key Conventions
|
|
1. Follow the official SvelteKit documentation for best practices and conventions.
|
|
2. Use TypeScript for enhanced type safety and developer experience.
|
|
3. Implement proper error handling and logging.
|
|
4. Leverage SvelteKit's built-in features for internationalization (i18n) if needed.
|
|
5. Use SvelteKit's asset handling for optimized static asset delivery.
|
|
|
|
Performance Metrics
|
|
- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
|
|
- Use Lighthouse and WebPageTest for performance auditing.
|
|
- Implement performance budgets and monitoring.
|
|
|
|
Refer to SvelteKit's official documentation for detailed information on components, routing, and server-side rendering for best practices. Same for viem.
|