Improve library discovery and add CI checks

.github/ISSUE_TEMPLATE/library-request.yml

@@ -48,6 +48,13 @@ body:
       placeholder: React, Vue, TypeScript
     validations:
       required: true
+  - type: input
+    id: use-cases
+    attributes:
+      label: Use cases
+      placeholder: Dashboards, Rapid Prototyping
+    validations:
+      required: true
   - type: checkboxes
     id: checks
     attributes:

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: Verify
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.9'
+          cache: npm
+      - run: npm ci
+      - run: npm run check

CONTRIBUTING.md

@@ -18,7 +18,7 @@ npm install
 npm run dev
 ```
 
-Run `npm run build` before submitting changes.
+Run `npm run check` before submitting changes.
 
 ## Add a library
 

PRODUCT.md

@@ -8,11 +8,11 @@ web
 
 ## Users
 
-Frontend developers and product designers comparing UI libraries for an active project, plus contributors maintaining the directory.
+Frontend developers and product designers finding UI libraries for an active project, plus contributors maintaining the directory.
 
 ## Product Purpose
 
-Col is a community-maintained directory for finding, filtering, and comparing UI libraries without opening many disconnected sources.
+Col is a community-maintained directory for finding, filtering, sorting, and saving UI libraries without opening many disconnected sources.
 
 ## Positioning
 

README.md

@@ -31,7 +31,7 @@
 
 ## What Col does
 
-Col organizes UI libraries by category, stack, and use case. Search from the homepage, then compare matching libraries in the directory.
+Col organizes UI libraries by category, stack, and use case. Search from the homepage, then filter, sort, and save matching libraries in the directory.
 
 - Search by name, keyword, category, stack, or use case.
 - Filter libraries without leaving the directory.
@@ -57,7 +57,7 @@ Open the local URL printed in the terminal (usually [http://localhost:3000](http
 Before opening a pull request:
 
 ```bash
-npm run build
+npm run check
 ```
 
 ## Request something
@@ -74,7 +74,7 @@ Include:
 - what it provides and who it helps;
 - its supported stacks;
 - the closest Col category and use cases;
-- confirmation that it is maintained and publicly accessible.
+- confirmation that it is publicly accessible.
 
 Search [existing libraries](data/libraries.ts), [issues](https://github.com/screen-gd/Col/issues), and [pull requests](https://github.com/screen-gd/Col/pulls) first.
 
@@ -105,7 +105,7 @@ Library-only pull requests should be small and should not redesign unrelated par
 3. Reuse the existing category, stack, and use-case values when possible.
 4. Keep the description factual and short.
 5. Confirm the URL points to the official project.
-6. Run `npm run build`.
+6. Run `npm run check`.
 7. Open a pull request using the provided template.
 
 ```ts
@@ -163,6 +163,8 @@ When contributing a future detail page, keep the prompt specific to that library
 app/                  Routes, layout, and global styles
 components/           Search, filters, cards, header, and shared UI
 data/libraries.ts     The curated library registry
+lib/                  Shared helpers and route metadata
+tests/                Registry and discovery checks
 public/brand/         Col brand assets
 public/hero-logos/    Library artwork used by the homepage
 .github/              Issue forms and pull request guidance

app/docs/page.tsx

@@ -59,7 +59,7 @@ export default function DocsPage() {
 
             <DocSection id="pull-requests" title="Open a pull request">
               <p>Fork the repository, create a focused branch, and keep unrelated changes out. Library additions belong in <code>data/libraries.ts</code> with a unique kebab-case slug, canonical URL, factual description, and existing taxonomy values where possible.</p>
-              <pre><code>{`npm install\nnpm run dev\nnpm run build`}</code></pre>
+              <pre><code>{`npm install\nnpm run dev\nnpm run check`}</code></pre>
               <p>Explain what changed, why it changed, and how you verified it. Include screenshots for visible interface changes.</p>
               <DocLink href="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/screen-gd/Col/blob/main/CONTRIBUTING.md">Read the contribution guide</DocLink>
             </DocSection>

app/globals.css

@@ -179,26 +179,10 @@ html.light .docs-copy pre {
   color: #111;
 }
 
-.gooey-surface {
-  background: #090909;
-  color: #fff;
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
-}
-.hero-search-surface { box-shadow: none; }
-.gooey-input-text { color: #fff; }
-.gooey-key { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
-
-html.light .gooey-surface {
-  background: #fff;
-  color: #111;
-  box-shadow: inset 0 0 0 1px rgba(17,17,17,.16);
-}
-html.light .hero-search-surface { box-shadow: none; }
-html.light .gooey-input-text { color: #111; }
-html.light .gooey-key { border-color: rgba(17,17,17,.14); color: rgba(17,17,17,.65); }
 html.light .hero-stat { background: transparent !important; border-color: rgba(17,17,17,.14) !important; }
 
 .hero-search { border-color: rgba(255,255,255,.15); background: #090909; color: #fff; }
+.hero-search:focus-within { outline: 1px solid #fff; outline-offset: 2px; }
 .hero-search-icon { color: rgba(255,255,255,.72); transition: transform 220ms ease; }
 .hero-search:focus-within .hero-search-icon { transform: translateX(2px); }
 .hero-search-input { color: #fff; }
@@ -225,6 +209,7 @@ html.light .hero-stat { background: transparent !important; border-color: rgba(1
 }
 
 html.light .hero-search { border-color: rgba(17,17,17,.16); background: #fff; color: #111; }
+html.light .hero-search:focus-within { outline-color: #111; }
 html.light .hero-search-icon { color: rgba(17,17,17,.68); }
 html.light .hero-search-input { color: #111; }
 html.light .hero-search-hints { color: rgba(17,17,17,.48); }
@@ -402,28 +387,6 @@ html.light .site-header-search kbd { border-color: rgba(17,17,17,.14); color: rg
   html.light .site-header-mobile-menu a:hover, html.light .site-header-mobile-menu a[aria-current="page"] { background: rgba(17,17,17,.06); }
 }
 
-html.light .gooey-filter-layer { filter: none !important; }
-html.light .gooey-orb { display: none !important; }
-
-html.light [data-slot="select-content"] {
-  border-color: rgba(17,17,17,.14);
-  background: #fff;
-  color: #111;
-  box-shadow: none;
-}
-
-html.dark [data-slot="select-content"] { box-shadow: none; }
-html.dark [data-slot="select-item"][data-highlighted],
-html.dark [data-slot="select-item"]:focus {
-  background: #191919;
-  color: #fff;
-}
-
-html.light [data-slot="select-item"][data-highlighted] {
-  background: #f0f0ed;
-  color: #111;
-}
-
 .popular-filter-button {
   border-color: rgba(255,255,255,.18);
   background: #050505;
@@ -497,9 +460,9 @@ html.light .filter-shell {
 .coss-menu-item:focus,
 .coss-menu-item:focus-visible,
 .coss-menu-item[data-highlighted] {
-  background: transparent;
+  background: #303030;
   color: #fff;
-  outline: none;
+  outline: 1px solid #fff;
 }
 
 html.light .coss-input,
@@ -512,9 +475,9 @@ html.light .coss-menu-item { color: rgba(17,17,17,.76); }
 html.light .coss-menu-item:focus,
 html.light .coss-menu-item:focus-visible,
 html.light .coss-menu-item[data-highlighted] {
-  background: transparent;
+  background: #e8e8e5;
   color: #111;
-  outline: none;
+  outline: 1px solid #111;
 }
 
 @keyframes coss-menu-in {
@@ -529,11 +492,11 @@ html.light .coss-menu-item[data-highlighted] {
 
 .filter-tab { color: rgba(255,255,255,.72); }
 .filter-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
-.filter-tab[data-state="active"] { border-color: rgba(255,255,255,.24); background: #fff; color: #080808; }
+.filter-tab[aria-pressed="true"] { border-color: rgba(255,255,255,.24); background: #fff; color: #080808; }
 
 html.light .filter-tab { color: rgba(17,17,17,.68); }
 html.light .filter-tab:hover { background: rgba(17,17,17,.05); color: #111; }
-html.light .filter-tab[data-state="active"] { border-color: #111; background: #111; color: #fff; }
+html.light .filter-tab[aria-pressed="true"] { border-color: #111; background: #111; color: #fff; }
 
 .library-card { border-color: rgba(255,255,255,.14); background: #050505; color: #fff; }
 .library-card:hover { border-color: rgba(255,255,255,.3); background: #090909; }
@@ -544,7 +507,7 @@ html.light .filter-tab[data-state="active"] { border-color: #111; background: #1
 html.light .library-card { border-color: rgba(17,17,17,.14); background: #fff; color: #111; }
 html.light .library-card:hover { border-color: rgba(17,17,17,.3); background: #fcfcfb; }
 html.light .library-muted { color: rgba(17,17,17,.7); }
-html.light .library-subtle { color: rgba(17,17,17,.52); }
+html.light .library-subtle { color: rgba(17,17,17,.65); }
 html.light .library-chip { border-color: rgba(17,17,17,.12); background: rgba(17,17,17,.045); color: rgba(17,17,17,.72); }
 
 html.light [class~="text-white"] { color: #111; }
@@ -588,26 +551,6 @@ html.light .hero-logo-card {
   filter: blur(3px) brightness(.85) saturate(0);
 }
 
-.hero-background-card--mid {
-  opacity: 0.62;
-  filter: blur(1.5px) brightness(0.94) saturate(0);
-}
-
-.hero-background-card--far {
-  opacity: 0.4;
-  filter: blur(4px) brightness(0.82) saturate(0);
-}
-
-@keyframes star-border-movement-bottom {
-  0% { transform: translate(0%, 0%); opacity: 1; }
-  100% { transform: translate(-100%, 0%); opacity: 0; }
-}
-
-@keyframes star-border-movement-top {
-  0% { transform: translate(0%, 0%); opacity: 1; }
-  100% { transform: translate(100%, 0%); opacity: 0; }
-}
-
 /* Entrance */
 @keyframes fade-up {
   from {
@@ -628,22 +571,6 @@ html.light .hero-logo-card {
 .delay-2 {
   animation-delay: 0.24s;
 }
-.delay-3 {
-  animation-delay: 0.36s;
-}
-
-/* Infinite marquee */
-@keyframes marquee {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-.animate-marquee {
-  animation: marquee 60s linear infinite;
-}
 
 :focus-visible:not(input) {
   outline: 1px solid rgba(255, 255, 255, 0.7);
@@ -680,16 +607,6 @@ html.light ::-webkit-scrollbar-thumb { border-color: #f7f7f5; background: #aaa;
     scroll-behavior: auto !important;
   }
 }
-.marquee-mask {
-  mask-image: linear-gradient(
-    to right,
-    transparent,
-    black 12%,
-    black 88%,
-    transparent
-  );
-}
-
 @theme inline {
   --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
   --color-color-5: var(--color-5);

app/layout.tsx

@@ -19,7 +19,7 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "Col — Collection of Libraries",
-  description: "We curate all the best libraries, so you don't have to.",
+  description: "Browse UI libraries by category, stack, and use case.",
   icons: { icon: "/brand/col-mark.png" },
   keywords: [
     "ui libraries",
@@ -39,7 +39,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark" suppressHydrationWarning>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: `try{const t=localStorage.getItem('col:theme');const l=t==='light'||(!t&&matchMedia('(prefers-color-scheme: light)').matches);document.documentElement.classList.toggle('light',l);document.documentElement.classList.toggle('dark',!l)}catch{}` }} />
+        <script dangerouslySetInnerHTML={{ __html: `let t;try{t=localStorage.getItem('col:theme')}catch{}const l=t==='light'||(t!=='dark'&&matchMedia('(prefers-color-scheme: light)').matches);document.documentElement.classList.toggle('light',l);document.documentElement.classList.toggle('dark',!l)` }} />
       </head>
       <body
         className={`${inter.variable} ${pixelifySans.variable} ${geistMono.variable} min-h-screen font-sans`}

app/libraries/page.tsx

@@ -1,15 +1,19 @@
 import { DirectoryExplorer } from "@/components/DirectoryExplorer";
 import { Header } from "@/components/Header";
+import { SiteFooter } from "@/components/SiteFooter";
+import { firstQuery } from "@/lib/directory";
 
-export default async function LibrariesPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
-  const { q = "" } = await searchParams;
+export default async function LibrariesPage({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
+  const { q } = await searchParams;
+  const initialQuery = firstQuery(q);
 
   return (
     <>
       <Header />
       <main className="w-full max-w-full overflow-x-hidden">
-        <DirectoryExplorer initialQuery={q} />
+        <DirectoryExplorer initialQuery={initialQuery} />
       </main>
+      <SiteFooter />
     </>
   );
 }