# Skill: React / TypeScript UI

## Когда использовать

Используй этот skill при изменениях в `src`, UI, state management, typed Tauri wrappers, readiness logic, route visualization, forms, logs, buttons, popovers, service panels.

## Главная цель

UI должен ясно объяснять, что будет сделано с сетью пользователя, не прятать опасные действия и не превращаться в панель управления космической станцией ради одной прокси-кнопки.

## Инварианты

- `src/api/tauriCommands.ts` — единственное место для `invoke(...)`.
- `src/domain/types.ts` должен отражать backend DTO.
- Apply-readiness logic живет в `src/app/readiness.ts`.
- Presentational UI должен переиспользовать `src/ui/*`.
- Summary panel read-only.
- Install/start/stop/uninstall/apply actions must be explicit.
- Secrets must be redacted.

## App.tsx rule

`src/app/App.tsx` уже слишком большой. Новую логику не добавлять туда, если можно вынести:

```text
src/app/hooks/useStartupSnapshot.ts
src/app/hooks/useApplyFlow.ts
src/app/hooks/useServiceControl.ts
src/app/hooks/useSubscription.ts
src/app/lib/parseProxy.ts
src/app/lib/snapshots.ts
src/app/components/RouteChain.tsx
src/app/components/ChangesDock.tsx
src/app/components/ProxyPanel.tsx
src/app/components/SingBoxWorkspace.tsx
```

Если изменение маленькое и локальное, допустимо править `App.tsx`, но не расширять его архитектурную роль.

## UI behavior rules

- Disabled button must explain why.
- Loading/busy state must prevent double submit.
- Errors must be human-readable and actionable.
- Long paths, service names and tags must not break layout.
- Do not use native `title` as main tooltip UX. Use existing popover/tooltip pattern.
- Use `aria-*` for tabs, toggle buttons, popovers, service controls.
- Honor reduced motion where relevant.

## Proxy/routing UI

When editing route UI:

- External SOCKS5 mode must not require sing-box.
- Local sing-box mode must require selected server and sing-box readiness.
- App list must clearly distinguish process, folder, exe/path if those are different target kinds.
- Route chain should reflect actual backend target/profile state.
- Pending changes should be visible before apply.

## Tests/checks

Minimum:

```powershell
npm run build
```

Recommended for extracted pure logic:

- Unit tests for proxy parsing.
- Unit tests for readiness states.
- Unit tests for snapshot diff/change dock model.
- UI smoke checks for desktop and narrow layout.

## Do not

- Do not call backend commands from random components.
- Do not store secrets in React state longer than needed if display value can be redacted.
- Do not duplicate Rust validation as the only validation. Frontend validation is UX, backend validation is authority.
- Do not add a visual state that implies a service is running unless backend confirmed it.

## Как отчитываться

Перед финальным ответом применить `.agent/skills/communication-reporting/SKILL.md` и `.agent/checklists/communication.md`.

Минимум для нетривиальной задачи:

- короткая сводка;
- таблица файлов `Файл / Что изменилось / Зачем`;
- важные места без пересказа каждой строки;
- что проверено;
- что не проверено;
- конкретные риски.
