Skills
.Work. You
Rest

tours-list-uiux

Community

Upgrade the Tours List to magazine-grade UX.

Design & Creative#nextjs#i18n#phase planning#uiux#tours list#filter rail#editorial grid
Authorsimsangsong
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents the Tours List (/tours/list) from remaining an admin-style search form by upgrading its UI/UX to match the site’s magazine tone while enforcing strict visual-asset and phase-safety rules.

Core Features & Use Cases

  • Guided, phase-based UI/UX upgrade: Executes ordered Phase 0→1→2→3→4→6 work with hard gates, rollback triggers, and planner synchronization.
  • Catalogue-specific UX components: Builds the collapsing Catalogue Hero, sticky ivory+amber filter rail, dismissible active filter chips, results meta + view toggle, editorial 3-up grid with 6th-slot inserts, conversion rescue band, and a 3-action empty-state recovery.
  • Tone and asset preservation guarantees: Enforces the ivory+amber magazine palette, typography/motion constraints, destination accent inheritance, and preserves sacred TourListCard visuals (film grain/vignette/Vogue filter/warm shadow/spring tap).

Quick Start

Trigger the tours-list-uiux skill to apply the next required master-plan step for upgrading /tours/list (e.g., start Phase 0 first, then proceed in order once Phase 0 is approved).

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tours-list-uiux
Download link: https://github.com/simsangsong/atockorea/archive/main.zip#tours-list-uiux

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.