skills.rest
simsangsong
simsangsongCOMMUNITY
Explore all skills by this author →
GitHub

tour-product-detail-uiux

Execute sprint-ordered UI/UX upgrades for the /tour-product/[slug] detail page.

Updated Nov 20, 2025
Search Tags:#design tokens#sprint planning#nextjs#frontend QA#tour page#uiux redesign#booking UX
One-click install
npx skills add https://github.com/simsangsong/atockorea --skill tour-product-detail-uiux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tour-product-detail-uiux
Source: https://github.com/simsangsong/atockorea/tree/main/.claude/skills/tour-product-detail-uiux
Command: npx skills add https://github.com/simsangsong/atockorea --skill tour-product-detail-uiux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you implement a large tour product detail page UI/UX upgrade without breaking conversion flow or drifting away from the approved, sprint-ordered execution plan.

Core Features & Use Cases

  • Sprint-governed UI/UX upgrades: Executes hero, subnav, at-a-glance, atmosphere gallery, day-flow, timeline, pickup/dropoff, included, fit, practical details, booking support, FAQ, reviews, recommendations, and booking card/mobile sticky bar changes in the required order.
  • Plan-locked scope and anti-scope-crew control: Wires every task back to the single integrated execution plan so decisions remain binding and scope creep is parked.
  • Safety and QA guardrails: Enforces acceptance checks per sprint (booking checkout QA, token/color constraints, accordion limits, hero autoplay OFF, scroll-freeze guard, and multi-locale verification).

Quick Start

Ask to “start Sprint 1 of the tour-product detail master plan” (or “continue Sprint 2”) and apply the next unchecked task from the master plan to the codebase.

Frequently Asked Questions about tour-product-detail-uiux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I execute a tour product detail page UI/UX redesign without breaking the booking flow?▼

To execute a tour product detail page UI/UX redesign safely, you must follow an approved sprint-ordered execution plan that wires section component updates back to binding decisions. This ensures the booking checkout flow remains intact while upgrading hero, itinerary, and gallery components.

What is the best way to manage scope creep during a Nextjs tour page UI upgrade?▼

The best way to manage scope creep during a Nextjs tour page UI upgrade is to lock all tasks to a single integrated execution plan. This approach parks out-of-scope ideas and enforces sprint-specific acceptance gates for every component modification.

Does the tour detail page upgrade process enforce multi-locale rendering checks for UI copy?▼

Yes, the tour detail page upgrade process enforces multi-locale rendering checks for all user-visible copy. This deterministic execution requirement ensures that translated text renders correctly across all updated section components like accordions and timelines.

What frontend QA constraints apply when updating design tokens on a tour product page?▼

Frontend QA constraints for updating design tokens on a tour product page include enforcing token and color constraints, accordion limits, and a hero autoplay OFF rule. A scroll-freeze guard is also required to prevent UI locking during user interaction.

Related Skills

Explore More Design & Creative Skills→
mckissingermckissinger
1

kickoff

Orchestrate product discovery, architecture planning, and environment provisioning for new software projects.

Community
Advanced
opendatadiscoveryopendatadiscovery

review

Validate work items against acceptance criteria and quality gates with cited evidence.

Official
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
All-The-VibesAll-The-Vibes
50

lfg

Coordinate autonomous engineering sprints with ordered planning, implementation, and review gates.

Official
Advanced