landing-page-uiux

Execute homepage UI/UX upgrade phases from a master planning document.

Updated Nov 20, 2025
One-click install
npx skills add https://github.com/simsangsong/atockorea --skill landing-page-uiux
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: landing-page-uiux
Source: https://github.com/simsangsong/atockorea/tree/main/.claude/skills/landing-page-uiux
Command: npx skills add https://github.com/simsangsong/atockorea --skill landing-page-uiux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents chaotic, out-of-order landing page changes by driving the homepage UI/UX upgrade through a single master plan while verifying code reality and logging decisions.

Core Features & Use Cases

  • Phase-driven landing page execution: Executes the next checklist item only for the currently active phase, preserving phase order and avoiding scope creep.
  • Decision logging and rollback safety: Records binding decisions, updates the planner after each commit, and follows rollback triggers to protect performance and user impact.
  • Landing-page-specific UI/UX scope: Covers hero matcher, idle/best match previews, section order, sticky CTA behavior, season chip, motion identity, and copy hierarchy, with explicit alignment to components/home/v2 changes.

Quick Start

Ask to start or continue the landing page master plan by saying “start Phase X of landing-page-uiux” (or ask for a landing page/랜딩페이지 change) and provide which section or UI element you want addressed first.

Frequently Asked Questions about landing-page-uiux

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

FAQPage Schema
How do I safely upgrade my landing page UI/UX without breaking existing components?

To safely upgrade your landing page UI/UX, execute changes through a single master planning document that enforces phase order and acceptance gates. This phase-driven approach verifies code reality before edits and logs decisions to protect performance and user impact.

What is phase-driven planning for landing page changes?

Phase-driven planning for landing page changes executes the next checklist item only for the currently active phase. It preserves phase order, updates the planner after each commit, and prevents scope creep by following rollback triggers and mandatory acceptance checks.

How do I manage copy hierarchy and section order for a Next.js landing page?

Manage copy hierarchy and section order for a Next.js landing page by following a master plan that covers hero matchers, sticky CTA behavior, season chips, and motion identity. It aligns changes explicitly to components/home/v2 while logging decisions.

Does this landing page upgrade approach work with React components?

Yes, the landing page upgrade approach works with React components by explicitly aligning scope to components/home/v2 changes. It covers hero matchers, idle and best match previews, and sticky CTA behavior while verifying code reality before any edits are made.

How do I rollback landing page changes if a UI update fails?

Rollback landing page changes by following binding rollback triggers recorded during the upgrade process. The system logs decisions, updates the planner after each commit, and follows these triggers to protect performance and minimize negative user impact.

Can I update Korean and English landing copy using this phase planning method?

Yes, you can update Korean and English landing copy using this phase planning method. The scope explicitly covers landing copy in both languages, applying phase order and acceptance gates to ensure safe and structured content hierarchy updates.