AI가 만든 티 안 나는 웹 화면, 재료는 이 다섯 곳에서

ui-resources-5 설치를 부탁해.

설명: https://ddalkkak.ssemgong.com/p/ui-resources-5/raw

설치 명령:
```
npx shadcn@latest add @animateicons/lu-x
npx shadcn@latest add @tween-ui/tab-wipe
```

순서
1. 원본를 먼저 읽고, 위 명령이 지금도 맞는지 확인해.
2. 위 명령을 터미널에서 실행해. 내 운영체제에 맞지 않으면 README에 있는 방법으로 바꿔서 해.
3. 끝나면 설치됐는지 확인하는 명령(버전 확인 등)을 실행해 결과를 알려 줘.
4. API 키·로그인·유료 결제가 필요하면 멈추고 나에게 물어봐. 키를 만들거나 추측하지 마.

한눈에 보기

자료	무엇	라이선스	이럴 때
AnimateIcons	움직이는 리액트 아이콘 1,170여 개	MIT	버튼·빈 화면·완료 표시가 밋밋할 때
ShiUI	그림자 없는 납작한 포스터풍 요소 111개·블록 24개	ISC	카드·버튼 모양이 다 똑같아 보일 때
Tween UI	GSAP·CSS로 움직이는 리액트 컴포넌트	MIT	탭 전환·등장 효과가 필요할 때
Minimal Gallery	사람이 골라 둔 웹디자인 사례 모음	사례마다 주인이 다름	어떤 방향으로 갈지 막막할 때
React Frontend Skills	리액트·Next.js 등 Claude Code 스킬 18개	MIT	리액트 구현 기준을 스킬로 붙이고 싶을 때

가져오는 법

아이콘·컴포넌트는 필요한 것 하나만. AnimateIcons와 Tween UI는 shadcn 방식이라 위 설치 명령처럼 이름 하나씩 프로젝트에 복사돼요. 사이트에서 마음에 드는 것을 골라 끝의 이름만 바꾸세요.

• AnimateIcons는 motion 꾸러미를, Tween UI는 gsap·@gsap/react를 함께 씁니다. 프로젝트에 이미 있으면 그대로, 없으면 아이콘 하나 때문에 꾸러미를 들이기보다 코드를 보고 CSS 전환으로 다시 짜는 편이 가벼워요.
• ShiUI는 설치형이 아니라 소스를 보고 가져오는 키트예요. 선·여백·표 처리를 빌리고 주홍·먹색은 내 서비스 색으로 바꿔 끼우세요.

React Frontend Skills는 골라서. 18개를 한꺼번에 넣으면 이미 쓰는 스킬과 겹쳐요. 필요한 것만 이름으로 받으세요.

npx skills add PyModel/react-frontend-skills -s react,nextjs,tailwind -g

디자인 쪽 ui-design은 접근성·속도 점검 목록이라 비슷한 점검 스킬(web-design-guidelines 등)을 이미 쓰고 있다면 따로 넣지 않아도 돼요.

꼭 알아 둘 점

• 움직임은 화면당 한두 곳. 아이콘도 탭도 다 움직이면 그게 곧 AI 티예요. 움직임 줄이기 설정(prefers-reduced-motion)도 지켜 주세요.
• Minimal Gallery는 보기만. 사례 사이트의 문구·사진·로고는 각자 주인이 있어요. 구조·여백·글자 크기 순서만 메모해 방향으로 쓰세요.
• 다섯 곳 모두 무료예요. Minimal Gallery 안의 유료 템플릿은 사지 않아도 됩니다.
• 시안 단계 도구는 AI가 만든 티 나는 화면, 이 다섯 개로 지우세요와 함께 보세요.