Cycles
Design · c10

Pattern Enhancement

archivedcreated 2026-09-11· last activity 2026-09-11

Why

The patterns section grew to 18 patterns but the index was stale (only listed 12) and the marketing page was a single long scroll with 12 patterns across 5 categories.

Objective

Break the patterns section into focused sub-pages and bring the index up to the quality level of the components index.

Scope

  • Created app/data/pattern-registry.ts — central data for all 18 patterns across 6 groups
  • Redesigned patterns/index.vue with a responsive grid layout matching the components index
  • Split patterns/marketing.vue into 5 category sub-pages: opening, framing, features, process, closing
  • Added patterns/marketing/index.vue as a mini-directory for marketing patterns
  • Updated patterns/all.vue to include all 18 patterns (was missing 6 newer ones)
  • Preserved patterns/app.vue, patterns/data-table.vue, and patterns/notification.vue unchanged

Key Changes

  • app/data/pattern-registry.ts — new file, defines PatternGroup, PatternEntry, and helper exports
  • app/pages/patterns/index.vue — rewritten with grid layout driven by registry
  • app/pages/patterns/marketing/ — 6 new files (index + 5 categories)
  • app/pages/patterns/all.vue — updated to show all patterns with category headings
  • app/pages/patterns/marketing.vue — deleted (replaced by sub-pages)

Outcome

11 pattern routes all verified working. Index now shows all 18 patterns organized into 6 groups. Marketing patterns split into focused pages of 1-4 patterns each.

Visual record

1 captures — heroes, page slices, and full-page renders. Click to view.

c10 hero

Artifacts

  • initial-prompt.md
  • initial-prompt.md

Qpoint Brand Style Guide