create-agentic-app 1.1.56 → 1.1.58

package/template/specs/ui-polish-responsive/tasks/task-01-globals-css.md

@@ -0,0 +1,144 @@
+# Task 01: globals.css Foundation
+
+## Status
+
+complete
+
+## Wave
+
+1
+
+## Description
+
+Update `globals.css` to establish the visual foundation for the entire UI improvement. This includes importing the unused `tw-animate-css` package, refreshing the color palette with a subtle blue accent, adding custom keyframe animations, expanding the base layer with better defaults, and defining reusable utility classes. All subsequent tasks depend on the utilities and color tokens defined here.
+
+## Dependencies
+
+**Depends on:** None (Wave 1)
+**Blocks:** task-05-home-page.md, task-06-dashboard.md, task-07-chat-page.md, task-08-profile-page.md, task-09-auth-pages.md, task-10-setup-checklist.md, task-11-starter-prompt-modal.md
+
+**Context from dependencies:** N/A — this is the foundation task.
+
+## Files to Modify
+
+- `src/app/globals.css` — Add tw-animate-css import, update color tokens, add animations, expand base layer, add utility classes
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add tw-animate-css import** — The package `tw-animate-css@1.4.0` is already installed (in package.json) but never imported. Add the import right after the tailwindcss import:
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+```
+
+2. **Add animation tokens to `@theme inline`** — Add these at the end of the existing `@theme inline` block (after the `--radius-xl` line):
+
+```css
+--animate-fade-in: fade-in 0.3s ease-out;
+--animate-fade-up: fade-up 0.4s ease-out;
+--animate-scale-in: scale-in 0.2s ease-out;
+```
+
+3. **Update light mode color tokens in `:root`** — Change these 3 values (leave all other tokens unchanged):
+
+```css
+/* CHANGE these 3 lines: */
+--primary: oklch(0.21 0.034 270);          /* was oklch(0.21 0.006 285.885) */
+--ring: oklch(0.705 0.06 270);              /* was oklch(0.705 0.015 286.067) */
+--accent: oklch(0.96 0.012 270);            /* was oklch(0.967 0.001 286.375) */
+```
+
+4. **Update dark mode color tokens in `.dark`** — Change these 3 values (leave all other tokens unchanged):
+
+```css
+/* CHANGE these 3 lines: */
+--primary: oklch(0.92 0.02 270);            /* was oklch(0.92 0.004 286.32) */
+--ring: oklch(0.552 0.05 270);              /* was oklch(0.552 0.016 285.938) */
+--accent: oklch(0.28 0.018 270);            /* was oklch(0.274 0.006 286.033) */
+```
+
+5. **Add keyframe definitions** — Add these right before the `@layer base` block:
+
+```css
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.97); }
+  to { opacity: 1; transform: scale(1); }
+}
+```
+
+6. **Expand the `@layer base` block** — Replace the existing `@layer base` block with:
+
+```css
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-ring;
+  }
+}
+```
+
+7. **Add utility classes** — Add a new `@layer utilities` block after the `@layer base` block:
+
+```css
+@layer utilities {
+  .card-interactive {
+    @apply transition-all duration-200 ease-out;
+  }
+  .card-interactive:hover {
+    @apply shadow-md -translate-y-0.5;
+  }
+  .auth-bg {
+    background-image: radial-gradient(
+      circle at 50% 0%,
+      var(--accent) 0%,
+      transparent 50%
+    );
+  }
+}
+```
+
+### Final file structure (order of sections)
+
+1. `@import "tailwindcss";`
+2. `@import "tw-animate-css";`
+3. `@theme inline { ... }` (with animation tokens added at end)
+4. `:root { ... }` (with 3 updated color values)
+5. `.dark { ... }` (with 3 updated color values)
+6. `@keyframes` definitions (3 keyframes)
+7. `@layer base { ... }` (expanded)
+8. `@layer utilities { ... }` (new)
+
+## Acceptance Criteria
+
+- [ ] `tw-animate-css` is imported and animation utilities like `animate-fade-up` are available
+- [ ] `:root` has `--primary: oklch(0.21 0.034 270)`, `--ring: oklch(0.705 0.06 270)`, `--accent: oklch(0.96 0.012 270)`
+- [ ] `.dark` has `--primary: oklch(0.92 0.02 270)`, `--ring: oklch(0.552 0.05 270)`, `--accent: oklch(0.28 0.018 270)`
+- [ ] Three keyframe animations (`fade-in`, `fade-up`, `scale-in`) are defined
+- [ ] `@theme inline` includes `--animate-fade-in`, `--animate-fade-up`, `--animate-scale-in`
+- [ ] `.card-interactive` utility class is defined with hover shadow and translate
+- [ ] `.auth-bg` utility class is defined with radial gradient
+- [ ] `html` has `scroll-behavior: smooth`
+- [ ] `:focus-visible` has global outline styling
+- [ ] All other existing color tokens remain unchanged

package/template/specs/ui-polish-responsive/tasks/task-02-layout.md

@@ -0,0 +1,66 @@
+# Task 02: Layout Sticky Footer
+
+## Status
+
+complete
+
+## Wave
+
+1
+
+## Description
+
+Update the root layout to use a flex column structure that pushes the footer to the bottom of the viewport on short-content pages. Currently, pages like login/register have minimal content and the footer floats up, leaving blank space below. Adding `min-h-screen flex flex-col` to the body and `flex-1` to the main element creates a proper sticky footer layout.
+
+## Dependencies
+
+**Depends on:** None (Wave 1)
+**Blocks:** task-09-auth-pages.md (auth pages rely on the flex-1 main for proper vertical centering)
+
+**Context from dependencies:** N/A — this is a foundation task.
+
+## Files to Modify
+
+- `src/app/layout.tsx` — Add flex classes to body and main elements
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add flex layout classes to the `<body>` element** (line 92). The current className is:
+
+```tsx
+className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+```
+
+Change it to:
+
+```tsx
+className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
+```
+
+2. **Add `flex-1` to the `<main>` element** (line 101). The current element is:
+
+```tsx
+<main id="main-content">{children}</main>
+```
+
+Change it to:
+
+```tsx
+<main id="main-content" className="flex-1">{children}</main>
+```
+
+### Why this works
+
+The ThemeProvider component (`src/components/theme-provider.tsx`) is a pass-through wrapper around `next-themes` ThemeProvider — it renders children directly without adding a wrapping `<div>`. So the flex column chain from `<body>` flows directly through to `<SiteHeader>`, `<main>`, and `<SiteFooter>`.
+
+The `min-h-screen` ensures the body fills at least the full viewport. `flex flex-col` creates a vertical flex container. `flex-1` on `<main>` makes it expand to fill all available space, pushing `<SiteFooter>` to the bottom.
+
+## Acceptance Criteria
+
+- [ ] `<body>` has classes `min-h-screen flex flex-col` in addition to existing font variable classes
+- [ ] `<main>` has `className="flex-1"` 
+- [ ] On short-content pages (e.g. `/login`), the footer sits at the bottom of the viewport
+- [ ] On long-content pages (e.g. `/profile`), the footer sits below the content as usual
+- [ ] No visual regressions on any page

package/template/specs/ui-polish-responsive/tasks/task-03-site-header.md

@@ -0,0 +1,79 @@
+# Task 03: Site Header Responsive
+
+## Status
+
+complete
+
+## Wave
+
+1
+
+## Description
+
+Update the site header component with responsive padding and sizing so it scales better on mobile devices. Currently the header uses fixed `px-4 py-4` padding and `text-2xl` logo text that could be tighter on small phones. The action buttons also use a fixed `gap-4` that is generous on narrow screens.
+
+## Dependencies
+
+**Depends on:** None (Wave 1)
+**Blocks:** None
+
+**Context from dependencies:** N/A
+
+## Files to Modify
+
+- `src/components/site-header.tsx` — Update Tailwind classes for responsive sizing
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Update nav padding** (line 19). Change:
+
+```
+container mx-auto px-4 py-4 flex justify-between items-center
+```
+
+To:
+
+```
+container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex justify-between items-center
+```
+
+2. **Update logo text size** (line 21). Change the `<h1>` className from:
+
+```
+text-2xl font-bold
+```
+
+To:
+
+```
+text-xl sm:text-2xl font-bold
+```
+
+3. **Update actions group gap** (line 38). Change:
+
+```
+flex items-center gap-4
+```
+
+To:
+
+```
+flex items-center gap-2 sm:gap-4
+```
+
+### Current file reference
+
+The full current file is at `src/components/site-header.tsx` (46 lines). The structure is:
+- Skip-to-main-content link (accessibility)
+- `<header className="border-b">` wrapper
+- `<nav>` with logo on left, UserProfile + ModeToggle on right
+
+## Acceptance Criteria
+
+- [ ] Nav padding is `px-3 sm:px-4 py-3 sm:py-4`
+- [ ] Logo text is `text-xl sm:text-2xl`
+- [ ] Actions gap is `gap-2 sm:gap-4`
+- [ ] Header looks good at 320px viewport width (no overflow, no cramping)
+- [ ] Header looks unchanged at desktop widths (1024px+)

package/template/specs/ui-polish-responsive/tasks/task-04-site-footer.md

@@ -0,0 +1,63 @@
+# Task 04: Site Footer Responsive
+
+## Status
+
+complete
+
+## Wave
+
+1
+
+## Description
+
+Update the site footer with responsive padding to match the header's responsive scaling and maintain consistent container padding across the app. Currently the footer uses fixed `py-6` and `px-4` that could be tighter on mobile and more generous on large screens.
+
+## Dependencies
+
+**Depends on:** None (Wave 1)
+**Blocks:** None
+
+**Context from dependencies:** N/A
+
+## Files to Modify
+
+- `src/components/site-footer.tsx` — Update Tailwind classes for responsive padding
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Update footer padding** (line 5). Change:
+
+```
+border-t py-6 text-center text-sm text-muted-foreground
+```
+
+To:
+
+```
+border-t py-4 sm:py-6 text-center text-sm text-muted-foreground
+```
+
+2. **Update container padding** (line 6). Change:
+
+```
+container mx-auto px-4
+```
+
+To:
+
+```
+container mx-auto px-4 sm:px-6 lg:px-8
+```
+
+### Current file reference
+
+The file is at `src/components/site-footer.tsx` (24 lines). It renders a `<footer>` with a GitHubStars component and an attribution link.
+
+## Acceptance Criteria
+
+- [ ] Footer padding is `py-4 sm:py-6`
+- [ ] Container padding is `px-4 sm:px-6 lg:px-8`
+- [ ] Footer is slightly more compact on mobile (py-4 vs py-6)
+- [ ] Footer has more generous side padding on large screens (lg:px-8)

package/template/specs/ui-polish-responsive/tasks/task-05-home-page.md

@@ -0,0 +1,215 @@
+# Task 05: Home Page Overhaul
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Overhaul the home page with responsive typography, shadcn Card components replacing bare divs, hover effects on interactive cards, and better grid breakpoints. This is the highest-visibility page and sets the visual tone for the entire app. The feature cards and next steps cards are currently plain `<div>` elements with `border rounded-lg` — they need to be replaced with proper shadcn Card components with the `card-interactive` hover utility.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 defines the `card-interactive` utility class in globals.css which provides `transition-all duration-200 ease-out` with hover effects (`shadow-md -translate-y-0.5`). This task uses that class on all interactive cards. Task 01 also updates the color palette so `text-primary` on icons will show the new blue-tinted primary color.
+
+## Files to Modify
+
+- `src/app/page.tsx` — Replace bare divs with shadcn Cards, update typography responsive classes, fix grid breakpoints
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add Card imports** at the top of the file. Add this import:
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+```
+
+2. **Update container spacing** (line 13). Change:
+
+```
+className="flex-1 container mx-auto px-4 py-12"
+```
+
+To:
+
+```
+className="flex-1 container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12"
+```
+
+3. **Update hero h1 typography** (line 20). Change:
+
+```
+className="text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent"
+```
+
+To:
+
+```
+className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent"
+```
+
+4. **Update hero h2 subtitle** (line 24). Change:
+
+```
+className="text-2xl font-semibold text-muted-foreground"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold text-muted-foreground"
+```
+
+5. **Update hero description paragraph** (line 27). Change:
+
+```
+className="text-xl text-muted-foreground"
+```
+
+To:
+
+```
+className="text-base sm:text-lg md:text-xl text-muted-foreground"
+```
+
+6. **Update "Video Tutorial" heading** (line 35). Change:
+
+```
+className="text-2xl font-semibold flex items-center justify-center gap-2"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold flex items-center justify-center gap-2"
+```
+
+7. **Add shadow to video embed container** (line 43). Change:
+
+```
+className="relative pb-[56.25%] h-0 overflow-hidden rounded-lg border"
+```
+
+To:
+
+```
+className="relative pb-[56.25%] h-0 overflow-hidden rounded-lg border shadow-md"
+```
+
+8. **Update feature grid** (line 55). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mt-12"
+```
+
+9. **Replace all 4 feature card divs** (lines 56-92) with shadcn Card components. Each card currently looks like:
+
+```tsx
+<div className="p-6 border rounded-lg">
+  <h3 className="font-semibold mb-2 flex items-center gap-2">
+    <Shield className="h-4 w-4" />
+    Authentication
+  </h3>
+  <p className="text-sm text-muted-foreground">
+    Better Auth with Google OAuth integration
+  </p>
+</div>
+```
+
+Replace each with:
+
+```tsx
+<Card className="card-interactive">
+  <CardHeader className="pb-3">
+    <CardTitle className="text-base flex items-center gap-2">
+      <Shield className="h-4 w-4 text-primary" />
+      Authentication
+    </CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm text-muted-foreground">
+      Better Auth with Google OAuth integration
+    </p>
+  </CardContent>
+</Card>
+```
+
+Do this for all 4 cards (Authentication/Shield, Database/Database, AI Ready/Bot, UI Components/Palette). Add `text-primary` to each icon.
+
+10. **Update "Next Steps" heading** (line 97). Change:
+
+```
+className="text-2xl font-semibold"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold"
+```
+
+11. **Update next steps grid** (line 98). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-left"
+```
+
+12. **Replace all 4 next steps card divs** (lines 99-169) with shadcn Card components. Each currently looks like:
+
+```tsx
+<div className="p-4 border rounded-lg">
+  <h4 className="font-medium mb-2">1. Set up environment variables</h4>
+  ...content...
+</div>
+```
+
+Replace each wrapper with:
+
+```tsx
+<Card className="card-interactive">
+  <CardContent className="pt-6">
+    <h4 className="font-medium mb-2">1. Set up environment variables</h4>
+    ...content stays the same...
+  </CardContent>
+</Card>
+```
+
+Use `pt-6` on CardContent since there's no CardHeader for these simpler cards.
+
+## Acceptance Criteria
+
+- [ ] Hero h1 scales: `text-3xl` on mobile, `text-4xl` on sm, `text-5xl` on md+
+- [ ] Hero h2 and description also scale responsively
+- [ ] Feature grid uses `sm:grid-cols-2` breakpoint (2 columns at 640px)
+- [ ] All 4 feature cards use shadcn `Card`/`CardHeader`/`CardContent` with `card-interactive`
+- [ ] All feature card icons have `text-primary` class
+- [ ] All 4 next steps cards use shadcn `Card`/`CardContent` with `card-interactive`
+- [ ] Video embed has `shadow-md` 
+- [ ] Container has responsive padding: `px-4 sm:px-6 lg:px-8`
+- [ ] No TypeScript errors (Card imports are correct)