docs: revamp README and fix pre-commit formatting with lint-staged

README:
- Restructure for developers discovering the project on GitHub
- Add hero image, centered navigation links, code snippet, "Why Tool UI?"
  section, contributing section
- Move images to .github/assets/ so they render on GitHub
- Fix LICENSE link

Pre-commit:
- Replace manual oxfmt shell script with lint-staged (official recommendation)
- The old script swallowed errors via `2>/dev/null || true`, letting
  unformatted code through and blocking pushes later
- lint-staged handles staged file filtering, formatting, and re-staging
  correctly, including partial staging

Closes #150

Author: petekp

.githooks/pre-commit

@@ -3,12 +3,4 @@ set -eu
 
 pnpm hooks:pre-commit
 
-# Auto-fix formatting on staged files and re-stage them
-STAGED=$(git diff --cached --name-only --diff-filter=ACMR)
-if [ -n "$STAGED" ]; then
-  WWW_STAGED=$(echo "$STAGED" | grep '^apps/www/' || true)
-  if [ -n "$WWW_STAGED" ]; then
-    echo "$WWW_STAGED" | sed 's|^apps/www/||' | (cd apps/www && xargs oxfmt 2>/dev/null) || true
-    echo "$WWW_STAGED" | xargs git add
-  fi
-fi
+pnpm lint-staged

.github/assets/gallery.png

@@ -1,48 +1,61 @@
-# Tool UI
+<a href="https://tool-ui.com">
+  <img src=".github/assets/header.png" alt="Tool UI" width="100%">
+</a>
 
 Copy/paste React components for rendering tool calls in AI chat interfaces. Built by [assistant-ui](https://github.com/assistant-ui).
 
-When a model calls a tool, most apps dump raw JSON into the conversation. These components turn tool payloads into interactive UI — approvals, forms, tables, charts, media cards, and receipts — so users can understand and act without leaving the chat.
+**[Docs](https://tool-ui.com/docs/overview)** · **[Gallery](https://tool-ui.com/docs/gallery)** · **[Quick Start](https://tool-ui.com/docs/quick-start)**
 
-<p align="center">
-  <img src="public/assets/homepage.png" alt="Tool UI – UI components for AI interfaces" width="880">
-</p>
-
-**[tool-ui.com](https://tool-ui.com)** | [Docs](https://tool-ui.com/docs/overview) | [Gallery](https://tool-ui.com/docs/gallery) | [Quick Start](https://tool-ui.com/docs/quick-start)
-
-## Gallery
+When a model calls a tool, most apps dump raw JSON into the conversation. These components turn tool payloads into interactive UI like approvals, forms, tables, charts, and media cards so users can understand and act without leaving the chat.
 
-<p align="center">
-  <img src="public/assets/gallery.png" alt="Tool UI component gallery – weather, message draft, code block, image gallery, order summary, chart, and plan components" width="900">
-</p>
+## Featured Components
 
-## Featured components
-
-<table>
+<table border="0" cellspacing="0" cellpadding="0">
   <tr>
-    <td align="center" width="50%">
+    <td valign="top" width="50%">
       <strong>Option List</strong><br>
-      <em>Let users select from multiple choices</em><br>
-      <img src="public/assets/option-list.png" alt="Option List component" width="400">
+      Let users select from multiple choices<br><br>
+      <a href="https://tool-ui.com/docs/option-list">
+        <img src=".github/assets/option-list.png" alt="Option List component" width="100%">
+      </a>
     </td>
-    <td align="center" width="50%">
+    <td valign="top" width="50%">
       <strong>Question Flow</strong><br>
-      <em>Multi-step guided questions with branching</em><br>
-      <img src="public/assets/question-flow.png" alt="Question Flow component" width="400">
+      Multi-step guided questions with branching<br><br>
+      <a href="https://tool-ui.com/docs/question-flow">
+        <img src=".github/assets/question-flow.png" alt="Question Flow component" width="100%">
+      </a>
     </td>
   </tr>
 </table>
 
+
+## Why Tool UI?
+
+- **Copy/paste, not install** — shadcn/ui model. Components live in your codebase. No dependency lock-in.
+- **Schema-validated** — Every component has a Zod schema. Parse tool output, render when valid, fail safely when not.
+- **Interactive with receipts** — Components aren't just displays. Users make choices that flow back to the assistant. Choices persist as receipts.
+- **Built on shadcn/ui** — Radix primitives, Tailwind styling, your theme. No new design system to learn.
+
 ## Components
 
-- **Decision/Confirmation**: Approval Card, Order Summary, Message Draft, Option List
-- **Input/Configuration**: Parameter Slider, Preferences Panel, Question Flow
-- **Display/Artifacts**: Data Table, Chart, Citation, Link Preview, Stats Display, Code Block, Code Diff, Terminal
-- **Media/Creative**: Image, Image Gallery, Video, Audio, Instagram Post, LinkedIn Post, X Post
-- **Progress/Execution**: Plan, Progress Tracker, Weather Widget
+- **Progress**: Plan, Progress Tracker
+- **Input**: Option List, Parameter Slider, Preferences Panel, Question Flow
+- **Display**: Citation, Geo Map, Item Carousel, Link Preview, Stats Display, Terminal, Weather Widget
+- **Artifacts**: Chart, Code Block, Code Diff, Data Table, Instagram Post, LinkedIn Post, Message Draft, X Post
+- **Confirmation**: Approval Card, Order Summary
+- **Media**: Audio, Image, Image Gallery, Video
 
 Each component includes a Zod schema for payload validation and presets for realistic example data. Browse them all in the [Gallery](https://tool-ui.com/docs/gallery).
 
+<p align="center">
+  <img src=".github/assets/gallery.png" alt="Tool UI component gallery" width="900">
+</p>
+
+## Contributing
+
+Contributions are welcome. [Open an issue](https://github.com/assistant-ui/tool-ui/issues) to report bugs or suggest new components.
+
 ## License
 
-MIT License. See [LICENSE](LICENSE) for details.
+MIT License. See [LICENSE](LICENSE.md) for details.

.github/assets/header.png

@@ -34,11 +34,15 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "lint-staged": "^16.4.0",
     "tsx": "^4.21.0"
   },
   "engines": {
     "node": ">=20",
     "pnpm": ">=8.0.0"
   },
+  "lint-staged": {
+    "apps/www/**/*.{ts,tsx,js,jsx,mjs,cjs,css,json,jsonc}": "npx oxfmt --no-error-on-unmatched-pattern"
+  },
   "packageManager": "pnpm@10.11.0"
 }