Refactor useAuth hook, settings components, and docs for formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.

frontend/src/components/home/AnimatedTerminal.tsx

@@ -94,7 +94,10 @@ export function AnimatedTerminal() {
           </div>
 
           {/* Terminal Content */}
-          <div className="bg-slate-950 p-6 font-mono text-sm overflow-x-auto" style={{ minHeight: '400px' }}>
+          <div
+            className="bg-slate-950 p-6 font-mono text-sm overflow-x-auto"
+            style={{ minHeight: '400px' }}
+          >
             <div className="space-y-2">
               {displayedLines.map((line, index) => (
                 <motion.div
@@ -106,15 +109,18 @@ export function AnimatedTerminal() {
                     line.isSuccess
                       ? 'text-green-400'
                       : line.text.startsWith('#')
-                      ? 'text-slate-500'
-                      : line.text.startsWith('$')
-                      ? 'text-blue-400'
-                      : 'text-slate-300'
+                        ? 'text-slate-500'
+                        : line.text.startsWith('$')
+                          ? 'text-blue-400'
+                          : 'text-slate-300'
                   }`}
                 >
                   {line.text || '\u00A0'}
                   {index === displayedLines.length - 1 && isAnimating && !line.isSuccess && (
-                    <span className="inline-block w-2 h-4 ml-1 bg-slate-400 animate-pulse" aria-hidden="true" />
+                    <span
+                      className="inline-block w-2 h-4 ml-1 bg-slate-400 animate-pulse"
+                      aria-hidden="true"
+                    />
                   )}
                 </motion.div>
               ))}

frontend/src/components/home/CTASection.tsx

@@ -15,7 +15,6 @@ interface CTASectionProps {
 }
 
 export function CTASection({ onOpenDemoModal }: CTASectionProps) {
-
   return (
     <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-background">
       {/* Background Pattern */}
@@ -48,11 +47,7 @@ export function CTASection({ onOpenDemoModal }: CTASectionProps) {
 
           {/* CTAs */}
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
-            <Button
-              asChild
-              size="lg"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" className="gap-2 text-base group">
               <a
                 href="https://github.com/your-org/fast-next-template"
                 target="_blank"
@@ -72,22 +67,23 @@ export function CTASection({ onOpenDemoModal }: CTASectionProps) {
               variant="outline"
               className="gap-2 text-base group"
             >
-              <Play className="h-5 w-5 group-hover:scale-110 transition-transform" aria-hidden="true" />
+              <Play
+                className="h-5 w-5 group-hover:scale-110 transition-transform"
+                aria-hidden="true"
+              />
               Try Live Demo
             </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="ghost"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" variant="ghost" className="gap-2 text-base group">
               <a
                 href="https://github.com/your-org/fast-next-template#documentation"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Read Documentation
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
+                <ArrowRight
+                  className="h-4 w-4 group-hover:translate-x-1 transition-transform"
+                  aria-hidden="true"
+                />
               </a>
             </Button>
           </div>
@@ -104,8 +100,8 @@ export function CTASection({ onOpenDemoModal }: CTASectionProps) {
               Need help getting started? Check out the{' '}
               <Link href="/dev" className="text-primary hover:underline">
                 component showcase
-              </Link>
-              {' '}or explore the{' '}
+              </Link>{' '}
+              or explore the{' '}
               <Link href="/admin" className="text-primary hover:underline">
                 admin dashboard demo
               </Link>

frontend/src/components/home/ContextSection.tsx

@@ -26,9 +26,7 @@ export function ContextSection() {
           viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="text-3xl md:text-4xl font-bold">
-            What You Get Out of the Box
-          </h2>
+          <h2 className="text-3xl md:text-4xl font-bold">What You Get Out of the Box</h2>
           <p className="text-lg text-muted-foreground leading-relaxed">
             This isn&apos;t a boilerplate generator or a paid SaaS template. It&apos;s a complete,
             production-ready codebase you can clone and customize. Everything you need to build

frontend/src/components/home/DemoCredentialsModal.tsx

@@ -51,7 +51,8 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
         <DialogHeader>
           <DialogTitle>Try the Live Demo</DialogTitle>
           <DialogDescription>
-            Use these credentials to explore the template&apos;s features. Both accounts are pre-configured with sample data.
+            Use these credentials to explore the template&apos;s features. Both accounts are
+            pre-configured with sample data.
           </DialogDescription>
         </DialogHeader>
 

frontend/src/components/home/DemoSection.tsx

@@ -54,7 +54,8 @@ export function DemoSection() {
       >
         <h2 className="text-3xl md:text-4xl font-bold mb-4">See It In Action</h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Explore the template&apos;s capabilities with live demos. Login with demo credentials to test features.
+          Explore the template&apos;s capabilities with live demos. Login with demo credentials to
+          test features.
         </p>
       </motion.div>
 
@@ -75,9 +76,7 @@ export function DemoSection() {
             </div>
 
             <h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
-            <p className="text-muted-foreground mb-4 leading-relaxed flex-1">
-              {demo.description}
-            </p>
+            <p className="text-muted-foreground mb-4 leading-relaxed flex-1">{demo.description}</p>
 
             {demo.credentials && (
               <div className="mb-4 p-3 rounded-md bg-muted font-mono text-xs border">

frontend/src/components/home/FeatureGrid.tsx

@@ -95,7 +95,8 @@ export function FeatureGrid() {
           Comprehensive Features, No Assembly Required
         </h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Everything you need to build production-grade web applications. Clone, customize, and ship.
+          Everything you need to build production-grade web applications. Clone, customize, and
+          ship.
         </p>
       </motion.div>
 

frontend/src/components/home/Header.tsx

@@ -31,8 +31,7 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
           <Link href="/" className="font-bold text-xl hover:opacity-80 transition-opacity">
             <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
               FastNext
-            </span>
-            {' '}
+            </span>{' '}
             <span className="text-foreground">Template</span>
           </Link>
 
@@ -64,18 +63,10 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
             </a>
 
             {/* CTAs */}
-            <Button
-              onClick={onOpenDemoModal}
-              variant="default"
-              size="sm"
-            >
+            <Button onClick={onOpenDemoModal} variant="default" size="sm">
               Try Demo
             </Button>
-            <Button
-              asChild
-              variant="outline"
-              size="sm"
-            >
+            <Button asChild variant="outline" size="sm">
               <Link href="/login">Login</Link>
             </Button>
           </nav>
@@ -131,11 +122,7 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
                   >
                     Try Demo
                   </Button>
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="w-full"
-                  >
+                  <Button asChild variant="outline" className="w-full">
                     <Link href="/login" onClick={() => setMobileMenuOpen(false)}>
                       Login
                     </Link>

frontend/src/components/home/HeroSection.tsx

@@ -15,11 +15,13 @@ interface HeroSectionProps {
 }
 
 export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
-
   return (
     <section className="relative overflow-hidden">
       {/* Gradient Background */}
-      <div className="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-background to-background" aria-hidden="true" />
+      <div
+        className="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-background to-background"
+        aria-hidden="true"
+      />
       <div
         className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_30%_20%,rgba(var(--primary-rgb,120,119,198),0.1),transparent_50%)]"
         aria-hidden="true"
@@ -38,7 +40,10 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
             transition={{ duration: 0.5 }}
           >
             <div className="inline-flex items-center gap-2 rounded-full border bg-background/50 px-4 py-1.5 text-sm backdrop-blur">
-              <span className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse" aria-hidden="true" />
+              <span
+                className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse"
+                aria-hidden="true"
+              />
               <span className="font-medium">MIT Licensed</span>
               <span className="text-muted-foreground">•</span>
               <span className="font-medium">97% Test Coverage</span>
@@ -79,20 +84,14 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.3 }}
           >
-            <Button
-              size="lg"
-              onClick={onOpenDemoModal}
-              className="gap-2 text-base group"
-            >
-              <Play className="h-5 w-5 group-hover:scale-110 transition-transform" aria-hidden="true" />
+            <Button size="lg" onClick={onOpenDemoModal} className="gap-2 text-base group">
+              <Play
+                className="h-5 w-5 group-hover:scale-110 transition-transform"
+                aria-hidden="true"
+              />
               Try Live Demo
             </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="outline"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" variant="outline" className="gap-2 text-base group">
               <a
                 href="https://github.com/your-org/fast-next-template"
                 target="_blank"
@@ -100,18 +99,19 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
               >
                 <Github className="h-5 w-5" aria-hidden="true" />
                 View on GitHub
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
+                <ArrowRight
+                  className="h-4 w-4 group-hover:translate-x-1 transition-transform"
+                  aria-hidden="true"
+                />
               </a>
             </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="ghost"
-              className="gap-2 text-base group"
-            >
+            <Button asChild size="lg" variant="ghost" className="gap-2 text-base group">
               <Link href="/dev">
                 Explore Components
-                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
+                <ArrowRight
+                  className="h-4 w-4 group-hover:translate-x-1 transition-transform"
+                  aria-hidden="true"
+                />
               </Link>
             </Button>
           </motion.div>

frontend/src/components/home/PhilosophySection.tsx

@@ -33,22 +33,18 @@ export function PhilosophySection() {
           viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="text-3xl md:text-4xl font-bold mb-6">
-            Why This Template Exists
-          </h2>
+          <h2 className="text-3xl md:text-4xl font-bold mb-6">Why This Template Exists</h2>
           <div className="space-y-4 text-lg text-muted-foreground leading-relaxed">
             <p>
               We built this template after rebuilding the same authentication, authorization, and
-              admin infrastructure for the fifth time. Instead of yet another tutorial or boilerplate
-              generator, we created a complete, tested, documented codebase that you can clone and
-              customize.
+              admin infrastructure for the fifth time. Instead of yet another tutorial or
+              boilerplate generator, we created a complete, tested, documented codebase that you can
+              clone and customize.
             </p>
             <p className="text-foreground font-semibold text-xl">
               No vendor lock-in. No subscriptions. No license restrictions.
             </p>
-            <p>
-              Just clean, modern code with patterns that scale. MIT licensed forever.
-            </p>
+            <p>Just clean, modern code with patterns that scale. MIT licensed forever.</p>
           </div>
         </motion.div>
 
@@ -90,7 +86,10 @@ export function PhilosophySection() {
             <ul className="space-y-3">
               {willFind.map((item) => (
                 <li key={item} className="flex items-start gap-3">
-                  <Check className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
+                  <Check
+                    className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5"
+                    aria-hidden="true"
+                  />
                   <span className="text-muted-foreground">{item}</span>
                 </li>
               ))}

frontend/src/components/home/QuickStartCode.tsx

@@ -58,12 +58,7 @@ export function QuickStartCode() {
               <span className="inline-block h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
               <span>bash</span>
             </div>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={copyToClipboard}
-              className="gap-2"
-            >
+            <Button variant="ghost" size="sm" onClick={copyToClipboard} className="gap-2">
               {copied ? (
                 <>
                   <Check className="h-4 w-4 text-green-600" aria-hidden="true" />

frontend/src/components/home/StatsSection.tsx

@@ -95,7 +95,8 @@ export function StatsSection() {
       >
         <h2 className="text-3xl md:text-4xl font-bold mb-4">Built with Quality in Mind</h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Not just another template. Comprehensive testing, documentation, and production-ready patterns.
+          Not just another template. Comprehensive testing, documentation, and production-ready
+          patterns.
         </p>
       </motion.div>
 

frontend/src/components/home/TechStackSection.tsx

@@ -70,7 +70,8 @@ export function TechStackSection() {
           Modern, Type-Safe, Production-Grade Stack
         </h2>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Built with the best tools for full-stack development. Async architecture, type safety, and developer experience.
+          Built with the best tools for full-stack development. Async architecture, type safety, and
+          developer experience.
         </p>
       </motion.div>
 
@@ -87,7 +88,9 @@ export function TechStackSection() {
           >
             <div className="h-full flex flex-col items-center justify-center rounded-lg border bg-card p-6 text-center hover:shadow-lg transition-all">
               {/* Tech Badge */}
-              <div className={`inline-block rounded-full bg-gradient-to-r ${tech.color} px-4 py-2 text-white font-semibold text-sm mb-2`}>
+              <div
+                className={`inline-block rounded-full bg-gradient-to-r ${tech.color} px-4 py-2 text-white font-semibold text-sm mb-2`}
+              >
                 {tech.name}
               </div>