| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 11 | 12 | 0% |
| Commands | 0 | 8 | 1 | 0% |
| Section tags | 2 | 2 | 3 | 29% |
What each file covers
Sections
0 shared · 11 only in A · 12 only in B- − Project Identity
- − Project Name & Purpose
- − Tech Stack
- − Frontend
- − Backend
- − External Binaries
- − Development Environment
- − Directory Structure
- − Package Rules
- − Dev Commands
- − Window Config
- + Frontend Rules
- + Component Pattern
- + Props & Types
- + Imports
- + CSS
- + File Responsibilities
- + Color Rule
- + Naming
- + State Management
- + Pre-existing Dependencies
- + File Naming
- + Inline Styles
Commands
0 shared · 8 only in A · 1 only in B- − yarn dev
- − yarn tauri dev
- − yarn build
- − yarn tauri build
- − yarn rustcheck
- − npm install
- − pnpm add
- − yarn
- + task: DownloadTask;
Section tags
2 shared · 2 only in A · 3 only in B- − setup
- − architecture
- + code-style
- + dependencies
- + ui
- types
- do-not
Line diff
VaillerTeeter/HoshimiNest · .clinerules/project-identity.md
@@ −1 @@
1---
2description: "HoshimiNest project overview — tech stack, directory structure, package manager, dev commands, Rust dependencies. Always apply."
3globs: ""
4alwaysApply: true
5---
6
7# Project Identity
8
9<!-- HoshimiNest 项目身份与架构，AI 每次对话自动加载 -->
10
11## Project Name & Purpose
12
13HoshimiNest is a desktop anime tracking & download manager.
14
15## Tech Stack
16
17### Frontend
18
19- **React 19 + TypeScript** — functional components + hooks, strict mode
20- **Vite 7** — bundler, dev port `1520`
21- **Zustand** — state management (`src/store/`)
22- **Plain CSS** — NO Tailwind, NO CSS-in-JS
23- **Yarn** — the ONLY package manager
24
25### Backend
26
27- **Tauri v2** — Rust desktop shell
28- **Key Rust crates:**
29 - `reqwest` (HTTP client, rustls-tls)
30 - `serde` + `serde_json` (serialization)
31 - `tokio` (async runtime: time, sync, macros, rt)
32 - `tauri-plugin-shell` / `tauri-plugin-opener` / `tauri-plugin-dialog`
33 - `log` + `env_logger`
34
35### External Binaries
36
37Bundled with the app via `externalBin`:
38
39- `aria2c` — download engine
40- `mkvmerge` — media remuxing
41
42## Development Environment
43
44- **OS**: Windows only — NEVER assume macOS/Linux/WSL paths or tools
45- **Shell**: PowerShell (`.ps1` scripts) — NEVER write `.sh` or bash scripts
46- **Terminal commands**: always use PowerShell syntax; NEVER use Unix-only flags or pipes
47
48## Directory Structure
49
50```text
51src/ # React frontend source
52 ├── App.css # global layout & component styles (colors reference theme.css vars)
53 ├── App.tsx # root component (topbar + sidebar nav + download settings modal)
54 ├── assets/
55 │ └── fonts/ # bundled font files
56 ├── main.tsx # React entry point
57 ├── pages/ # page-level components (one per nav item)
58 │ ├── BacklogPage.tsx # backlog / plan-to-watch
59 │ ├── DownloadPage.tsx # download manager
60 │ ├── FinishedPage.tsx # completed anime (main file, sub-logic in finished/)
61 │ ├── QueryPage.tsx # seasonal query (main page)
62 │ ├── QueryPage/ # seasonal query sub-components
63 │ ├── SearchPage.tsx # resource search (main page)
64 │ ├── SearchPage/ # resource search sub-components
65 │ ├── TracksPage.tsx # track workshop (main file, sub-logic in tracks/)
66 │ ├── WatchingPage.tsx # currently watching
67 │ ├── WatchListPage.tsx # watchlist base (main file, sub-logic in watchlist/)
68 │ ├── finished/ # completed anime sub-components
69 │ ├── tracks/ # track workshop sub-components
70 │ └── watchlist/ # watchlist sub-components
71 ├── store/ # global state
72 │ ├── downloadStore.tsx # download task context (state machine + aria2 events + localStorage)
73 │ └── watchStore.ts # watchlist localStorage helpers
74 ├── styles/
75 │ ├── fonts.css # @font-face declarations
76 │ └── theme.css # theme CSS variables
77 └── vite-env.d.ts # Vite type declarations
78src-tauri/ # Tauri/Rust backend
79 ├── app-config.json # compile-time config (BT trackers, ports, cache)
80 ├── build.rs # Tauri build script
81 ├── capabilities/
82 │ └── default.json # Tauri ACL capability config
83 ├── icons/ # app icons
84 ├── src/
85 │ ├── lib.rs # Tauri commands + aria2 control + mkvmerge track merge
86 │ └── main.rs # Rust entry point
87 └── tauri.conf.json # Tauri app config (window/bundle/permissions)
88scripts/ # dev & setup scripts (.ps1)
89```
90
91## Package Rules
92
93NEVER run `npm install` or `pnpm add`. Always use `yarn`.
94
95NEVER suggest re-installing these — already in `package.json`:
96
97- `@tauri-apps/api`, `@tauri-apps/plugin-dialog`, `@tauri-apps/plugin-opener`
98- `animal-island-ui`, `bangumi-api-client`
99- `react`, `react-dom`, `zustand`
100
101## Dev Commands
102
103```bash
104yarn dev # Vite dev server (frontend only, port 1520)
105yarn tauri dev # full Tauri app in dev mode
106yarn build # TypeScript check + Vite build
107yarn tauri build # production Tauri bundle
108yarn rustcheck # cargo check (Rust compilation check only)
109```
110
111## Window Config
112
113- Window: 1360×820, non-resizable, non-maximizable, frameless (custom titlebar)
114- App identifier: `HoshimiNest`
115
VaillerTeeter/HoshimiNest · .clinerules/frontend-rules.md
@@ +1 @@
1---
2description: "Use when: writing or modifying React components, TypeScript, CSS, or Zustand stores in src/. Covers component patterns, import order, styling, state management, and TypeScript rules."
3globs: "src/**"
4alwaysApply: false
5---
6
7# Frontend Rules
8
9<!-- React / TypeScript / CSS / Zustand 规范，操作 src/ 目录时自动加载 -->
10
11## Component Pattern
12
13Always use functional components with hooks. NEVER use class components or HOCs.
14
15Always place page-level components in `src/pages/`, one file per route.
16
17Always annotate component return type as `React.JSX.Element`.
18
19```tsx
20function MyComponent({ name }: MyComponentProps): React.JSX.Element {
21 return <div>{name}</div>;
22}
23```
24
25NEVER export components as anonymous default exports. Always use named functions:
26
27✅ `export default function BacklogPage(): React.JSX.Element { ... }`
28❌ `export default () => { ... }`
29
30## Props & Types
31
32Always declare props via `interface`. Use `type` for unions and lookup types.
33
34```tsx
35interface TaskCardProps {
36 task: DownloadTask;
37 onPause: (id: string) => void;
38}
39```
40
41NEVER use `any`. NEVER use `@ts-ignore` without an explanatory comment on the same line.
42
43✅ `// @ts-expect-error: third-party type mismatch in bangumi-api-client v2026`
44❌ `// @ts-ignore`
45
46Use type guards with `is` predicates when validating unknown shapes at runtime.
47
48```tsx
49function isWatchEntry(v: unknown): v is WatchEntry {
50 if (typeof v !== 'object' || v === null) return false;
51 const e = v as Record<string, unknown>;
52 return typeof e.status === 'string' && typeof e.updatedAt === 'number';
53}
54```
55
56## Imports
57
58Always group imports in this order, separated by blank lines:
59
601. Tauri API (`@tauri-apps/api/*`)
612. Third-party UI / libraries
623. React and React hooks
634. Internal modules (relative paths)
645. CSS imports (always last)
65
66```tsx
67import { invoke } from '@tauri-apps/api/core';
68
69import { Button } from 'animal-island-ui';
70
71import { useState, useCallback } from 'react';
72
73import { useDownload } from '../store/downloadStore';
74
75import './MyPage.css';
76```
77
78## CSS
79
80Always use plain CSS. NEVER add Tailwind CSS or any CSS-in-JS library (styled-components, emotion, etc.).
81
82### File Responsibilities
83
84|File|Purpose|
85|----|-------|
86|`src/styles/theme.css`|The ONLY place for `--theme-*` CSS variables — colors, spacing, typography tokens. Replace this file to change themes.|
87|`src/styles/fonts.css`|`@font-face` declarations only. No colors, no layout.|
88|`src/App.css`|App shell layout (topbar, sidebar, page containers). All colors MUST reference `var(--theme-*)`.|
89|`src/pages/*.css`|Page-level component styles. Co-located with their component. All colors MUST reference `var(--theme-*)`.|
90
91### Color Rule
92
93NEVER write raw color values (`#xxx`, `rgb()`, `hsl()`) in any CSS file except `src/styles/theme.css`. All colors MUST use CSS variables defined in `theme.css`.
94
95✅ `color: var(--theme-text-primary);`
96❌ `color: #4a3525;`
97
98### Naming
99
100Use BEM-style naming: `.block__element--modifier`
101
102```text
103dl-card # Block
104dl-card__header # Element
105dl-card--error # Modifier
106dl-progress-bar--done # Modifier with state
107```
108
109## State Management
110
111Always use Zustand for state management. NEVER introduce Redux, Jotai, MobX, or other state libraries.
112
113Place store files in `src/store/`. Name stores in camelCase:
114
115```text
116src/store/watchStore.ts
117src/store/downloadStore.tsx
118```
119
120Encapsulate store logic in custom hooks when exposing to components:
121
122```tsx
123// src/store/downloadStore.tsx
124export function useDownload() {
125 return useDownloadStore((s) => ({
126 tasks: s.tasks,
127 pauseTask: s.pauseTask,
128 // ...
129 }));
130}
131```
132
133## Pre-existing Dependencies
134
135NEVER suggest installing or re-installing these — already in `package.json`:
136
137- `@tauri-apps/api`, `@tauri-apps/plugin-dialog`, `@tauri-apps/plugin-opener`
138- `animal-island-ui`, `bangumi-api-client`
139- `react`, `react-dom`, `zustand`
140
141Always invoke Tauri commands via `invoke()` from `@tauri-apps/api/core`. NEVER use other Tauri IPC methods.
142
143```tsx
144import { invoke } from '@tauri-apps/api/core';
145
146void invoke('reveal_in_folder', { path: task.saveDir });
147```
148
149## File Naming
150
151|Type|Convention|Example|
152|----|----------|-------|
153|Page component|PascalCase|`DownloadPage.tsx`|
154|Store|camelCase|`watchStore.ts`|
155|Styles (global)|kebab-case|`theme.css`, `fonts.css`|
156|Styles (component)|PascalCase + `.css`|`DownloadPage.css`|
157
158## Inline Styles
159
160Inline styles are permitted only for dynamic layout values (widths, visibility). NEVER use inline styles for static design — use CSS classes instead.
161
@@ −1 +1 @@
11 ---
2−description: "HoshimiNest project overview — tech stack, directory structure, package manager, dev commands, Rust dependencies. Always apply."
3−globs: ""
4−alwaysApply: true
2+description: "Use when: writing or modifying React components, TypeScript, CSS, or Zustand stores in src/. Covers component patterns, import order, styling, state management, and TypeScript rules."
3+globs: "src/**"
4+alwaysApply: false
55 ---
66
7−# Project Identity
7+# Frontend Rules
88
9−<!-- HoshimiNest 项目身份与架构，AI 每次对话自动加载 -->
9+<!-- React / TypeScript / CSS / Zustand 规范，操作 src/ 目录时自动加载 -->
1010
11−## Project Name & Purpose
11+## Component Pattern
1212
13−HoshimiNest is a desktop anime tracking & download manager.
13+Always use functional components with hooks. NEVER use class components or HOCs.
1414
15−## Tech Stack
15+Always place page-level components in `src/pages/`, one file per route.
1616
17−### Frontend
17+Always annotate component return type as `React.JSX.Element`.
1818
19−- **React 19 + TypeScript** — functional components + hooks, strict mode
20−- **Vite 7** — bundler, dev port `1520`
21−- **Zustand** — state management (`src/store/`)
22−- **Plain CSS** — NO Tailwind, NO CSS-in-JS
23−- **Yarn** — the ONLY package manager
19+```tsx
20+function MyComponent({ name }: MyComponentProps): React.JSX.Element {
21+ return <div>{name}</div>;
22+}
23+```
2424
25−### Backend
25+NEVER export components as anonymous default exports. Always use named functions:
2626
27−- **Tauri v2** — Rust desktop shell
28−- **Key Rust crates:**
29− - `reqwest` (HTTP client, rustls-tls)
30− - `serde` + `serde_json` (serialization)
31− - `tokio` (async runtime: time, sync, macros, rt)
32− - `tauri-plugin-shell` / `tauri-plugin-opener` / `tauri-plugin-dialog`
33− - `log` + `env_logger`
27+✅ `export default function BacklogPage(): React.JSX.Element { ... }`
28+❌ `export default () => { ... }`
3429
35−### External Binaries
30+## Props & Types
3631
37−Bundled with the app via `externalBin`:
32+Always declare props via `interface`. Use `type` for unions and lookup types.
3833
39−- `aria2c` — download engine
40−- `mkvmerge` — media remuxing
34+```tsx
35+interface TaskCardProps {
36+ task: DownloadTask;
37+ onPause: (id: string) => void;
38+}
39+```
4140
42−## Development Environment
41+NEVER use `any`. NEVER use `@ts-ignore` without an explanatory comment on the same line.
4342
44−- **OS**: Windows only — NEVER assume macOS/Linux/WSL paths or tools
45−- **Shell**: PowerShell (`.ps1` scripts) — NEVER write `.sh` or bash scripts
46−- **Terminal commands**: always use PowerShell syntax; NEVER use Unix-only flags or pipes
43+✅ `// @ts-expect-error: third-party type mismatch in bangumi-api-client v2026`
44+❌ `// @ts-ignore`
4745
48−## Directory Structure
46+Use type guards with `is` predicates when validating unknown shapes at runtime.
4947
48+```tsx
49+function isWatchEntry(v: unknown): v is WatchEntry {
50+ if (typeof v !== 'object' || v === null) return false;
51+ const e = v as Record<string, unknown>;
52+ return typeof e.status === 'string' && typeof e.updatedAt === 'number';
53+}
54+```
55+
56+## Imports
57+
58+Always group imports in this order, separated by blank lines:
59+
60+1. Tauri API (`@tauri-apps/api/*`)
61+2. Third-party UI / libraries
62+3. React and React hooks
63+4. Internal modules (relative paths)
64+5. CSS imports (always last)
65+
66+```tsx
67+import { invoke } from '@tauri-apps/api/core';
68+
69+import { Button } from 'animal-island-ui';
70+
71+import { useState, useCallback } from 'react';
72+
73+import { useDownload } from '../store/downloadStore';
74+
75+import './MyPage.css';
76+```
77+
78+## CSS
79+
80+Always use plain CSS. NEVER add Tailwind CSS or any CSS-in-JS library (styled-components, emotion, etc.).
81+
82+### File Responsibilities
83+
84+|File|Purpose|
85+|----|-------|
86+|`src/styles/theme.css`|The ONLY place for `--theme-*` CSS variables — colors, spacing, typography tokens. Replace this file to change themes.|
87+|`src/styles/fonts.css`|`@font-face` declarations only. No colors, no layout.|
88+|`src/App.css`|App shell layout (topbar, sidebar, page containers). All colors MUST reference `var(--theme-*)`.|
89+|`src/pages/*.css`|Page-level component styles. Co-located with their component. All colors MUST reference `var(--theme-*)`.|
90+
91+### Color Rule
92+
93+NEVER write raw color values (`#xxx`, `rgb()`, `hsl()`) in any CSS file except `src/styles/theme.css`. All colors MUST use CSS variables defined in `theme.css`.
94+
95+✅ `color: var(--theme-text-primary);`
96+❌ `color: #4a3525;`
97+
98+### Naming
99+
100+Use BEM-style naming: `.block__element--modifier`
101+
50102 ```text
51−src/ # React frontend source
52− ├── App.css # global layout & component styles (colors reference theme.css vars)
53− ├── App.tsx # root component (topbar + sidebar nav + download settings modal)
54− ├── assets/
55− │ └── fonts/ # bundled font files
56− ├── main.tsx # React entry point
57− ├── pages/ # page-level components (one per nav item)
58− │ ├── BacklogPage.tsx # backlog / plan-to-watch
59− │ ├── DownloadPage.tsx # download manager
60− │ ├── FinishedPage.tsx # completed anime (main file, sub-logic in finished/)
61− │ ├── QueryPage.tsx # seasonal query (main page)
62− │ ├── QueryPage/ # seasonal query sub-components
63− │ ├── SearchPage.tsx # resource search (main page)
64− │ ├── SearchPage/ # resource search sub-components
65− │ ├── TracksPage.tsx # track workshop (main file, sub-logic in tracks/)
66− │ ├── WatchingPage.tsx # currently watching
67− │ ├── WatchListPage.tsx # watchlist base (main file, sub-logic in watchlist/)
68− │ ├── finished/ # completed anime sub-components
69− │ ├── tracks/ # track workshop sub-components
70− │ └── watchlist/ # watchlist sub-components
71− ├── store/ # global state
72− │ ├── downloadStore.tsx # download task context (state machine + aria2 events + localStorage)
73− │ └── watchStore.ts # watchlist localStorage helpers
74− ├── styles/
75− │ ├── fonts.css # @font-face declarations
76− │ └── theme.css # theme CSS variables
77− └── vite-env.d.ts # Vite type declarations
78−src-tauri/ # Tauri/Rust backend
79− ├── app-config.json # compile-time config (BT trackers, ports, cache)
80− ├── build.rs # Tauri build script
81− ├── capabilities/
82− │ └── default.json # Tauri ACL capability config
83− ├── icons/ # app icons
84− ├── src/
85− │ ├── lib.rs # Tauri commands + aria2 control + mkvmerge track merge
86− │ └── main.rs # Rust entry point
87− └── tauri.conf.json # Tauri app config (window/bundle/permissions)
88−scripts/ # dev & setup scripts (.ps1)
103+dl-card # Block
104+dl-card__header # Element
105+dl-card--error # Modifier
106+dl-progress-bar--done # Modifier with state
89107 ```
90108
91−## Package Rules
109+## State Management
92110
93−NEVER run `npm install` or `pnpm add`. Always use `yarn`.
111+Always use Zustand for state management. NEVER introduce Redux, Jotai, MobX, or other state libraries.
94112
95−NEVER suggest re-installing these — already in `package.json`:
113+Place store files in `src/store/`. Name stores in camelCase:
96114
115+```text
116+src/store/watchStore.ts
117+src/store/downloadStore.tsx
118+```
119+
120+Encapsulate store logic in custom hooks when exposing to components:
121+
122+```tsx
123+// src/store/downloadStore.tsx
124+export function useDownload() {
125+ return useDownloadStore((s) => ({
126+ tasks: s.tasks,
127+ pauseTask: s.pauseTask,
128+ // ...
129+ }));
130+}
131+```
132+
133+## Pre-existing Dependencies
134+
135+NEVER suggest installing or re-installing these — already in `package.json`:
136+
97137 - `@tauri-apps/api`, `@tauri-apps/plugin-dialog`, `@tauri-apps/plugin-opener`
98138 - `animal-island-ui`, `bangumi-api-client`
99139 - `react`, `react-dom`, `zustand`
100140
101−## Dev Commands
141+Always invoke Tauri commands via `invoke()` from `@tauri-apps/api/core`. NEVER use other Tauri IPC methods.
102142
103−```bash
104−yarn dev # Vite dev server (frontend only, port 1520)
105−yarn tauri dev # full Tauri app in dev mode
106−yarn build # TypeScript check + Vite build
107−yarn tauri build # production Tauri bundle
108−yarn rustcheck # cargo check (Rust compilation check only)
143+```tsx
144+import { invoke } from '@tauri-apps/api/core';
145+
146+void invoke('reveal_in_folder', { path: task.saveDir });
109147 ```
110148
111−## Window Config
149+## File Naming
112150
113−- Window: 1360×820, non-resizable, non-maximizable, frameless (custom titlebar)
114−- App identifier: `HoshimiNest`
151+|Type|Convention|Example|
152+|----|----------|-------|
153+|Page component|PascalCase|`DownloadPage.tsx`|
154+|Store|camelCase|`watchStore.ts`|
155+|Styles (global)|kebab-case|`theme.css`, `fonts.css`|
156+|Styles (component)|PascalCase + `.css`|`DownloadPage.css`|
157+
158+## Inline Styles
159+
160+Inline styles are permitted only for dynamic layout values (widths, visibility). NEVER use inline styles for static design — use CSS classes instead.
115161
