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/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>
               ))}