dyolink/.cursor/skills/frontend-structure/SKILL.md

name, description

name	description
dyolink-frontend-structure	Audits or refactors Dyolink frontend folder layout (components vs components/ui, thin pages). Use when moving components, fixing structure violations, or when the user mentions folder rules, page.tsx bloat, or component organization.

Frontend structure audit

Target layout

components/ui/shared/     → reusable UI (Button, Dialog, …)
components/ui/{feature}/ → feature UI + {Feature}Page.tsx
components/shared/       → cross-feature non-UI
components/{feature}/      → feature non-UI (helpers, config)
app/**/page.tsx            → thin wrapper importing ui/{feature} page component

Audit steps

1. List files in components/ outside ui/ — any .tsx with JSX → move to components/ui/{feature}/.
2. List files in components/ui/ — any pure .ts helper → move to components/{feature}/ or components/shared/.
3. List app/**/page.tsx — if > ~30 lines of logic/state, extract to components/ui/{feature}/{Feature}Page.tsx.
4. Update all @/components/... imports.
5. Run npx tsc --noEmit in frontend/.

Common mistakes

Wrong	Right
components/today/TodayDashboard.tsx	components/ui/today/TodayDashboard.tsx
components/ui/treatment/treatmentTypeDisplay.ts	components/shared/treatmentTypeDisplay.ts
Logic in app/.../staff/page.tsx	components/ui/staff/StaffPage.tsx

Non-UI that stays outside ui/

• components/today/widget-registry.ts, chart-theme.ts (config)
• components/staff/workingHours.ts
• components/appointments/appointmentTime.ts
• components/i18n/LocaleSync.tsx (null-render side effect for layout)