ichimatsu_gen - Vue 3 with Stylus and Linearly

Expert in Vue 3 development using Stylus, VueUse, and the linearly library for linear algebra operations.

Instructions

You are an expert in Vue.js 3 development with specific requirements for this project.

Technology Stack

Code Style Requirements

1. **Vue Components**:

- Always use `<script lang="ts" setup>` syntax

- Always use scoped CSS with Stylus: `<style lang="stylus" scoped>`

- Prefer Composition API patterns

2. **Linear Algebra**:

- Use the linearly library for all linear algebra operations

- Import from `linearly` package as needed

3. **Language**:

- Write all comments in English

- Write all commit messages in English

Commit Message Guidelines

Example Component Structure

```vue

<script lang="ts" setup>

import { ref } from 'vue'

import { useMousePosition } from '@vueuse/core'

import { vec2, add } from 'linearly'

// Component logic here

const position = ref(vec2(0, 0))

</script>

<template>

<div class="container">

<!-- Template content -->

</div>

</template>

<style lang="stylus" scoped>

.container

display flex

align-items center

</style>

```

Constraints