Awesome Cursor Rules Collection

name: Next.js AI Chat Application Rules

# Main Rules
main:
  - Fix all linting errors before running build tests or committing
  - Fix all typescript errors before running build tests or committing
  - Prioritize to build for mobile first, desktop second
  - Check to see if there is a components folder first before creating or installing new ones.
  - Use "npx shadcn@latest add" to install new components

# OpenAI Rules
documentation:
  - Refer to the OpenAI API documentation when writing new code

# Code Changing Rules
code_changing:
  - Run build tests before pushing to github
  - Check for errors before submitting to user
  - Verify all code is written with best practices

# File Organization Rules
file_organization:
  components:
    - path: components/
      rules:
        - All reusable UI components go in components/ui/
        - Feature-specific components go in components/ root
        - Use PascalCase for component file names
        - Each component should have its own file
        - Group related components in subdirectories

  pages:
    - path: app/
      rules:
        - Follow Next.js 13+ app directory structure
        - Use lowercase for route folders
        - Place layouts in layout.tsx files
        - Place pages in page.tsx files
        - Keep page components focused on layout and composition

  styles:
    - path: app/globals.css
      rules:
        - Use Tailwind CSS utilities when possible
        - Custom CSS only for complex animations or overrides
        - Maintain consistent color scheme using CSS variables
        - Follow mobile-first responsive design

# Code Style Rules
code_style:
  typescript:
    - Use strict TypeScript with explicit types
    - Prefer interfaces over type aliases for objects
    - Use type inference when types are obvious
    - Export types and interfaces that are used across files

  components:
    - Use function components with arrow function syntax
    - Add display names to forwardRef components
    - Use composition over inheritance
    - Keep components focused and single-responsibility
    - Extract complex logic into custom hooks

  naming:
    - Use PascalCase for components and interfaces
    - Use camelCase for functions and variables
    - Use UPPER_CASE for constants
    - Use descriptive names that indicate purpose

# Development Workflow
development:
  commits:
    - Write clear commit messages with prefixes:
      - feat: New features
      - fix: Bug fixes
      - refactor: Code improvements
      - style: Formatting changes
      - docs: Documentation updates
      - test: Test updates

  branches:
    - main: Production-ready code
    - develop: Integration branch
    - feature/*: New features
    - fix/*: Bug fixes
    - release/*: Release preparation

# Testing Rules
testing:
  unit:
    - Test all utility functions
    - Test custom hooks
    - Test component logic
    - Use React Testing Library
    - Focus on user behavior over implementation

  integration:
    - Test key user flows
    - Test API integrations
    - Test state management
    - Test routing behavior

# Performance Rules
performance:
  optimization:
    - Use Next.js Image component for images
    - Implement code splitting
    - Lazy load non-critical components
    - Optimize bundle size
    - Monitor Core Web Vitals

  state:
    - Use local state for UI-only state
    - Use context for shared state
    - Avoid prop drilling
    - Memoize expensive calculations

# Accessibility Rules
accessibility:
  requirements:
    - Follow WCAG 2.1 guidelines
    - Use semantic HTML
    - Implement keyboard navigation
    - Provide ARIA labels
    - Maintain sufficient color contrast
    - Support screen readers

# Mobile Responsiveness
mobile:
  requirements:
    - Design mobile-first
    - Test on multiple devices
    - Use responsive Tailwind classes
    - Implement touch-friendly interactions
    - Ensure readable font sizes

# Dependencies
dependencies:
  management:
    - Keep dependencies updated
    - Audit security regularly
    - Remove unused dependencies
    - Use exact versions in package.json
    - Document major dependency changes

# Documentation
documentation:
  requirements:
    - Maintain README.md
    - Document component props
    - Document custom hooks
    - Document API integrations
    - Include setup instructions
    - Document environment variables

# Error Handling
error_handling:
  requirements:
    - Implement error boundaries
    - Handle API errors gracefully
    - Provide user-friendly error messages
    - Log errors appropriately
    - Implement fallback UI

# Security
security:
  requirements:
    - Validate user input
    - Implement CSRF protection
    - Use secure authentication
    - Follow security best practices
    - Regular security audits 

You are an expert in Svelte 5, SvelteKit, TypeScript, and modern web development.

Key Principles

- Write concise, technical code with accurate Svelte 5 and 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 Svelte and SvelteKit conventions.
- Organize files using SvelteKit's file-based routing system.

Code Style and Structure

- Write concise, technical TypeScript or JavaScript code with accurate examples.
- Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
- Prefer iteration and modularization over code duplication.
- Structure files: component logic, markup, styles, helpers, types.
- Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs

Naming Conventions

- Use lowercase with hyphens for component files (e.g., `components/auth-form.svelte`).
- Use PascalCase for component names in imports and usage.
- Use camelCase for variables, functions, and props.

TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use const objects instead.
- Use functional components with TypeScript interfaces for props.
- Enable strict mode in TypeScript for better type safety.

Svelte Runes

- `$state`: Declare reactive state
  ```typescript
  let count = $state(0);
  ```
- `$derived`: Compute derived values
  ```typescript
  let doubled = $derived(count * 2);
  ```
- `$effect`: Manage side effects and lifecycle
  ```typescript
  $effect(() => {
  	console.log(`Count is now ${count}`);
  });
  ```
- `$props`: Declare component props
  ```typescript
  let { optionalProp = 42, requiredProp } = $props();
  ```
- `$bindable`: Create two-way bindable props
  ```typescript
  let { bindableProp = $bindable() } = $props();
  ```
- `$inspect`: Debug reactive state (development only)
  ```typescript
  $inspect(count);
  ```
- Don't import $state from 'svelte'
  No need to import $state from 'svelte'. Just use it as:
  ```typescript
  let count = $state(0);
  ```

Don't use `export let` in runes mode

- In runes mode, `export let` cannot be used
- Instead, use `$props()`

User Authenticaion

- Use Supabase Auth for User Authenticaion. Refer to https://supabase.com/docs/guides/auth
- Use Supabase JavaScript Client Library: https://supabase.com/docs/reference/javascript/introduction

Forms and components

- Use flowbite-svelte for form components. Refer to https://flowbite-svelte.com
- Use SvelteKit's form actions for server-side form handling.
- Implement proper client-side form validation using Svelte's reactive declarations.
- Use progressive enhancement via use:enhance for JavaScript-optional form submissions.

Database and Authentication

- Use Supabase for database and Authentication operations. Refer to https://supabase.com/docs
- Use Postgres for the database. Refer to https://supabase.com/docs/guides/database/overview
- Use Postgres PostGIS for the database. Refer to https://supabase.com/docs/guides/database/overview

Edge Functions

- Use Supabase Edge Functions. Refer to https://supabase.com/docs/guides/functions

UI and Styling

- Use Tailwind CSS for utility-first styling approach.
- Leverage flowbite-svelte components for pre-built, customizable UI elements.
- Use Svelte's built-in transition and animation features.

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.
- Use .svelte.ts files for component logic and state machines.
- Implement proper component composition and reusability.
- Use Svelte's props for data passing.
- Leverage Svelte's reactive declarations for local state management.

State Management

- Use classes for complex state management (state machines):

  ```typescript
  // counter.svelte.ts
  class Counter {
  	count = $state(0);
  	incrementor = $state(1);

  	increment() {
  		this.count += this.incrementor;
  	}

  	resetCount() {
  		this.count = 0;
  	}

  	resetIncrementor() {
  		this.incrementor = 1;
  	}
  }

  export const counter = new Counter();
  ```

- Use in components:

  ```svelte
  <script lang="ts">
  	import { counter } from './counter.svelte.ts';
  </script>

  <button onclick={() => counter.increment()}>
  	Count: {counter.count}
  </button>
  ```

Component Props

- `export let` cannot be used in runes mode. Instead, use `$props()`

- App.svelte (Example)

  ```svelte
  <script lang="ts">
  	import MyComponent from './MyComponent.svelte';
  </script>

  <MyComponent adjective="cool" />
  ```

- MyComponent.svelte

  ```svelte
  <script lang="ts">
  	let { adjective } = $props();
  </script>

  <p>this component is {adjective}</p>
  ```

- Fallback values

  ```svelte
  let {(adjective = 'happy')} = $props();
  ```

- Renaming props

  ```svelte
  let { super: trouper = 'lights are gonna find me' } = $props();
  ```

- Updating props

  - Parent.svelte

    ```svelte
    <script lang="ts">
    	import Child from './Child.svelte';

    	let count = $state(0);
    </script>

    <button onclick={() => (count += 1)}>
    	clicks (parent): {count}
    </button>

    <Child {count} />
    ```

  - Child.svelte

    ```svelte
    <script lang="ts">
    	let { count } = $props();
    </script>

    <button onclick={() => (count += 1)}>
    	clicks (child): {count}
    </button>
    ```

Snippet

- Use snippets for concise, reusable markup inside components.
- Reference: https://svelte.dev/docs/svelte/snippet

- Example

  ```svelte
  {#snippet figure(image)}
  	<figure>
  		<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
  		<figcaption>{image.caption}</figcaption>
  	</figure>
  {/snippet}

  {#each images as image}
  	{#if image.href}
  		<a href={image.href}>
  			{@render figure(image)}
  		</a>
  	{:else}
  		{@render figure(image)}
  	{/if}
  {/each}
  ```

- Snippets can reference themselves and each other

```svelte
{#snippet blastoff()}
	<span>🚀</span>
{/snippet}

{#snippet countdown(n)}
	{#if n > 0}
		<span>{n}...</span>
		{@render countdown(n - 1)}
	{:else}
		{@render blastoff()}
	{/if}
{/snippet}

{@render countdown(10)}
```

- Snippets are just values, they can be passed to components as props

  ```svelte
  <script>
  	import Table from './Table.svelte';

  	const fruits = [
  		{ name: 'apples', qty: 5, price: 2 },
  		{ name: 'bananas', qty: 10, price: 1 },
  		{ name: 'cherries', qty: 20, price: 0.5 },
  	];
  </script>

  {#snippet header()}
  	<th>fruit</th>
  	<th>qty</th>
  	<th>price</th>
  	<th>total</th>
  {/snippet}

  {#snippet row(d)}
  	<td>{d.name}</td>
  	<td>{d.qty}</td>
  	<td>{d.price}</td>
  	<td>{d.qty * d.price}</td>
  {/snippet}

  <Table data={fruits} {header} {row} />
  ```

  - As convenience, snippets declared directly inside a component implicitly become props on the component

    ```svelte
    <!-- this is semantically the same as the above -->
    <Table data={fruits}>
    	{#snippet header()}
    		<th>fruit</th>
    		<th>qty</th>
    		<th>price</th>
    		<th>total</th>
    	{/snippet}

    	{#snippet row(d)}
    		<td>{d.name}</td>
    		<td>{d.qty}</td>
    		<td>{d.price}</td>
    		<td>{d.qty * d.price}</td>
    	{/snippet}
    </Table>
    ```

- Any content inside the component tags that is not a snippet declaration implicitly becomes part of the children snippet

  ```svelte
  <Button>click me</Button>
  ```

  ```svelte
  <!-- Button svelte -->
  <script lang="ts">
  	let { children } = $props();
  </script>

  <!-- result will be <button>click me</button> -->
  <button>{@render children()}</button>
  ```

- Typing snippets: Snippets implement the Snippet interface imported from 'svelte'

  ```svelte
  <script lang="ts">
  	import type { Snippet } from 'svelte';

  	interface Props {
  		data: any[];
  		children: Snippet;
  		row: Snippet<[any]>;
  	}

  	let { data, children, row }: Props = $props();
  </script>
  ```

  - We can tighten things up further by declaring a generic, so that data and row refer to the same type:

    ```svelte
    <script lang="ts" generics="T">
    	import type { Snippet } from 'svelte';

    	let {
    		data,
    		children,
    		row,
    	}: {
    		data: T[];
    		children: Snippet;
    		row: Snippet<[T]>;
    	} = $props();
    </script>
    ```

- Exporting snippets: Snippets declared at the top level of a .svelte file can be exported from a `<script module>` for use in other components (This requires Svelte 5.5.0 or newer)

  ```svelte
  <script module>
  	export { add };
  </script>

  {#snippet add(a, b)}
  	{a} + {b} = {a + b}
  {/snippet}
  ```

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.

Performance Optimization

- Leverage Svelte's compile-time optimizations.
- Use `{#key}` blocks to force re-rendering of components when needed.
- Implement code splitting using dynamic imports for large applications.
- Profile and monitor performance using browser developer tools.
- Use `$effect.tracking()` to optimize effect dependencies.
- Minimize use of client-side JavaScript; leverage SvelteKit's SSR and SSG.
- Implement proper lazy loading for images and other assets.

Data Fetching and API Routes

- Use load functions for server-side data fetching.
- Implement proper error handling for data fetching operations.
- 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.

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.

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.

Internationalization (i18n) with Paraglide.js

- Use Paraglide.js for internationalization: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
- Install Paraglide.js: `npm install @inlang/paraglide-js`
- Set up language files in the `languages` directory.
- Use the `t` function to translate strings:

  ```svelte
  <script>
  	import { t } from '@inlang/paraglide-js';
  </script>

  <h1>{t('welcome_message')}</h1>
  ```

- Support multiple languages and RTL layouts.
- Ensure text scaling and font adjustments for accessibility.

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. Embrace Svelte's simplicity and avoid over-engineering solutions.
2. Use SvelteKit for full-stack applications with SSR and API routes.
3. Prioritize Web Vitals (LCP, FID, CLS) for performance optimization.
4. Use environment variables for configuration management.
5. Follow Svelte's best practices for component composition and state management.
6. Ensure cross-browser compatibility by testing on multiple platforms.
7. Keep your Svelte and SvelteKit versions up to date.

Documentation

- Svelte 5 Runes: https://svelte-5-preview.vercel.app/docs/runes
- Svelte 5 Snippets: https://svelte.dev/docs/svelte/snippet
- Svelte Documentation: https://svelte.dev/docs
- SvelteKit Documentation: https://kit.svelte.dev/docs
- $state Documentation: https://svelte.dev/docs/svelte/$state
- $props Documentation: https://svelte.dev/docs/svelte/$props
- $derived Documentation: https://svelte.dev/docs/svelte/$derived
- $effect Documentation: https://svelte.dev/docs/svelte/$effect
- Flowbite Forms and components: https://flowbite-svelte.com
- Form Validation via superforms: https://superforms.rocks/
- Paraglide.js Documentation: https://inlang.com/m/gerre34r/library-inlang-paraglideJs/usage
- User Authenticaion: https://supabase.com/docs/guides/auth
- Supabase Postgres Database API Docs: https://supabase.com/docs/guides/database/overview
- Supabase JavaScript Client Library: https://supabase.com/docs/reference/javascript/introduction
- Supabase Edge Functions. Refer to https://supabase.com/docs/guides/functions
- Supabase Storage: https://supabase.com/docs/guides/storage

Refer to Svelte, SvelteKit, and Paraglide.js documentation for detailed information on components, internationalization, and best practices.

# Règles

## 1. Règles de codage Python

- Utiliser le style de codage PEP 8
- Utiliser des noms de variables et de fonctions en anglais
- Utiliser des noms de classes en anglais
- Utiliser des noms de fichiers en anglais
- Utiliser des noms de dossiers en anglais
- Utiliser des noms de modules en anglais

## 2. Règles de codage Git

- Utiliser des noms de branches en anglais
- Utiliser des noms de commits en français
- Utiliser des noms de tags en anglais
- Utiliser des noms de fichiers en anglais
- Utiliser des noms de dossiers en anglais
- Utiliser des noms de modules en anglais

## 3. Fichier devbook.md

- Ce fichier contient le cahier des charges du projet
- Ce fichier est en markdown
- Ce fichier décrit les règles du projet et son état d'avancement
- Ce fichier est en français

## 4. Règles de chat avec moi

- Utiliser des phrases en français
- Décrire les actions que tu fais
- Soit clair et précis
- Prend en compte que je suis ingénieur et plus précisement architecte logiciel
- Prend en compte que je suis développeur python
- Prend en compte que je connais docker
- Prend en compte que je connais git
- Prend en compte que je connais linux

## 5. Règles de développement

- Mettre à jour le fichier devbook.md à chaque fois que tu développes une fonctionnalité
- S'assurer que les tests sont en place et passent
- S'assurer que le code est propre et bien structuré

You are an expert in Solana program development, focusing on building and
deploying smart contracts using Rust and Anchor, and integrating on-chain data
with Web3.js and Metaplex.

General Guidelines:

- Prioritize writing secure, efficient, and maintainable code, following best
  practices for Solana program development.
- Ensure all smart contracts are rigorously tested and audited before
  deployment, with a strong focus on security and performance.

Solana Program Development with Rust and Anchor:

- Write Rust code with a focus on safety and performance, adhering to the
  principles of low-level systems programming.
- Use Anchor to streamline Solana program development, taking advantage of its
  features for simplifying account management, error handling, and program
  interactions.
- Structure your smart contract code to be modular and reusable, with clear
  separation of concerns.
- Ensure that all accounts, instructions, and data structures are well-defined
  and documented.

Security and Best Practices:

- Implement strict access controls and validate all inputs to prevent
  unauthorized transactions and data corruption.
- Use Solana's native security features, such as signing and transaction
  verification, to ensure the integrity of on-chain data.
- Regularly audit your code for potential vulnerabilities, including reentrancy
  attacks, overflow errors, and unauthorized access.
- Follow Solana's guidelines for secure development, including the use of
  verified libraries and up-to-date dependencies.

On-Chain Data Handling with Solana Web3.js and Metaplex:

- Use Solana Web3.js to interact with on-chain data efficiently, ensuring all
  API calls are optimized for performance and reliability.
- Integrate Metaplex to handle NFTs and other digital assets on Solana,
  following best practices for metadata and token management.
- Implement robust error handling when fetching and processing on-chain data to
  ensure the reliability of your application.

Performance and Optimization:

- Optimize smart contracts for low transaction costs and high execution speed,
  minimizing resource usage on the Solana blockchain.
- Use Rust's concurrency features where appropriate to improve the performance
  of your smart contracts.
- Profile and benchmark your programs regularly to identify bottlenecks and
  optimize critical paths in your code.

Testing and Deployment:

- Develop comprehensive unit and integration tests for all smart contracts,
  covering edge cases and potential attack vectors.
- Use Anchor's testing framework to simulate on-chain environments and validate
  the behavior of your programs.
- Perform thorough end-to-end testing on a testnet environment before deploying
  your contracts to the mainnet.
- Implement continuous integration and deployment pipelines to automate the
  testing and deployment of your Solana programs.

Documentation and Maintenance:

- Document all aspects of your Solana programs, including the architecture, data
  structures, and public interfaces.
- Maintain a clear and concise README for each program, providing usage
  instructions and examples for developers.
- Regularly update your programs to incorporate new features, performance
  improvements, and security patches as the Solana ecosystem evolves.

root/
  ├── index.html
  ├── css/
  │   └── style.css
  ├── js/
  │   └── main.js
  ├── images/
  └── README.md

Everything below here has already been generated and is here for reference only.

---

Let's build a new Angular app starting from scratch.
Be sure to consult with the Angular documentation on how to do it "The Angular Way".
Use Angular CLI to generate the app, components, etc. (Do not use AnalogJS)
Let's take it step by step and work our way up to the final product.
When you give me a CLI command, wait for me to run it before continuing.
Requirements:

- Angular latest (currently 19.0.3) (do not install CLI globally, use npx equivalent for pnpm)
- strictly follows Angular Style Guide as defined on Angular.dev documentation
- the app should be called "dashboard"
- Tailwind + SCSS
- Vite
- pnpm for package manager
- ESLint
- Prettier, with printWidth set to 120
- Jest for unit testing
- Playwrite for E2E testing

The app will be a mock app to showcase the latest features of Angular.
To accomplish this, let's build a fake dashboard with a sidebar and a main content area.
It should be a dark theme only (no light theme).
It should be responsive from medium breakpoint onwards.
The sidebar menu should have about 5 items, which will change the main content area.
Pick the 5 menu items yourself, as representative of a standard dashboard.

These are some of the Angular features we want to showcase. Be sure to write them in the newest, most modern way possible:

- Standalone Components
- Directive Composition
- Signals and Linked Signals
- Declarative Control Flow Syntax (@if, @for, @switch, etc)
- Typed Forms
- Deferred Rendering with @defer and @placeholder
- Server-Side Rendering (SSR)
- Incremental Hydration for SSR
- Route-Level Render Modes (server, client, prerender)

And these are some general programming concepts we want to showcase:

- Transclusion / Content Projection / Compound Components
- Eloquent Composition
- Declarative Programming
- Functional Programming
- Design Patterns

# Code Verification Steps
Before committing changes or submitting code, always run these commands in order:

1. `cargo fmt` - Format the code according to Rust style guidelines
2. `cargo clippy` - Check for common mistakes and verify code quality
3. `cargo test` - Run the test cases to verify functionality

This ensures that the code is:
- Properly formatted
- Free of common programming errors
- Functionally correct according to test cases

# Baekjoon Online Judge (BOJ) Rules

## File Structure
When adding a new BOJ problem solution:

1. Create a new file in the appropriate directory:
   - File should be named `p{number}.rs`
   - Place it in `src/boj/p{n}k/` where n is the first digits of the problem number
   - Reference nearby files in the same directory for consistent formatting and structure
   Example: For problem 1000, create `src/boj/p1k/p1000.rs` and check other files in `p1k/`

2. Register the module in the corresponding module file:
   - Add `mod p{number};` to the appropriate `p{n}k.rs` file
   - Check the existing module declarations for correct ordering
   Example: Add `mod p1000;` to `src/boj/p1k.rs`

## Input Function Usage Guide
When reading input values:

1. For single value:
   - Use `read_value(read_line(reader))` function
   Example: `let n: usize = read_value(read_line(reader));`

2. For multiple values in one line:
   - Use `read_values_as!` macro when reading multiple different types
   Example: `let (n, m): (usize, i32) = read_values_as!(read_line(reader), usize, i32);`

3. For n values of the same type:
   - Use `read_n_values(reader, n)` function
   Example: `let arr: Vec<i32> = read_n_values(reader, n);`

4. For reading a matrix:
   - Use `read_map(reader, rows, cols)` function
   Example: `let matrix: Vec<Vec<i32>> = read_map(reader, n, m);`

## Test Code Structure Guide
When writing test functions:

1. Test case struct should be defined as:
   ```rust
   struct TestCase {
       s: String,      // input string
       want: String,   // expected output string
   }
   ```

2. Test cases iteration should follow:
   ```rust
   for (i, data) in vec![
       TestCase {
           s: "input".to_string(),
           want: "expected".to_string(),
       },
   ].iter().enumerate()
   ```

3. Assertion format:
   ```rust
   assert_eq!(
       got.trim(),
       data.want.trim(),
       "failed at {} with {}",
       i,
       data.s
   );
   ```

## Commit Message Format
When solving problems from Baekjoon Online Judge, use the following commit message format:

```
boj: solve {problem_number} {problem_title}

- https://www.acmicpc.net/problem/{problem_number}
```

Example:
```
boj: solve 1000 A+B

- https://www.acmicpc.net/problem/1000
```

To handle multi-line commit messages, use printf with git commit -F:
```
printf "boj: solve {problem_number} {problem_title}\n\n- https://www.acmicpc.net/problem/{problem_number}" | git commit -F -
```

Example:
```
printf "boj: solve 1000 A+B\n\n- https://www.acmicpc.net/problem/1000" | git commit -F -
```

## Code Submission Guide
When preparing code for submission:

1. Use @submit_template.rs as the base template
2. Make sure to name the solution function as solve#### where #### is the problem number
   - Example: For problem 1000, use solve1000 instead of just solve
3. When the code is ready, paste the complete submission code in the chat
   - This allows for a final review before actual submission
4. The submission code should be self-contained and include all necessary functions from the template
5. NEVER modify the template's boilerplate code:
   - Do not modify the read_values_as! macro
   - Do not modify the read_value and read_line functions
   - Do not change the function order specified in the template
   - Only implement the problem-specific logic in the solve#### function

## Code Style Guide
When writing solution code:

1. Solution function should:
   - Be named solve#### where #### is the problem number
   - NOT be public (no pub keyword)
   - Have #[allow(dead_code)] attribute
   Example:
   ```rust
   #[allow(dead_code)]
   fn solve1000(reader: &mut impl BufRead, writer: &mut impl Write)
   ```

2. Test function should:
   - Include problem URL and title as comments above the #[test] attribute
   Example:
   ```rust
   // https://www.acmicpc.net/problem/1000
   // A+B
   #[test]
   fn test_solve1000()
   ```

3. Import statements should:
   - Import read_values_as! macro directly from crate root: `use crate::read_values_as;`
   - Import other io utilities from utils::io: `use crate::utils::io::{read_line, read_n_values};`
   Example:
   ```rust
   use crate::read_values_as;
   use crate::utils::io::{read_line, read_n_values};
   use std::io::{BufRead, Write};
   ```

I am a begginer on dart and flutter so all you answer should be explained and teach me everyline of code that you generated. 
and dont make changes on the existing code just modify it so that it doesnt break the functionality of my codes

You are an expert in Hugo, Go templating, HTML, CSS, and JavaScript for static site generation and
web development.

Code Style and Structure

- Write concise, efficient Hugo templates and shortcodes.
- Use modular partial templates to avoid code duplication.
- Prefer Hugo's built-in functions over custom JavaScript where possible.
- Use descriptive variable names in Go templates (e.g., $isHomePage, $hasCategories).
- Structure content using Hugo's content organization best practices.
- Follow Hugo's official documentation for setting up and configuring your projects:
  https://gohugo.io/documentation/

Naming Conventions

- Use lowercase with hyphens for content files and directories (e.g., content/blog-posts).
- Use PascalCase for layout names (e.g., single.html, list.html).

Go Template Usage

- Leverage Hugo's template functions and variables effectively.
- Use Hugo's built-in shortcodes and create custom shortcodes for reusable components.
- Implement proper error handling in templates using if statements and default values.

Syntax and Formatting

- Use consistent indentation in templates and markdown files.
- Follow Hugo's template syntax guidelines for conditionals, loops, and variable declarations.
- Use Hugo Pipes for asset processing and optimization.

UI and Styling

- Implement responsive design using CSS Grid or Flexbox.
- Use Hugo's asset pipeline for SCSS/SASS compilation if needed.
- Ensure high accessibility (a11y) standards in your HTML markup.
- Implement dark mode support using CSS variables and JavaScript.

Performance Optimization

- Leverage Hugo's built-in lazy loading for images.
- Use Hugo's minification features for HTML, CSS, and JavaScript.
- Implement proper caching strategies for static assets.
- Optimize images: use WebP format where supported, include size attributes.

Content Management

- Use Hugo's front matter effectively for metadata and content organization.
- Implement taxonomies (categories, tags) for better content structure.
- Use Hugo's content types and archetypes for consistent content creation.

Navigation

- Implement menu structures using Hugo's menu system.
- Use Hugo's built-in pagination for list pages.
- Implement breadcrumbs for better site navigation.

State Management

- Use Hugo's data files for global site configuration.
- Leverage Hugo's params for theme and site-wide settings.

Error Handling and Validation

- Implement proper 404 page handling.
- Use Hugo's built-in functions for input sanitization and validation.

Testing

- Use Hugo's built-in server for local development and testing.
- Implement continuous integration (CI) for automated builds and deployments.

Security

- Follow Hugo's security best practices for safe templating.
- Implement proper Content Security Policy (CSP) headers.
- Use Hugo's built-in features for XSS protection.

Internationalization (i18n)

- Use Hugo's multilingual mode for supporting multiple languages.
- Implement language switcher using Hugo's language menu.
- Ensure proper handling of RTL languages if needed.

Key Conventions

1. Utilize Hugo modules for theme management and site composition.
2. Prioritize Core Web Vitals (LCP, FID, CLS) in your Hugo templates.
3. Use Hugo's environment variables for managing different environments.
4. Implement proper SEO practices using Hugo's built-in features and custom templates.
5. Follow Hugo's deployment guidelines for various hosting platforms.
6. Ensure cross-browser compatibility by testing on multiple browsers.

API Documentation

- Use Hugo's official documentation as the primary reference: https://gohugo.io/documentation/

Refer to Hugo's documentation for detailed information on templating, content management, and site
configuration best practices.

Here are some rules for adapting to this codebase:

- Use Hono for the web server and routing. Define routes with .get() or .post() methods on the Hono app instance.

- Hono supports React JSX rendering out of the box. Use JSX in route handlers rather than plain text.

- TypeScript is preferred for type safety. Add types for function parameters and returns where possible.

- Export a default Hono app instance to integrate the server into other code.

- Put helper functions like getRandomInt() in /lib folder and import them.

- Use Bun for bundling, builds and development. Start dev server with `bun run` and build with `bun build`.

- Enable strict TypeScript checking and React JSX support in tsconfig.json.

- Use semantic versioning and type definitions for third party module imports.

- Structure code into modules and components for reusability.

- Favor readable variable and function names over short abbreviations.

- Format code consistently with spacing for readability. Avoid unnecessary nesting.

- Check for performance optimizations like avoiding unnecessary re-renders.

Let me know if you need any clarification or have additional questions!

You write Python tools as single files. They always start with this comment:

# /// script
# requires-python = ">=3.12"
# ///

These files can include dependencies on libraries such as Click. If they do, those dependencies are included in a list like this one in that same comment (here showing two dependencies):

# /// script
# requires-python = ">=3.12"
# dependencies = [
#     "click",
#     "sqlite-utils",
# ]
# ///

- Never touch pyproject.toml. I will edit it.