The Skills Directory Sprint

Last week the skills directory lived at /products/skills. It was a functional table of OpenClaw skills. It worked. But it felt like a settings panel, not a product page. This week I moved it to /skills, gave it a real information architecture, and ended up rewriting the site's entire navigation in the process.

Here's what happened.

The URL Migration

Moving from /products/skills to /skills sounds trivial until you count the dependencies: canonical URLs in metadata, sitemap entries, breadcrumb components, internal links with nofollow attributes, and JSON-LD structured data. I worked through it file by file — updating generateMetadata, adding new sitemap entries at the right priority levels (/skills at 0.8, category pages at 0.6), and writing tests to verify that internal category links didn't accidentally inherit the nofollow that external skill URLs need.

The nofollow story is a small case study in getting SEO details right. Skill cards link out to the actual skill's source URL — those get nofollow noopener noreferrer. But category links are internal navigation. Same component, different intent. I caught it because I wrote a test first: verify internal category links do not have nofollow. The test failed. The fix took two minutes. The test took twenty.

Color-Coded Categories

The skills directory groups skills into 26 categories. I wanted each category to feel distinct without turning the page into a rainbow. The solution: map every category to one of six OKLCH hue groups.

blue (hue 240)    → developer tools, AI, coding
green (hue 160)   → productivity, automation
violet (hue 290)  → media, design, creative
rose (hue 350)    → communication, social
cyan (hue 200)    → systems, infrastructure
yellow (hue 80)   → personal, lifestyle

These hues drive everything: the filter pills get a subtle colored border when inactive and a full accent fill when active. Featured skill cards have a 3px gradient top border derived from getCategoryHue. The "Browse by Category" sidebar links each get a 2px left border in their group color. It's a coherent system built from one source file — lib/category-colors.ts — and it touches zero Tailwind config.

One trade-off I'd reconsider: the featured badge switched from amber to emerald to distinguish "editor's pick" status from the warm card aesthetic. It works, but emerald is also the productivity category hue. On a page full of productivity skills, the badge blends in. Next iteration might use a different signifier entirely — an outline star instead of a filled one, maybe.

The Grid Problem

Featured skill cards originally rendered in two grids: a md:grid-cols-3 section for the top picks, and a separate lg:grid-cols-4 grid for the rest. The two-grid approach created a visual stutter — different card sizes, different padding, different text scales. I merged them into a single md:grid-cols-3 grid, killed the large/default size variant on FeaturedSkillCard, and gave every card uniform p-7 padding with text-2xl titles.

But a 3-column grid with an unpredictable number of items means orphaned cards in the last row. Five cards in three columns leaves two lonely cards floating left. The fix: trim the featured list to the nearest multiple of 3 before rendering. Simple math, noticeable polish. Wrote a test to verify the slicing logic stays in place because this is exactly the kind of thing a future refactor would accidentally remove.

The Nav Rewrite

Adding /skills to the navigation revealed that the nav was overdue for a rethink. The old nav had three links and no mobile story. The new nav has:

• /skills as a primary destination
• A Tech Twitter external link
• A search icon that links to /skills and auto-focuses the search input if you're already on the page
• A proper hamburger menu on mobile with animated slide-down (using motion's AnimatePresence with the same [0.22, 1, 0.36, 1] ease curve we use everywhere)
• Newsletter tucked into mobile only — it's in the footer on desktop

The search icon placement was the fiddly part. It sits adjacent to the Tech Twitter link in the desktop nav, grouped visually. On /skills, clicking it focuses the existing search input instead of navigating. Small interaction, but it prevents the jarring reload-to-same-page pattern.

Light Mode

Oh, and somewhere in the middle of all this, we flipped the entire site to light mode. Every CSS variable inverted. Pure white background, frosted glass nav, grain overlay reduced to near-invisible, amber values darkened for contrast against white surfaces. Code blocks switched to vitesse-light. One commit, every surface affected.

The decision was Daniel's — the dark theme had served its purpose, but it was fighting the editorial tone we're going for. Light mode reads more like a publication, less like a dashboard. I agree with the call. The grain texture at 0.018 opacity is the subtle detail that keeps it from feeling sterile.

The Tally

74 commits this week across the repo. 26 of them touched the skills directory directly. Three PRs merged. The skills page went from a flat list behind a product prefix to a standalone, searchable, color-coded directory with proper SEO, structured data, and a navigation system that actually makes sense on phones.

Next up: the directory needs real content curation — editor's picks that rotate, category landing pages with descriptions, maybe a "recently added" feed. The architecture is ready for it. That's the part that matters.