refactor(components): ♻️ simplify NextImage component interface

- Remove blur hash functionality and related props
  - Update dependencies: ESLint, TypeScript, Prettier, Tailwind
  - Move Sentry from dependencies to devDependencies
  - Add WCAG to spell check dictionary for accessibility

Author: navin-moorthy

CLAUDE.md

@@ -0,0 +1,100 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Core Development
+
+- `pnpm dev` - Start development server with Turbopack
+- `pnpm build` - Build production version
+- `pnpm start` - Start production server
+- `pnpm build:start` - Build and start production server
+
+### Code Quality & Linting
+
+- `pnpm lint` - Run all linters (Prettier, ESLint, TypeScript, Knip, Markdown, Spell check, CSS)
+- `pnpm lint:types` - TypeScript type checking
+- `pnpm lint:eslint` - ESLint linting
+- `pnpm lint:prettier` - Prettier formatting check
+- `pnpm fix` - Auto-fix ESLint issues
+- `pnpm fix:prettier` - Auto-format with Prettier
+
+### Testing & Analysis
+
+- `pnpm build:analyze` - Bundle analysis with webpack-bundle-analyzer
+- `pnpm build:sourcemap` - Build with source maps and analysis
+- `pnpm lint:knip` - Check for unused dependencies, exports, and types
+
+### Maintenance
+
+- `pnpm clean` - Clean build artifacts and caches
+- `pnpm check:update` - Interactive dependency updates
+- `pnpm check:packages` - Check for duplicate packages
+
+## Architecture Overview
+
+### Technology Stack
+
+- **Framework**: Next.js 15 with App Router
+- **Runtime**: React 19 with TypeScript in strict mode
+- **Styling**: TailwindCSS 4 with PostCSS
+- **Build Tool**: Turbopack (development), Webpack (production)
+- **Package Manager**: pnpm
+- **PWA**: Serwist service worker
+- **Error Tracking**: Sentry (configured but commented out)
+- **Development Tools**: Turbo monorepo tooling
+
+### Project Structure
+
+- `src/app/` - Next.js App Router pages and layouts
+- `src/components/` - Reusable React components
+- `src/ui/` - Root-level UI components (Providers, TailwindIndicator)
+- `src/utils/` - Utility functions and configurations
+- `src/styles/` - Global styles and font configurations
+- `src/icons/` - SVG icon system with automated builds
+- `scripts/` - Build scripts and automation tools
+
+### Key Configurations
+
+- **TypeScript**: Strict mode enabled with path aliases (@/components/_, @/utils/_, etc.)
+- **ESLint**: Comprehensive setup with React, TypeScript, accessibility, and Next.js rules
+- **Build**: Turbopack for development, configurable Sentry and bundle analysis
+- **PWA**: Service worker disabled in development/local, enabled in production
+
+### Development Patterns
+
+- Uses App Router with TypeScript strict mode
+- Path aliases for clean imports (@/components/, @/utils/, etc.)
+- Automated icon building system
+- Comprehensive linting with Turbo pipeline orchestration
+- Environment-specific configurations (development vs production)
+
+### Environment Variables
+
+Required environment variables are validated at build time unless `SKIP_ENV_VALIDATION=true`.
+
+### Code Quality Tools
+
+The project uses a comprehensive toolchain:
+
+- ESLint with React, TypeScript, and accessibility rules
+- Prettier for code formatting
+- Stylelint for CSS
+- Markdownlint for documentation
+- CSpell for spell checking
+- Knip for dead code elimination
+- Commitlint for conventional commits
+
+## Project Documentation
+
+Important documentation files are maintained in the `docs/` directory. When starting work on this project, please load these memory files:
+
+- **`docs/project_overview.md`** - Project purpose, tech stack, and architecture
+- **`docs/suggested_commands.md`** - All development commands organized by category
+- **`docs/code_style_conventions.md`** - TypeScript, React, and styling standards
+- **`docs/frontend_rules.md`** - Comprehensive accessibility and frontend code quality rules
+- **`docs/task_completion_checklist.md`** - Quality gates and completion requirements
+- **`docs/project_structure.md`** - Directory layout and key files explanation
+
+These files contain essential information for understanding and working with the codebase effectively.

cspell.json

@@ -48,6 +48,7 @@
 		"timelessco",
 		"unenc",
 		"unrs",
-		"wbmp"
+		"wbmp",
+		"WCAG"
 	]
 }

docs/code_style_conventions.md

@@ -0,0 +1,265 @@
+# Code Style Conventions
+
+## TypeScript Standards
+
+### Strictness Level: MAXIMUM
+
+- **Strict Mode**: Fully enabled with all flags
+- **No `any` Types**: Use `unknown` if type is truly unknown
+- **No Type Assertions**: Use type guards instead of `as` casting
+- **Readonly Props**: Use `readonly` for component props
+- **Null Safety**: Proper null checking with type guards
+
+### Type Patterns
+
+```typescript
+// Component Props Pattern
+export interface ComponentProps {
+	readonly children?: ReactNode;
+	readonly className?: string;
+}
+
+// Utility Type Examples
+export type NonEmptyArray<T> = [T, ...T[]];
+
+// Type Guards
+export function isNonNullable<T>(value: T): value is NonNullable<T> {
+	return value != null;
+}
+```
+
+## Naming Conventions
+
+### Files & Directories
+
+- **Components**: `PascalCase.tsx` (e.g., `StyledButton.tsx`)
+- **Utilities**: `camelCase.ts` (e.g., `assertionUtils.ts`)
+- **Types**: `PascalCase` with descriptive names
+- **Constants**: `UPPER_SNAKE_CASE` for site config
+
+### Code Naming
+
+```typescript
+// Functions: camelCase with descriptive verbs
+const getUserProfile = () => {};
+const validateEmailAddress = () => {};
+
+// Types: PascalCase with clear purpose
+interface UserProfile extends BaseProfile {}
+type ApiResponse<T> = Success<T> | Error;
+
+// Constants: UPPER_SNAKE_CASE
+const SITE_NAME = "Next TS App";
+const API_BASE_URL = "https://api.example.com";
+```
+
+## Component Patterns
+
+### Standard Component Structure
+
+```typescript
+import { type ReactNode } from "react";
+import { cn } from "@/utils/index";
+
+export interface ComponentProps {
+  readonly children?: ReactNode;
+  readonly className?: string;
+}
+
+export function Component(props: ComponentProps) {
+  const { children, className, ...rest } = props;
+
+  return (
+    <div className={cn("base-styles", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+```
+
+### Composition Patterns
+
+```typescript
+// Extend existing components rather than recreate
+export function StyledButton(props: StyledButtonProps) {
+  const { className, ...rest } = props;
+  return (
+    <Button
+      className={cn(baseButtonStyles, className)}
+      {...rest}
+    />
+  );
+}
+
+// Use render props for complex composition
+<Command render={<AriaCurrentLink {...linkProps} />}>
+  {children}
+</Command>
+```
+
+## Import/Export Conventions
+
+### Path Aliases (Required)
+
+```typescript
+// Always use path aliases for internal imports
+import { Component } from "@/components/Component";
+import { utility } from "@/utils/utility";
+import { CONFIG } from "@/utils/siteConfig";
+
+// Not: import { Component } from "../../components/Component";
+```
+
+### Import Order (Auto-sorted by Prettier)
+
+1. Built-in Node.js modules
+2. React/Next.js framework modules
+3. Third-party packages
+4. Internal modules (by priority):
+   - `@/lib/*`
+   - `@/ui/*`
+   - `@/components/*`
+   - `@/hooks/*`
+   - `@/stores/*`
+   - `@/icons/*`
+   - `@/utils/*`
+   - `@/styles/*`
+   - `@/app/*`
+5. Relative imports
+6. CSS files
+
+### Export Patterns
+
+```typescript
+// Named exports preferred
+export { Component, type ComponentProps };
+
+// Barrel exports in index files
+export * from "./Component";
+export * from "./utils";
+
+// Default exports only for pages and layouts
+export default function Page() {}
+```
+
+## CSS and Styling
+
+### TailwindCSS Patterns
+
+```typescript
+// Use cn() utility for class composition
+import { cn } from "@/utils/index";
+
+const styles = cn(
+	"base-styles",
+	"responsive-modifier:style",
+	condition && "conditional-style",
+	className,
+);
+```
+
+### Custom CSS (when needed)
+
+```css
+/* BEM methodology for custom CSS */
+.component__element--modifier {
+	/* Properties in clean order (via Stylelint) */
+}
+
+/* CSS variables for theming */
+@theme {
+	--color-primary: hsl(210 100% 50%);
+	--font-sans: var(--font-inter);
+}
+```
+
+## Accessibility Standards
+
+### Built-in ARIA Support
+
+```typescript
+// Proper ARIA handling in components
+const ariaProps = ariaLabel
+  ? { role: "img", "aria-label": ariaLabel }
+  : { "aria-hidden": "true", focusable: "false" };
+
+return <svg {...ariaProps} />;
+```
+
+### Semantic HTML
+
+- Use semantic HTML elements
+- Provide proper heading hierarchy
+- Include alternative text for images
+- Ensure keyboard navigation
+
+## Error Handling
+
+### Type-Safe Error Handling
+
+```typescript
+// Use Result types instead of throwing
+type Result<T, E = Error> =
+  | { success: true; data: T }
+  | { success: false; error: E };
+
+// Graceful degradation in components
+if (!data) {
+  return <div>Loading...</div>;
+}
+```
+
+## Code Organization
+
+### Utility Functions
+
+- **Pure Functions**: No side effects when possible
+- **Single Responsibility**: Each function has one clear purpose
+- **Type Guards**: Proper TypeScript type narrowing
+- **Immutable**: Work with immutable data structures
+
+### Component Organization
+
+- **Small Components**: Focus on single responsibility
+- **Composition**: Build complex UI through composition
+- **Props Interface**: Clear, readonly prop definitions
+- **Default Exports**: Only for pages, use named exports elsewhere
+
+## Performance Considerations
+
+### Bundle Optimization
+
+- **Dynamic Imports**: Use for large components
+- **Image Optimization**: Use Next.js Image component
+- **Bundle Analysis**: Regular bundle size monitoring
+
+### React Patterns
+
+- **Functional Components**: Use hooks over class components
+- **Memo Usage**: Only when performance measurement shows benefit
+- **Avoid Premature Optimization**: Profile before optimizing
+
+## Quality Assurance
+
+### ESLint Rules Enforced
+
+- Strict TypeScript checking
+- React hooks validation
+- Import organization
+- Accessibility compliance
+- No unused variables
+- Consistent naming
+
+### Automated Formatting
+
+- **Prettier**: Handles all code formatting
+- **Import Sorting**: Automatic import organization
+- **TailwindCSS**: Class sorting for consistency
+
+### Git Practices
+
+- **Conventional Commits**: Enforced commit message format
+- **Pre-commit Hooks**: Automatic formatting and spell checking
+- **Linear History**: Prefer rebase over merge commits
+
+This coding style ensures consistency, maintainability, and high code quality across the entire project.