Imported from Namans12/nourishcue (nourishcue/skills/SKILL.md). Install upstream with npx skills add Namans12/nourishcue --skill skills. Copyright stays with the author.

SKILL.md - NourishCue

Read this file completely before writing any code, creating any file, or running any command.

Environment note: This architecture was originally templated for the Claude.ai Linux sandbox (/mnt/user-data/..., tools view/create_file/present_files). It has been adapted for Claude Code on Windows. All paths below are relative to the project root C:\Users\naman\Desktop\water_logger\water-logger. Use the real Claude Code tools: Read (not view), Write (not create_file), Edit (not str_replace), and Bash/PowerShell (not bash_tool). There is no present_files; the "final output" step means surfacing the result to the user in the chat with a clickable file link.

What this skill covers

NourishCue is a React 18 + Vite + TypeScript single-page app, wrapped with Capacitor 8 for Android, that tracks daily water intake. The user sets a goal (container type × container size in ml × containers per day); the app logs each drink to localStorage, shows progress toward the daily goal, keeps a 30-day history, and schedules local-notification hydration reminders on native (Android) builds. When this skill is active, Claude is building, fixing, or extending features of this app - UI components, the useWaterTracker/useHydrationReminders hooks, the reminder/date libraries, and the Capacitor Android wrapper - and producing verified, building, lint-clean changes.

Environment constraints

• Node packages: use npm install <pkg> (this is a Node/Vite app, not Python). Match the existing major versions in package.json (React 18, Vite 6, Capacitor 8, Tailwind 3).
• Do not introduce a second package manager (no yarn/pnpm lockfiles); package-lock.json is canonical.
• Working directory: the project root C:\Users\naman\Desktop\water_logger\water-logger.
• Build output: dist/ (Vite). This is also Capacitor's webDir.
• Final outputs / artifacts go to: nourishcue/outputs/
• State file location: nourishcue/state/state.json
• Checkpoint log: nourishcue/state/checkpoint.log
• Read-only: treat node_modules/, android/ generated files, and package-lock.json as managed - only edit via the proper tool (npm, npx cap sync).

Libraries to use

Stay within the stack already in package.json. Key imports:

• UI: react, react-dom, react-router-dom@6, components from @/components/ui/* (shadcn/Radix).
• Styling: tailwindcss@3 + tailwind-merge + class-variance-authority; animation via framer-motion, tailwindcss-animate.
• Icons: lucide-react. Charts: recharts. Toasts: sonner / @/hooks/use-toast.
• Forms/validation: react-hook-form + zod + @hookform/resolvers.
• Dates: date-fns@3; app-local helpers in @/lib/date (getLocalDateKey, getMillisecondsUntilNextLocalMidnight).
• Native: @capacitor/core, @capacitor/app, @capacitor/local-notifications, @capacitor/android.
• Path alias: @/ → src/ (see vite.config.ts / tsconfig).

Step-by-step workflow

Follow these steps in exact order. Write a checkpoint after each (see AGENT.md).

1. Read this SKILL.md completely (you are here)
2. Read AGENT.md at nourishcue/skills/AGENT.md
3. Read MEMORY.md at nourishcue/skills/MEMORY.md and load current state from state.json
4. Understand the change: identify the affected files (component in src/components/, page in src/pages/, hook in src/hooks/, or lib in src/lib/). Read them before editing. Preserve the existing localStorage schema (aquaflow_data, aquaflow_goal) and the normalize/validate patterns in useWaterTracker.ts.
5. Make the change: edit with Edit/Write, matching surrounding code style (TypeScript, functional components, hooks, @/ imports). Keep changes minimal and reversible.
6. Verify locally: run npm run lint and npm run build. For native-affecting changes, note whether npm run android:sync is required (do not run device builds unless asked).
7. Read CHECKS.md at nourishcue/skills/CHECKS.md and run every check
8. Write updated state back to state.json (schema in MEMORY.md)
9. Copy/record any produced artifact into nourishcue/outputs/
10. Surface the result to the user: a short summary plus clickable file links (e.g. [useWaterTracker.ts](src/hooks/useWaterTracker.ts)). (This replaces present_files.)

Output rules

• File naming: source files follow existing conventions - components PascalCase.tsx, hooks useXxx.ts, libs kebab-or-camel.ts under src/lib/. Generated artifacts in nourishcue/outputs/ use [feature]_[YYYY-MM-DD].[ext].
• Required in any code change: TypeScript types preserved, no any added where a type exists, imports use the @/ alias, no unused imports (lint enforces this).
• Format: UTF-8, no trailing whitespace, follow Prettier/ESLint defaults already in repo (2-space indent, double quotes, semicolons as in existing files).

Known failure modes and fixes

• npm run build fails on a type error: read the exact TS error; fix the type at the source, do not cast with any or @ts-ignore.
• localStorage data appears lost / reset: check normalizeRecords/normalizeGoal in useWaterTracker.ts - malformed entries are silently dropped by design; verify the schema, not the UI.
• Reminders don't fire: they only schedule on a native platform (isNativeReminderPlatform()); on web they are a no-op. Verify Android permissions (display + exact-alarm) before assuming a bug.
• Capacitor changes don't appear on device: run npm run android:sync (build + cap sync).
• Date/midnight rollover bugs: always use @/lib/date helpers, never raw new Date() keys.
• If any command fails: retry once, then stop and explain the error to the user (see AGENT.md).

Cross-references

After completing Step 9, read MEMORY.md and update state.json. If an error occurs in Steps 4–6, read AGENT.md for retry and escalation rules.