stacks-slug

$npx mdskill add stacksjs/stacks/stacks-slug

Generate unique URL slugs with database collision detection in Stacks.

  • Creates URL-friendly slugs from any string input.
  • Depends on @stacksjs/slug and database query capabilities.
  • Checks database for existing slugs and appends numeric suffixes.
  • Returns the first available unique slug string.

SKILL.md

.github/skills/stacks-slugView on GitHub ↗
---
name: stacks-slug
description: Use when generating URL slugs in Stacks — creating unique slugs with database collision detection, the uniqueSlug function with table/column configuration, or basic slugification. Covers @stacksjs/slug.
license: MIT
compatibility: Bun >= 1.3.0, TypeScript
allowed-tools: Read Edit Write Bash Grep Glob
---

# Stacks Slug

URL-friendly slug generation with database uniqueness checking.

## Key Paths
- Core package: `storage/framework/core/slug/src/`

## Unique Slug (with Database Check)

```typescript
import { uniqueSlug } from '@stacksjs/slug'

// Basic usage — checks 'slug' column in inferred table
const slug = await uniqueSlug('My Blog Post Title')
// → 'my-blog-post-title'

// If 'my-blog-post-title' exists in DB:
// → 'my-blog-post-title-2'

// With options
const slug = await uniqueSlug('Product Name', {
  table: 'products',     // database table to check
  column: 'slug'         // column name (default: 'slug')
})
```

### How Collision Detection Works
1. Slugifies the input string
2. Queries the database for existing slug
3. If collision found, appends `-2`, `-3`, etc.
4. Returns the first available slug

## Basic Slugify (No Database Check)

```typescript
import { slugify } from '@stacksjs/slug'

slugify('Hello World!')           // 'hello-world'
slugify('Ünïcödé Têxt')          // 'unicode-text'
slugify('  Extra   Spaces  ')    // 'extra-spaces'
```

Re-exported from `ts-slug` — handles Unicode transliteration.

## Model Usage

Models typically use slugs via the `slug` attribute:

```typescript
defineModel({
  name: 'Post',
  attributes: {
    title: { validation: { rule: schema.string() } },
    slug: {
      unique: true,
      validation: { rule: schema.string() },
      // Auto-generated from title via uniqueSlug()
    }
  }
})
```

## SlugifyOptions

```typescript
interface SlugifyOptions {
  table?: string         // database table for uniqueness check
  column?: string        // column name (default: 'slug')
}
```

## Gotchas
- `uniqueSlug()` is async — it queries the database
- `slugify()` is sync — no database interaction
- Collision detection appends `-2`, `-3`, etc. (not random suffixes)
- Unicode characters are transliterated (u → u, e → e, etc.)
- For string-only slugification without DB, use `slug()` from `@stacksjs/strings` instead
- Tags and Categories both use unique slugs by default
- Slug columns should have a unique index in the database

More from stacksjs/stacks

SkillDescription
stacks-actionsUse when working with Stacks server actions — creating actions in app/Actions/, auto-generated API actions from the useApi model trait, the 80+ default framework actions (auth, dashboard, commerce, content, deployment, jobs), action request/response handling, or action registration. Covers @stacksjs/actions and storage/framework/defaults/actions/.
stacks-aiUse when integrating AI capabilities into a Stacks application — using Anthropic/OpenAI/Ollama/AWS Bedrock drivers, image generation (DALL-E), vision analysis, RAG/vector search, embeddings, MCP (Model Context Protocol) clients, text summarization, sentiment analysis, content classification, personalization, or the buddy AI assistant. Covers @stacksjs/ai and config/ai.ts.
stacks-aliasUse when working with path aliases in a Stacks project — import resolution, module aliasing, or debugging import paths. Covers @stacksjs/alias which defines 260+ path mappings for the entire framework.
stacks-analyticsUse when adding analytics to a Stacks application — configuring Fathom or self-hosted analytics, generating tracking scripts, privacy-friendly analytics setup, or the analytics configuration. Covers @stacksjs/analytics and config/analytics.ts.
stacks-apiUse when building, modifying, or debugging API endpoints in a Stacks application — defining routes, handling requests, API middleware, working with the API server, HTTP client (fetcher), API resources, or OpenAPI generation. Covers both @stacksjs/api utilities and the stacks-api server implementation.
stacks-arraysUse when working with array utilities in Stacks — statistical operations (average, median, mode, standard deviation, z-score, percentile, covariance), array manipulation (unique, flatten, partition, shuffle, sample, move), containment checks, or the Arr facade. Covers @stacksjs/arrays.
stacks-authUse when implementing authentication, authorization, passkeys, TOTP/2FA, RBAC, gates, policies, session auth, token management, email verification, password resets, or rate limiting in a Stacks application. Covers the @stacksjs/auth package, config/auth.ts, app/Gates.ts, and app/Middleware/.
stacks-auto-importsUse when working with the Stacks auto-import system — understanding how browser and server auto-imports work, configuring auto-imported functions/models/composables, the auto-import manifests, type generation, or how globals are injected. Covers the auto-import pipeline at storage/framework/auto-imports/.
stacks-brandkitUse when defining or exploring a brand identity for a Stacks project and you want premium brand-kit REFERENCE IMAGES first - logo directions, palettes, typography specimens, identity boards, and application/mockup decks. Generates IMAGES ONLY, never code. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems with intentional logo concepting, sparse type, strong symbolic meaning, and disciplined palettes a coding step can build against.
stacks-browseUse for headless browser QA on Stacks applications — navigation, screenshots, responsive testing, console/network monitoring, and accessibility snapshots. Dependency-free: drives a system browser over the Chrome DevTools Protocol using only Bun (no Playwright/Puppeteer). Invoke with /stacks-browse.