create-agentic-app 1.1.55 → 1.1.57

package/template/.claude/skills/security-scanner/references/report-template.md

@@ -0,0 +1,148 @@
+# Security Audit Report
+
+**Project:** [PROJECT_NAME]
+**Date:** [YYYY-MM-DD]
+**Auditor:** Claude Code Security Scanner
+**Framework:** OWASP Top 10:2025
+**Scope:** [LIST_OF_DIRECTORIES_AND_FILES_ANALYZED]
+**Technology Stack:** [LANGUAGES_FRAMEWORKS_DETECTED]
+
+---
+
+## Executive Summary
+
+[2-3 paragraph overview: what was analyzed, key risk areas found, overall risk posture, most urgent items to address]
+
+**Overall Risk Score:** [SCORE] ([Low/Moderate/High/Critical] Risk)
+
+| Severity | Count |
+|----------|-------|
+| Critical | [X]   |
+| High     | [X]   |
+| Medium   | [X]   |
+| Low      | [X]   |
+| Info     | [X]   |
+| **Total**| **[X]** |
+
+---
+
+## Findings
+
+### A01:2025 — Broken Access Control
+
+[If findings exist, list each one using the format below. If no findings, write: "No issues identified. Checked: [list what was checked]."]
+
+#### [SEVERITY] [Finding Title]
+- **File:** `[path/to/file.ext]`
+- **Line(s):** [XX-YY]
+- **CWE:** [CWE-XXX: Name]
+- **Description:** [What the vulnerability is and why it matters]
+- **Evidence:**
+  ```[language]
+  // vulnerable code snippet from the actual codebase
+  ```
+- **Recommendation:**
+  ```[language]
+  // fixed code snippet showing the remediation
+  ```
+
+---
+
+### A02:2025 — Security Misconfiguration
+
+[Same format as above]
+
+---
+
+### A03:2025 — Software Supply Chain Failures
+
+[Same format as above]
+
+---
+
+### A04:2025 — Cryptographic Failures
+
+[Same format as above]
+
+---
+
+### A05:2025 — Injection
+
+[Same format as above]
+
+---
+
+### A06:2025 — Insecure Design
+
+[Same format as above]
+
+---
+
+### A07:2025 — Authentication Failures
+
+[Same format as above]
+
+---
+
+### A08:2025 — Software or Data Integrity Failures
+
+[Same format as above]
+
+---
+
+### A09:2025 — Security Logging and Alerting Failures
+
+[Same format as above]
+
+---
+
+### A10:2025 — Mishandling of Exceptional Conditions
+
+[Same format as above]
+
+---
+
+## Risk Score Breakdown
+
+Scoring: Critical = 10 pts, High = 7 pts, Medium = 4 pts, Low = 2 pts, Info = 0 pts.
+
+| Category | Critical | High | Medium | Low | Info | Points |
+|----------|----------|------|--------|-----|------|--------|
+| A01 — Broken Access Control        | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A02 — Security Misconfiguration    | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A03 — Supply Chain Failures        | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A04 — Cryptographic Failures       | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A05 — Injection                    | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A06 — Insecure Design              | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A07 — Authentication Failures      | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A08 — Data Integrity Failures      | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A09 — Logging & Alerting Failures  | [X] | [X] | [X] | [X] | [X] | [XX] |
+| A10 — Exceptional Conditions       | [X] | [X] | [X] | [X] | [X] | [XX] |
+| **Total**                           |     |     |     |     |     | **[XX]** |
+
+**Risk Rating:** 0-10 = Low | 11-30 = Moderate | 31-60 = High | 61+ = Critical
+
+---
+
+## Remediation Priority
+
+[Ordered list of the most critical items to fix first, with brief rationale]
+
+1. **[Most critical finding]** — [why this is urgent and what to do]
+2. **[Second most critical]** — [why and what]
+3. **[Third most critical]** — [why and what]
+[Continue as needed...]
+
+---
+
+## Methodology
+
+This audit was performed using static analysis against the OWASP Top 10:2025 framework. Each category was evaluated using pattern-matching (grep), code review (file reading), dependency analysis, and configuration inspection. The analysis covered source code, configuration files, dependency manifests, and environment settings.
+
+**Limitations:** This is a static analysis — it does not include dynamic/runtime testing, penetration testing, or network-level analysis. Some vulnerabilities may only be discoverable through dynamic testing.
+
+## References
+
+- [OWASP Top 10:2025](https://owasp.org/Top10/2025/)
+- [OWASP Application Security Verification Standard](https://owasp.org/www-project-application-security-verification-standard/)
+- [OWASP Cheat Sheet Series](https://cheatsheetseries.owasp.org/)

package/template/AGENTS.md

@@ -2,6 +2,46 @@
 
 Never make assumptions about what the user wants. Always ask clarifying questions before proceeding.
 
+# MANDATORY: Feature Planning & Implementation Workflow
+
+**This workflow is non-negotiable for any non-trivial feature or multi-step change.** Do not implement multi-task features directly in a single session. Do not write a monolithic plan and start coding from it. The workflow below exists because implementation plans that live in a single file are either too large for a context window or too shallow for independent execution — both lead to poor results.
+
+### The workflow has three stages. Execute them in order, every time.
+
+**Stage 1 — Plan.** Discuss the feature with the user. Ask clarifying questions. Understand requirements, technical constraints, and acceptance criteria. This happens naturally in planning mode.
+
+**Stage 2 — Create the spec.** Once planning is complete, invoke the `create-spec` skill. This converts the planning conversation into a structured `specs/{feature}/` folder with:
+- Self-contained task files (one per task, in a `tasks/` subfolder)
+- A README with a dependency graph and parallel execution waves
+- Requirements and manual action items
+
+Do not skip this step. Do not proceed to implementation without a spec folder. The spec is what enables parallel agent execution — without it, you're back to single-threaded implementation.
+
+**Stage 3 — Implement via orchestration.** Once the spec folder exists and the user approves it, invoke the `implement-feature` skill. This orchestrates parallel coder agents wave-by-wave:
+- Each task is dispatched to its own coder agent
+- Tasks within a wave run in parallel
+- A code review gate runs between waves
+- Issues from review are dispatched back to coder agents
+- The cycle repeats until everything passes
+
+The main agent (you) does NOT write code during Stage 3. You orchestrate. Coder subagents implement. The code-review agent verifies. You manage progress and commit completed waves.
+
+### When does this workflow apply?
+
+- Any feature with 2+ tasks or files to change
+- Any work that came out of a planning conversation
+- Any time the user says "implement", "build", "create this feature", or similar after discussing what to build
+
+### When does it NOT apply?
+
+- Single-file bug fixes or trivial changes
+- Quick config edits or one-line patches
+- Tasks the user explicitly asks to do inline ("just fix this here")
+
+If in doubt, ask the user: "This looks like it could benefit from a spec — should I create one, or would you prefer I implement it directly?"
+
+---
+
 # Project Agent Instructions
 
 ## Skills

package/template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/specs/ui-polish-responsive/README.md

@@ -0,0 +1,59 @@
+# UI Polish & Responsive Improvements
+
+## Overview
+
+Improve the visual quality, component consistency, and responsive behavior of the boilerplate UI across all pages. This includes refreshing the color palette with a subtle blue accent, replacing bare HTML elements with shadcn components, adding hover/transition effects via a reusable utility class, and introducing `sm:` breakpoints throughout for better tablet/mobile scaling. All custom styling goes in globals.css — no inline or custom CSS on components.
+
+## Quick Links
+
+- [Requirements](./requirements.md) — full requirements and acceptance criteria
+- [Action Required](./action-required.md) — manual steps needing human action
+
+## Dependency Graph
+
+```mermaid
+graph TD
+    task-01-globals-css["01: globals.css Foundation"]
+    task-02-layout["02: Layout Sticky Footer"]
+    task-03-site-header["03: Site Header Responsive"]
+    task-04-site-footer["04: Site Footer Responsive"]
+    task-05-home-page["05: Home Page Overhaul"]
+    task-06-dashboard["06: Dashboard Page"]
+    task-07-chat-page["07: Chat Page"]
+    task-08-profile-page["08: Profile Page"]
+    task-09-auth-pages["09: Auth Pages"]
+    task-10-setup-checklist["10: Setup Checklist"]
+    task-11-starter-prompt-modal["11: Starter Prompt Modal"]
+    task-01-globals-css --> task-05-home-page
+    task-01-globals-css --> task-06-dashboard
+    task-01-globals-css --> task-07-chat-page
+    task-01-globals-css --> task-08-profile-page
+    task-01-globals-css --> task-09-auth-pages
+    task-01-globals-css --> task-10-setup-checklist
+    task-01-globals-css --> task-11-starter-prompt-modal
+    task-02-layout --> task-09-auth-pages
+```
+
+## Waves
+
+| Wave | Tasks | Description |
+|------|-------|-------------|
+| 1 | task-01, task-02, task-03, task-04 | Foundation: globals.css enhancements, layout flex structure, header/footer responsive |
+| 2 | task-05, task-06, task-07, task-08, task-09, task-10, task-11 | All pages: Card adoption, responsive breakpoints, component swaps |
+
+## Task Status
+
+### Wave 1
+- [x] [task-01-globals-css](./tasks/task-01-globals-css.md) — globals.css color palette, animations, and utility classes
+- [x] [task-02-layout](./tasks/task-02-layout.md) — Root layout sticky footer with flex column
+- [x] [task-03-site-header](./tasks/task-03-site-header.md) — Header responsive padding and sizing
+- [x] [task-04-site-footer](./tasks/task-04-site-footer.md) — Footer responsive padding
+
+### Wave 2
+- [ ] [task-05-home-page](./tasks/task-05-home-page.md) — Home page Card adoption + responsive typography
+- [ ] [task-06-dashboard](./tasks/task-06-dashboard.md) — Dashboard Card adoption + responsive grid
+- [ ] [task-07-chat-page](./tasks/task-07-chat-page.md) — Chat Input swap + sticky form + responsive
+- [ ] [task-08-profile-page](./tasks/task-08-profile-page.md) — Profile responsive stacking + grid fixes
+- [ ] [task-09-auth-pages](./tasks/task-09-auth-pages.md) — Auth pages animation, shadow, and background
+- [ ] [task-10-setup-checklist](./tasks/task-10-setup-checklist.md) — Setup checklist Card adoption
+- [ ] [task-11-starter-prompt-modal](./tasks/task-11-starter-prompt-modal.md) — Textarea swap + responsive buttons

package/template/specs/ui-polish-responsive/action-required.md

@@ -0,0 +1,3 @@
+# Action Required: UI Polish & Responsive Improvements
+
+No manual steps required for this feature. All tasks can be implemented automatically.

package/template/specs/ui-polish-responsive/requirements.md

@@ -0,0 +1,53 @@
+# Requirements: UI Polish & Responsive Improvements
+
+## Summary
+
+The boilerplate UI is functional but visually flat — bare `<div>` elements instead of shadcn Cards, a monotone neutral-gray palette, no hover/transition effects, and minimal responsive breakpoints (most pages only use `md:`). The goal is to meaningfully improve visual quality, component consistency, and responsive behavior across all pages and components.
+
+All changes must use Tailwind utilities and shadcn standards. Custom styling (animations, utilities, color tokens) goes in `globals.css`. No custom inline styles or CSS-in-JS on individual components. The result should look like a polished, high-quality default that can be customized by users of the boilerplate.
+
+## Goals
+
+- Refresh the color palette with a subtle cool blue accent (shift primary/ring/accent from flat gray to hue 270)
+- Replace all bare `<div>` cards with shadcn Card components for consistency
+- Replace native `<input>`, `<button>`, and `<textarea>` elements with their shadcn equivalents
+- Add hover/transition effects to interactive cards via a reusable `card-interactive` utility
+- Introduce `sm:` breakpoints throughout for proper tablet/mobile scaling
+- Add entrance animations to auth pages
+- Fix the sticky footer layout so it works on short-content pages
+- Ensure all pages scale well from 320px to 1536px+ viewports
+
+## Non-Goals
+
+- No hamburger/mobile menu for the header — the current content (avatar + theme toggle) is minimal enough
+- No new shadcn component installations — all needed components are already installed
+- No changes to business logic, API routes, or authentication flows
+- No new pages or routes
+- No changes to the Geist font choice
+- No Storybook or component documentation
+
+## Acceptance Criteria
+
+- [ ] All pages render correctly in both light and dark modes
+- [ ] No horizontal scroll on any page at 320px viewport width
+- [ ] Feature cards, dashboard cards, and next steps cards use shadcn Card components
+- [ ] Chat input uses shadcn Input, not a native `<input>`
+- [ ] Footer sticks to the bottom on short-content pages (auth pages)
+- [ ] Primary color has a visible cool-blue tint (not flat gray)
+- [ ] Cards have hover lift effect with shadow transition
+- [ ] All grids have `sm:` breakpoints for tablet-size viewports
+- [ ] `pnpm lint` and `pnpm typecheck` pass with no errors
+
+## Assumptions
+
+- Tailwind CSS v4 is in use (confirmed: `@import "tailwindcss"` syntax, `@theme inline` block)
+- `tw-animate-css` is installed in dependencies but currently unused (confirmed in package.json)
+- The ThemeProvider from next-themes renders children directly without a wrapping `<div>` (confirmed by reading the component)
+- All shadcn components needed (Card, Input, Button, Textarea, Badge, Avatar, Dialog) are already installed
+
+## Technical Constraints
+
+- All custom CSS (animations, utilities, color tokens) must go in `src/app/globals.css`
+- Component files should only use Tailwind utility classes and shadcn components — no `style={{}}` props
+- Must maintain both light and dark mode support via the existing OKLch CSS variable system
+- Must not break existing functionality (auth flows, chat, diagnostics)

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)