From b4e2de497eb8787c9ca54981b29c7fc6b691aa97 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 17 Apr 2026 10:36:56 +0200
Subject: docs: add Week 6 planning, spec, and implementation plan (404 and
 Repository pages)

---
 .../2026-04-17-404-repository-pages-design.md      | 645 +++++++++++++++++++++
 1 file changed, 645 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-17-404-repository-pages-design.md

(limited to 'docs/superpowers/specs')

diff --git a/docs/superpowers/specs/2026-04-17-404-repository-pages-design.md b/docs/superpowers/specs/2026-04-17-404-repository-pages-design.md
new file mode 100644
index 0000000..1dbe52b
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-17-404-repository-pages-design.md
@@ -0,0 +1,645 @@
+# 404 & Repository Pages Design Spec
+**danix.xyz Hacker Theme — Week 6**
+
+**Date:** 2026-04-17  
+**Project:** danix.xyz Hacker Theme (Hugo)  
+**Scope:** Design two new pages (404 error page, Repository/Slackware guide page)  
+**Status:** Design Phase (awaiting approval)
+
+---
+
+## Overview
+
+This spec defines the design and implementation strategy for two new pages in Week 6:
+
+1. **404 Error Page** — User-friendly error page with hacker theme integration, search, recent articles, and interactive easter egg
+2. **Repository Page** — Slackware package repository guide with hero section, installation/usage sections, and GitHub SlackBuild repo cards
+
+Both pages must:
+- Maintain visual cohesion with existing theme (Weeks 1-5)
+- Meet WCAG 2.1 AA accessibility standards
+- Support multilingual content (EN/IT)
+- Be fully responsive (320px, 768px, 1200px+)
+- Work in light and dark modes
+- Integrate animations and interactive elements from Week 5
+
+---
+
+## Part 1: 404 Error Page
+
+### Purpose & Audience
+- **Purpose:** Display when users navigate to non-existent URLs; provide helpful navigation back to site content
+- **Audience:** Users who've made typos or followed broken links
+- **Success Criteria:** Users quickly understand the error, access search/articles, find their way back to site
+
+### Visual Design & Layout
+
+#### Structure
+```
+Header (existing hamburger + theme toggle)
+────────────────────────────────────────
+Main Content (centered, full-width, single column)
+  • 404 heading (large, accent color, themed)
+  • Error message (friendly, conversational)
+  ────────────────────────────────────────
+  Search box (interactive, themed)
+  ────────────────────────────────────────
+  "Recent Articles" section (3-5 articles)
+    - Article title + date + category
+    - Links to articles
+  ────────────────────────────────────────
+  Quick navigation links (Home, Articles, Contact)
+  ────────────────────────────────────────
+  Easter egg (interactive: "Follow the white rabbit")
+────────────────────────────────────────
+Footer (existing)
+```
+
+#### Visual Elements
+- **404 Heading:** Oversized (6xl/4rem), accent purple color, bold weight, animated entry (fade-in + subtle scale from Week 5 keyframes)
+- **Error Message:** 1.125rem/18px, gray-600 (light mode) / gray-400 (dark mode), conversational tone
+- **Search Box:** Styled to match form inputs from Week 4 (border, focus ring, label), full-width or max-width container
+- **Article Cards:** Minimal style (title, date, category badge), inherit article list styling from Week 2-3
+- **Navigation Links:** Button styles from Week 2 (primary, secondary, outline variants)
+- **Easter Egg:** Hidden by default, triggered by specific interaction (click "Follow the white rabbit" link or keyboard shortcut), displays blue pill/red pill choice (inline modal or overlay)
+
+#### Color & Typography
+- **Accent:** Primary purple (#8B5CF6 or project's purple)
+- **Text:** Inherit from project palette (gray-900/light, gray-50/dark)
+- **Heading Font:** Inherit from project (likely mono or sans-serif bold)
+- **Body Font:** Inherit from project
+- **Focus Indicators:** 2px ring from Week 5 (visible in light & dark modes)
+
+#### Responsive Behavior
+- **Mobile (320px):** Single column, search box full-width, article cards stacked, buttons stack vertically
+- **Tablet (768px):** Single column, slightly wider max-width for content, buttons may be inline
+- **Desktop (1200px+):** Single column, centered max-width (~600-800px), all elements readable
+
+#### Dark/Light Mode
+- **Light Mode:** Light background, dark text, purple accents, focus rings with high contrast
+- **Dark Mode:** Dark background, light text, purple accents, focus rings with high contrast (inherited from Week 5)
+
+### Functionality & Interactivity
+
+#### Search Box
+- **Type:** Client-side search or Hugo search integration
+- **Behavior:** On input, filter/search site content in real-time or on Enter
+- **Display:** Show matching results (articles, pages) or "no results" message
+- **Accessibility:** Label associated with input, ARIA live region for search results, keyboard-navigable results
+
+#### Recent Articles Section
+- **Content:** Auto-pulled from Hugo's recent articles (3-5 most recent)
+- **Display:** Title, date (formatted EN/IT), category badge, link to article
+- **Accessibility:** Semantic list, headings, links keyboard-navigable, article titles descriptive
+
+#### Easter Egg (Optional Interactive Element)
+- **Trigger:** Click "Follow the white rabbit" link or press a keyboard shortcut (e.g., Shift+? or Alt+W)
+- **Display:** Modal or inline section with blue pill/red pill choice (humorous, non-intrusive)
+  - Blue pill: Stay on 404 page (or navigate to a funny "you chose the blue pill" page)
+  - Red pill: Navigate to a random article (or home page with a surprise)
+- **Accessibility:** Modal must have focus trap (from Week 5), close button, keyboard-dismissible (Escape key)
+- **Implementation:** Alpine.js for toggle, CSS animations for reveal
+
+#### Language Switching
+- **EN/IT:** Page content, search results, article titles, labels all in current language
+- **Logic:** Uses existing language switcher from header, maintains language context in URLs
+- **i18n Strings:** All UI text (404 heading, error message, button labels, search placeholder) in `i18n/en.yaml` and `i18n/it.yaml`
+
+### Accessibility Requirements (WCAG 2.1 AA)
+
+#### Semantic HTML
+- One `<h1>` (404 heading, may be visual-only via CSS if needed, but semantically present)
+- `<h2>` for "Search" and "Recent Articles" sections (proper hierarchy)
+- `<main>` wrapper around content
+- Semantic `<article>` for each article in recent list
+- `<form>` for search box with `<label>` for input
+- `<nav>` for quick navigation links (if grouped)
+
+#### Keyboard Navigation
+- **Tab order:** Natural top-to-bottom flow (search box → articles → links → easter egg trigger)
+- **Search box:** Focusable, Enter submits, results keyboard-navigable
+- **Article links:** All keyboard-accessible, focus rings visible
+- **Buttons:** Enter or Space activates, focus rings visible
+- **Easter egg modal:** Focus trap (first focusable element when opened, Escape closes)
+
+#### Focus Indicators
+- **All interactive elements:** 2px focus ring (visible in light & dark modes, sufficient contrast)
+- **Contrast:** Focus ring must meet WCAG AA (4.5:1 minimum for text)
+- **Visibility:** Ring should not obscure content, placed outside element when possible
+
+#### Color Contrast
+- **Text:** Body text ≥4.5:1 contrast ratio (light & dark modes)
+- **Links:** Link color ≥4.5:1 contrast with background
+- **Buttons:** Button text ≥4.5:1 contrast with button background
+- **Focus rings:** Ring color ≥3:1 contrast with background
+
+#### Screen Reader Support
+- **Heading:** "404", announced as heading level 1
+- **Error message:** Announced as paragraph
+- **Search box:** Label announced ("Search site"), input type clear
+- **Article links:** Link text descriptive (article title + date/category context)
+- **Buttons:** Text clear and descriptive
+- **Easter egg:** Modal announced with role="dialog", close button labeled
+
+#### Motion & Animation
+- **Animations:** Use keyframes from Week 5 (fade-in, subtle scale)
+- **prefers-reduced-motion:** Disable animations for users with this preference (from Week 5 implementation)
+- **Transitions:** Keep smooth but brief (200-300ms)
+
+#### Responsive & Touch
+- **Touch targets:** All buttons and links ≥44px (WCAG 2.5.5)
+- **Touch spacing:** Links/buttons have adequate spacing to avoid accidental activation
+- **Viewport:** Responsive at 320px, 768px, 1200px (tested in Week 6)
+
+---
+
+## Part 2: Repository Page (Slackware Packages Guide)
+
+### Purpose & Audience
+- **Purpose:** Guide users on how to use the Slackware package repository, with links to GitHub SlackBuild repos
+- **Audience:** Slackware users interested in pre-built packages and the SlackBuild source files
+- **Success Criteria:** Users understand how to add the repository, install packages, and find the GitHub source repos
+
+### Visual Design & Layout
+
+#### Structure
+```
+Header (existing hamburger + theme toggle)
+────────────────────────────────────────
+Hero Section (full-width, accent background or subtle gradient)
+  • Title: "Slackware Repository"
+  • Subtitle: Brief intro
+  • Quick-start command (code block, copyable)
+  ────────────────────────────────────────
+Main Content (centered, single column, no sidebar)
+  ────────────────────────────────────────
+  Section: "Installation"
+    - Instructions for adding repo
+    - Code blocks with commands
+    - Compatibility notes (Slackware versions)
+  ────────────────────────────────────────
+  Section: "Usage"
+    - How to install/update packages
+    - Code blocks with examples
+    - Common package management tasks
+  ────────────────────────────────────────
+  Section: "Available Packages"
+    - Brief list or table of packages
+    - Version info
+    - Links to GitHub repos
+  ────────────────────────────────────────
+  Section: "GitHub SlackBuild Repositories" (or similar title)
+    - Cards for each repo
+      • Project image/icon
+      • Project name
+      • Short description
+      • GitHub link
+      • Tech stack or tags
+────────────────────────────────────────
+Footer (existing)
+```
+
+#### Hero Section
+- **Background:** Subtle gradient or solid accent color with opacity, or dark overlay on themed background
+- **Title:** Large, bold (4xl/3rem), accent purple or white
+- **Subtitle:** 1.125rem/18px, descriptive intro
+- **Quick-start Command:** Code block, monospace font, dark background, syntax-highlighted or plain, with copy button (optional)
+- **Layout:** Centered, max-width ~800px, padding/margin for breathing room
+
+#### Organized Sections (Installation, Usage, Available Packages)
+- **Headings:** `<h2>` (1.875rem/30px), accent color or bold
+- **Paragraphs:** Standard body text (1rem/16px), gray-600/400
+- **Code Blocks:** Dark background (inherited from Week 1 code styling), monospace font, syntax highlighting if available, scrollable horizontally if needed
+- **Lists:** Semantic `<ol>` or `<ul>`, bullet/number styling inherited from project
+
+#### GitHub Repo Cards
+- **Layout:** Grid (1 column mobile, 2-3 columns tablet/desktop) or stacked cards
+- **Card Content:**
+  - **Image/Icon:** Project image or Slackware logo, ~200px height, responsive
+  - **Title:** Project/repo name (h3)
+  - **Description:** Short text (2-3 sentences), gray-600/400
+  - **Tech Tags:** Optional badges (if repo uses specific languages/tools)
+  - **GitHub Link:** Button or link (styled as button)
+- **Card Styling:** Border, subtle shadow, hover effect (from Week 2 card styles), dark/light mode compatible
+
+#### Color & Typography
+- **Hero:** Accent purple or themed gradient, white or dark text
+- **Headings:** Project bold sans-serif or mono, accent purple for h2
+- **Body:** Standard gray-900/50, inherited fonts
+- **Code Blocks:** Dark background (#1F2937 or darker), light text (#F3F4F6), monospace font
+- **Cards:** Subtle borders, inherited shadow/hover effects
+
+#### Responsive Behavior
+- **Mobile (320px):** Single column, hero full-width, code blocks scrollable, cards stacked
+- **Tablet (768px):** Single column content, cards 2 per row, code blocks still scrollable
+- **Desktop (1200px+):** Single column content (max-width ~900px), cards 2-3 per row, code blocks fit viewport
+
+#### Dark/Light Mode
+- **Light Mode:** Light background, dark text, purple accents, code blocks with dark bg/light text
+- **Dark Mode:** Dark background, light text, purple accents, code blocks match dark theme
+- **Card Styling:** Borders and shadows adapt to mode (inherited from Week 2-3)
+
+### Functionality & Interactivity
+
+#### Code Block Copy Button
+- **Interaction:** Hover on code block reveals copy button, click copies to clipboard
+- **Feedback:** Toast message "Copied!" (from Week 4 toast component) or button state change
+- **Accessibility:** Button labeled, keyboard-accessible (Tab + Enter)
+
+#### Expandable Sections (Optional)
+- **Interaction:** "Installation" or "Usage" sections can be expandable details/collapsible
+- **Behavior:** Click to expand/collapse, smooth animation
+- **Default:** All sections open (or first section expanded)
+- **Accessibility:** `<details>/<summary>` semantics or ARIA expanded for custom implementation
+
+#### GitHub Links
+- **Behavior:** Click opens repo in new tab/window (or same window, user preference)
+- **Styling:** Link styling from Week 3, with external link icon (optional, if project uses it)
+- **Accessibility:** Link text clear, target="_blank" handled with ARIA
+
+#### Language Switching
+- **EN/IT:** All section headings, instructions, descriptions in current language
+- **i18n Strings:** All UI text in `i18n/en.yaml` and `i18n/it.yaml`
+- **Content:** May have separate content files for EN/IT or manage via shortcodes
+
+### Accessibility Requirements (WCAG 2.1 AA)
+
+#### Semantic HTML
+- `<h1>` for page title (or hero title)
+- `<h2>` for main sections (Installation, Usage, etc.)
+- `<h3>` for subsections or repo names
+- `<main>` wrapper around content
+- `<article>` or `<section>` for each repo card
+- `<code>` or `<pre><code>` for code blocks
+- `<button>` for copy buttons and CTA links
+- `<nav>` if repo cards are navigation-heavy
+
+#### Keyboard Navigation
+- **Tab order:** Natural top-to-bottom (hero → sections → code blocks → repo cards → links)
+- **Code blocks:** Copy button focusable and activable (Enter/Space)
+- **Expandable sections:** Summary element keyboard-activable (Enter)
+- **Repo links:** All keyboard-accessible, focus rings visible
+- **All buttons:** Enter or Space activates
+
+#### Focus Indicators
+- **All interactive elements:** 2px focus ring (visible in light & dark modes)
+- **Contrast:** Ring ≥3:1 contrast with background
+- **Visibility:** Should not obscure content
+
+#### Color Contrast
+- **Text:** Body text ≥4.5:1 contrast (light & dark modes)
+- **Links:** Link color ≥4.5:1 contrast with background
+- **Code blocks:** Text in code blocks ≥4.5:1 contrast
+- **Buttons:** Button text ≥4.5:1 contrast with background
+
+#### Screen Reader Support
+- **Page title:** Clear, "Slackware Repository" or similar
+- **Hero:** Subtitle announced, quick-start command in `<code>` element (or `<pre><code>`)
+- **Section headings:** All announced with level (h2, h3)
+- **Code blocks:** Announce as code (screen reader announces "code block"), text within readable
+- **Copy button:** Labeled "Copy" or "Copy to clipboard", feedback announced
+- **Repo cards:** Card title, description, link text all clear and descriptive
+- **Links:** External link icon indicated (if used) with aria-label or title
+
+#### Motion & Animation
+- **Animations:** Use keyframes from Week 5 (fade-in, slide, scale)
+- **Expandable sections:** Smooth transitions (200-300ms)
+- **Card hover effects:** Subtle, non-distracting
+- **prefers-reduced-motion:** Disable animations for users with preference
+
+#### Responsive & Touch
+- **Touch targets:** All buttons and links ≥44px (WCAG 2.5.5)
+- **Touch spacing:** Cards and repo items have adequate spacing
+- **Viewport:** Responsive at 320px, 768px, 1200px
+
+---
+
+## Part 3: Implementation Strategy
+
+### Files to Create/Modify
+
+#### New Files
+1. **`layouts/404.html`** — 404 error page layout (Hugo special template)
+2. **`content/en/repository/_index.md`** — Repository page content (English, fully editable markdown)
+3. **`content/it/repository/_index.md`** — Repository page content (Italian, fully editable markdown)
+4. **`themes/danix-xyz-hacker/layouts/repository/single.html`** (optional) — Custom layout for repository section if needed
+5. **`data/repos.yaml`** or **`data/en/repos.yaml`** + **`data/it/repos.yaml`** — Structured data for GitHub repo cards (YAML, editable)
+
+#### Modified Files
+1. **`i18n/en.yaml`** — Add i18n strings for 404 and Repository pages
+2. **`i18n/it.yaml`** — Add i18n strings for 404 and Repository pages (Italian)
+3. **`tailwind.config.js`** (if needed) — Add custom utilities for 404/repository specific styling
+4. **`themes/danix-xyz-hacker/assets/js/main.js`** (if needed) — Add search functionality for 404, copy-to-clipboard for repo page
+
+#### No Changes Required
+- Existing components (header, footer, hamburger menu, form inputs, buttons, cards)
+- Existing animations and keyframes from Week 5
+- Existing accessibility patterns (focus management, ARIA labels)
+
+### i18n Strings Required
+
+#### 404 Page (EN)
+```yaml
+notFound:
+  other: "Page Not Found"
+errorHeading:
+  other: "404"
+errorMessage:
+  other: "Sorry, the page you're looking for doesn't exist."
+searchPlaceholder:
+  other: "Search the site..."
+recentArticles:
+  other: "Recent Articles"
+goHome:
+  other: "Go Home"
+browseArticles:
+  other: "Browse Articles"
+contactSupport:
+  other: "Contact Me"
+followWhiteRabbit:
+  other: "Follow the white rabbit"
+noResults:
+  other: "No results found"
+```
+
+#### 404 Page (IT)
+```yaml
+notFound:
+  other: "Pagina Non Trovata"
+errorHeading:
+  other: "404"
+errorMessage:
+  other: "Scusa, la pagina che cerchi non esiste."
+searchPlaceholder:
+  other: "Cerca nel sito..."
+recentArticles:
+  other: "Articoli Recenti"
+goHome:
+  other: "Torna a Casa"
+browseArticles:
+  other: "Sfoglia Articoli"
+contactSupport:
+  other: "Contattami"
+followWhiteRabbit:
+  other: "Segui il coniglio bianco"
+noResults:
+  other: "Nessun risultato trovato"
+```
+
+#### Repository Page (EN)
+```yaml
+repositoryTitle:
+  other: "Slackware Repository"
+repositorySubtitle:
+  other: "Download and install my curated Slackware packages"
+quickStartTitle:
+  other: "Quick Start"
+copyCommand:
+  other: "Copy"
+copiedMessage:
+  other: "Copied to clipboard!"
+installationTitle:
+  other: "Installation"
+usageTitle:
+  other: "Usage"
+availablePackagesTitle:
+  other: "Available Packages"
+githubReposTitle:
+  other: "GitHub SlackBuild Repositories"
+visitGithub:
+  other: "Visit GitHub"
+```
+
+#### Repository Page (IT)
+```yaml
+repositoryTitle:
+  other: "Repository Slackware"
+repositorySubtitle:
+  other: "Scarica e installa i miei pacchetti Slackware curati"
+quickStartTitle:
+  other: "Inizio Rapido"
+copyCommand:
+  other: "Copia"
+copiedMessage:
+  other: "Copiato negli appunti!"
+installationTitle:
+  other: "Installazione"
+usageTitle:
+  other: "Utilizzo"
+availablePackagesTitle:
+  other: "Pacchetti Disponibili"
+githubReposTitle:
+  other: "Repository GitHub SlackBuild"
+visitGithub:
+  other: "Visita GitHub"
+```
+
+### Component Integration Points
+
+#### 404 Page
+- **Recent articles:** Use Hugo's `first 5 (where .Section "articles")` or similar to fetch latest articles
+- **Search:** Client-side search via existing Alpine.js setup or lightweight library
+- **Easter egg:** Alpine.js for modal toggle, focus trap from Week 5
+- **Form styling:** Inherit from Week 4 form components
+- **Button styling:** Inherit from Week 2 button classes
+- **Animations:** Use keyframes from Week 5 (fade-in, scale)
+
+#### Repository Page — Content Management via Markdown
+
+**Markdown-Driven Architecture:**
+All repository page content is fully editable via markdown files and YAML data files. No hardcoded content in templates.
+
+**File Structure:**
+- **`content/en/repository/_index.md`** — English page content:
+  - Page frontmatter (title, date, etc.)
+  - Hero section content (title, subtitle, quick-start command via markdown code fence)
+  - Installation, Usage, Available Packages sections (regular markdown headings and paragraphs)
+  - Quick-start command as markdown code block (triple backticks, bash syntax)
+  - Each section written as markdown (headings, paragraphs, lists, code blocks)
+
+- **`content/it/repository/_index.md`** — Italian page content (same structure, Italian language)
+
+- **`data/repos.yaml`** — GitHub repo card data (structured, language-agnostic):
+  ```yaml
+  repos:
+    - name: slackbuild-package-1
+      description_key: "repo1_description"  # i18n key for description
+      github_url: "https://github.com/danix/slackbuild-package-1"
+      image: "images/repo-icons/package-1.png"  # path to image asset
+      tags: ["Slackware", "Build System"]
+    - name: slackbuild-package-2
+      description_key: "repo2_description"
+      github_url: "https://github.com/danix/slackbuild-package-2"
+      image: "images/repo-icons/package-2.png"
+      tags: ["Slackware", "Package"]
+  ```
+
+**Markdown Content Example (English):**
+```markdown
++++
+title = "Slackware Repository"
+date = "2026-04-17"
++++
+
+# Slackware Repository
+
+Your custom intro paragraph here.
+
+## Installation
+
+Full installation instructions in markdown format.
+
+\`\`\`bash
+# Copy this command to add the repository
+your-command-here
+\`\`\`
+
+More details...
+
+## Usage
+
+Usage instructions in markdown.
+
+\`\`\`bash
+# Example usage
+command example
+\`\`\`
+
+## Available Packages
+
+List of available packages in markdown table or list format.
+```
+
+**Template Rendering:**
+- The layout template (`layouts/repository/single.html` or similar) renders:
+  1. Parsed markdown content (Installation, Usage, Available Packages sections) from `_index.md`
+  2. Hero section extracted from markdown frontmatter or parsed from top of content
+  3. GitHub repo cards dynamically generated from `data/repos.yaml` with i18n descriptions
+  4. All i18n strings pulled from `i18n/en.yaml` and `i18n/it.yaml`
+
+**To Modify Content:**
+1. **Hero section / introduction:** Edit `content/en/repository/_index.md` or `content/it/repository/_index.md`
+2. **Installation / Usage / Package sections:** Edit markdown content in `_index.md` files
+3. **Quick-start command:** Update markdown code fence in `_index.md`
+4. **GitHub repo cards:** Add/edit repos in `data/repos.yaml`, add descriptions to `i18n/en.yaml` and `i18n/it.yaml`
+5. **Repo descriptions (translated):** Edit i18n files with `repo<N>_description` keys
+
+**No template editing required** — all content changes via markdown and YAML files.
+
+---
+
+### Component Integration Points (Continued)
+
+#### Repository Page
+- **Hero section:** Custom styled with accent colors, parsed from markdown frontmatter/content
+- **Code blocks:** Inherit from existing code styling (if present), or add minimal CSS for markdown-generated `<pre><code>`
+- **Cards:** Inherit from Week 2 card styling (border, shadow, hover effects), generated from `data/repos.yaml`
+- **Copy button:** Custom Alpine.js component with toast notification from Week 4, attached to code blocks via shortcode or template filter
+- **Link styling:** Inherit from navigation/link classes from Week 3
+- **Images:** Use responsive image handling, repo card images loaded from `images/repo-icons/` directory
+
+### Testing Strategy (Week 6)
+
+#### 404 Page Tests
+1. Manual navigation to non-existent URLs (EN/IT)
+2. Search box functionality (if implemented)
+3. Recent articles loaded and displayed correctly
+4. Easter egg trigger and interaction
+5. Keyboard navigation (Tab, Shift+Tab, Enter, Escape)
+6. Focus indicators visible in light & dark modes
+7. Screen reader testing (page structure, links, interactive elements)
+8. Responsive testing (320px, 768px, 1200px)
+9. Browser compatibility (Chrome, Firefox, Safari)
+10. Color contrast verification (WCAG AA)
+
+#### Repository Page Tests
+1. Page loads and renders correctly (EN/IT)
+2. Hero section displays with quick-start command
+3. Code blocks display with proper syntax highlighting (if applicable)
+4. Copy-to-clipboard functionality works
+5. GitHub repo cards display with images and links
+6. Expandable sections (if implemented) work smoothly
+7. Keyboard navigation (Tab, Shift+Tab, Enter on expandable sections)
+8. Focus indicators visible in light & dark modes
+9. Screen reader testing (headings, code blocks, links)
+10. Responsive testing (320px, 768px, 1200px)
+11. Browser compatibility (Chrome, Firefox, Safari)
+12. Color contrast verification (WCAG AA)
+
+### Build & Deployment
+
+#### CSS Build
+- Run `npm run build` after adding any new Tailwind classes
+- Verify `main.min.css` generated successfully
+- Test in browser to confirm styling applied
+
+#### Hugo Build
+- Run `hugo server` to test locally
+- Verify both pages render correctly in EN/IT
+- Check for build errors or warnings
+
+#### Merge to Master
+- Create feature branch `week-6-pages` from master
+- Implement both pages
+- Run all Week 6 tests (from plan)
+- Commit all changes with clear messages
+- Merge back to master with PR/commit
+- Verify no regressions in other pages
+
+---
+
+## Design Approval Checklist
+
+- [ ] 404 page layout and visual design approved
+- [ ] 404 page functionality (search, recent articles, easter egg) approved
+- [ ] 404 accessibility requirements approved
+- [ ] Repository page layout and visual design approved
+- [ ] Repository page functionality (hero, sections, cards, copy button) approved
+- [ ] Repository page accessibility requirements approved
+- [ ] i18n strings coverage approved
+- [ ] Implementation strategy and file structure approved
+- [ ] Testing strategy approved
+
+**Next Step:** After approval, invoke `superpowers:writing-plans` skill to create detailed implementation plan.
+
+---
+
+## Reference: Existing Theme Patterns
+
+### From Week 1-2 (Colors, Typography, Components)
+- Tailwind utility classes for spacing, sizing, colors
+- Button classes: `btn btn-primary`, `btn btn-secondary`, `btn btn-outline`
+- Card styling with borders and shadows
+- Color palette: primary purple (#8B5CF6), grays, accent colors
+
+### From Week 3 (Navigation, Breadcrumbs)
+- Header with hamburger menu
+- Language switcher in menu
+- Theme toggle in header
+- Navigation link styling
+
+### From Week 4 (Forms & Interactions)
+- Form input styling with label association
+- Focus ring styling (2px purple ring)
+- Modal components with focus trap
+- Toast notifications
+- Form validation (if applicable)
+
+### From Week 5 (Animations & Accessibility)
+- Keyframe animations: fade-in, slide, scale
+- prefers-reduced-motion support
+- Focus management and ARIA labels
+- Modal focus trap implementation
+- Accessible heading hierarchies
+- Semantic HTML best practices
+
+---
+
+## Notes
+
+- Both pages inherit visual cohesion from Weeks 1-5; no new components needed
+- Accessibility is built-in, not added later (following Week 5 patterns)
+- Multilingual support uses existing i18n structure (Hugo's native system)
+- Responsive design uses existing Tailwind breakpoints (sm, md, lg)
+- Dark/light mode uses existing CSS custom properties and class toggles
+- All animations respect prefers-reduced-motion (from Week 5)
-- 
cgit v1.2.3