사이트의 기존 색상 팔레트를 유지하면서 레이아웃, 타이포그래피, 간격, 깊이, 시각적 계층 구조 및 구성 요소 개선을 개선하여 기존 웹 사이트의 UI 디자인을 포괄적으로 업그레이드하고 다듬습니다. 또한 요소가 뷰포트에 들어갈 때 트리거되는 Framer Motion(또는 일반 HTML의 경우 CSS)을 사용하여 부드럽고 시차가 있는 흐림+슬라이드업 표시 애니메이션을 추가합니다. 사용자가 기존 웹사이트나 React/HTML 페이지를 개선, 현대화, 다듬기 또는 애니메이션화하기를 원할 때마다 이 기술을 사용하세요. 사용자가 "더 좋게 만들기", "애니메이션화", "디자인 개선", "UI 업그레이드", "더 현대적으로 만들기" 또는 "스크롤 애니메이션 추가"라고만 언급하는 경우에도 트리거됩니다. 이 기술은 애니메이션뿐만 아니라 모든 것을 처리합니다.
명령줄에서 ui-enhance-animate AI 스킬을 개발 환경에 빠르게 설치
출처: zaaakher/agent-skills.
This skill performs a full design upgrade of an existing website or component. It is NOT just about adding animations — it is a holistic visual refinement pass that touches typography, spacing, layout, depth, micro-interactions, and motion. The existing color palette is preserved; everything else can and should be improved.
Before writing a single line of code, do a thorough read of the existing code. Extract and note:
Apply ALL of the following improvements that are relevant to the site. Be thorough — don't skip sections because they "look okay". Every part of the site should be elevated.
사이트의 기존 색상 팔레트를 유지하면서 레이아웃, 타이포그래피, 간격, 깊이, 시각적 계층 구조 및 구성 요소 개선을 개선하여 기존 웹 사이트의 UI 디자인을 포괄적으로 업그레이드하고 다듬습니다. 또한 요소가 뷰포트에 들어갈 때 트리거되는 Framer Motion(또는 일반 HTML의 경우 CSS)을 사용하여 부드럽고 시차가 있는 흐림+슬라이드업 표시 애니메이션을 추가합니다. 사용자가 기존 웹사이트나 React/HTML 페이지를 개선, 현대화, 다듬기 또는 애니메이션화하기를 원할 때마다 이 기술을 사용하세요. 사용자가 "더 좋게 만들기", "애니메이션화", "디자인 개선", "UI 업그레이드", "더 현대적으로 만들기" 또는 "스크롤 애니메이션 추가"라고만 언급하는 경우에도 트리거됩니다. 이 기술은 애니메이션뿐만 아니라 모든 것을 처리합니다. 출처: zaaakher/agent-skills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate사이트의 기존 색상 팔레트를 유지하면서 레이아웃, 타이포그래피, 간격, 깊이, 시각적 계층 구조 및 구성 요소 개선을 개선하여 기존 웹 사이트의 UI 디자인을 포괄적으로 업그레이드하고 다듬습니다. 또한 요소가 뷰포트에 들어갈 때 트리거되는 Framer Motion(또는 일반 HTML의 경우 CSS)을 사용하여 부드럽고 시차가 있는 흐림+슬라이드업 표시 애니메이션을 추가합니다. 사용자가 기존 웹사이트나 React/HTML 페이지를 개선, 현대화, 다듬기 또는 애니메이션화하기를 원할 때마다 이 기술을 사용하세요. 사용자가 "더 좋게 만들기", "애니메이션화", "디자인 개선", "UI 업그레이드", "더 현대적으로 만들기" 또는 "스크롤 애니메이션 추가"라고만 언급하는 경우에도 트리거됩니다. 이 기술은 애니메이션뿐만 아니라 모든 것을 처리합니다. 출처: zaaakher/agent-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/zaaakher/agent-skills