AgentSkillsCN

ui-change

在实施 UI 变更之前，优先进行设计对齐。适用于修改现有组件、重新设计页面，或优化视觉风格时使用。当用户提到“重新设计”、“重塑风格”、“优化 UI”、“更新布局”、“让界面更美观”或“进行视觉调整”时，自动触发该技能。

SKILL.md
--- frontmatter
name: ui-change
description: "Front-load design alignment before implementing UI changes. Use when modifying existing components, redesigning pages, or refining visual styles. Auto-invoke when the user mentions 'redesign', 'restyle', 'refine the UI', 'update the layout', 'make it look', or 'visual changes'."

UI Change Alignment Skill

Before writing ANY code for a UI change, you MUST complete this alignment step.

Step 1: Read Current State

  • •Read the target component and all related style/layout files
  • •Identify the current visual structure, layout paradigm, and design patterns

Step 2: Propose Changes

Present a structured proposal to the user:

KEEPING UNCHANGED:

  • •[List every existing UI/layout element that will remain as-is]
  • •[Be specific: "vertical sidebar navigation", "text-based logo at 24px", "ambient glass-morphism background"]

MODIFYING:

  • •[List specific elements being changed and how]
  • •[Example: "Increasing logo font-size from 18px to 24px"]

ADDING:

  • •[List any new elements]

STRUCTURAL CHANGES:

  • •[Any changes to component hierarchy, layout direction, or positioning]
  • •[If none: "No structural changes — layout paradigm stays the same"]

Step 3: STOP

Wait for the user's explicit approval before writing any code.

Step 4: Implement

After approval, implement only the approved changes. If you find yourself wanting to change something not in the approved list, STOP and ask first.

Critical Rules

  • •NEVER replace existing layout paradigms without explicit approval
  • •NEVER swap text logos for image logos unless specifically asked
  • •NEVER change background transparency/opacity approaches unless specifically asked
  • •NEVER convert vertical layouts to horizontal (or vice versa) unless specifically asked
  • •When in doubt about a visual direction, ASK rather than guess