Not in the top 1,000 by GitHub stars

Guksu/suta

Reduce AI Slop in Design

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`skills/suta/SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 5fbd648c57b2

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 5fbd648c57b2abb5c372eef4be306da411ed3bff

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/Guksu/suta.git .hotskills/guksu-suta && git -C .hotskills/guksu-suta checkout --detach 5fbd648c57b2abb5c372eef4be306da411ed3bff
# Copy each selected skill directory from .hotskills/guksu-suta into .claude/skills/<skill-name>/

Version-pinned installation · Codex

git clone --filter=blob:none --no-checkout https://github.com/Guksu/suta.git .hotskills/guksu-suta && git -C .hotskills/guksu-suta checkout --detach 5fbd648c57b2abb5c372eef4be306da411ed3bff
# Copy each selected skill directory from .hotskills/guksu-suta into .agents/skills/<skill-name>/

18GitHub stars

2stars in 7 days

1skill in this repository

44commits in 30 days

Heat

3.8

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

suta skills/suta

How it works

suta

When your agent uses it

웹·React Native 앱의 UI를 만들거나 고칠 때 AI 슬롭(AI slop) — 모든 것을 감싼 카드와 제각각인 여백, 기본 파랑·연노랑을 뿌린 탁한 색, 아무 데나 붙인 transition, 레이아웃을 흔드는 애니메이션, 동작 줄이기 설정 무시, 키보드로 못 쓰는 컴포넌트처럼 AI가 만든 티가 나는 UI — 을 없앤다. 이를 막는 레이아웃·색·글꼴·문구·모션 기준과 검증된 UI 패턴 57종의 코드(모달·바텀시트·토스트·드롭다운·캐러셀·탭·폼·제스처)를 제공한다. "로그인·목록·상세·설정·채팅 화면 만들어줘, 페이지 구현, 컴포넌트 추가, 레이아웃·여백 다듬어줘, 버튼 애니메이션 넣어줘, 문구 다듬어줘, 모바일 제스처, AI 티 안 나게" 요청과 UI, landing page, screen, layout, spacing, component, modal, dropdown, toast, animation, keyboard accessibility 작업에 쓴다. 화면이 없는 백엔드·데이터·문서 작업에는 쓰지 않는다.

What it loads into context

Frontmatter

298 tokens

Always available to the agent

SKILL.md

16,824 tokens

When the skill is activated

Reference documents

152,998 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

폴더 지도
작업 절차
AI 슬롭 금지선
레이아웃 값
모션 값
마무리 체크리스트
패턴 카탈로그
쓰지 않는 경우·한계

Scripts executed separately

patterns/accordion/assets/Accordion.tsx
patterns/accordion/assets/accordionCore.ts
patterns/bottom-nav/assets/BottomNav.tsx
patterns/bottom-nav/assets/bottomNavCore.ts
patterns/bottom-sheet/assets/BottomSheet.tsx
patterns/bottom-sheet/assets/createSheetDrag.ts
patterns/card-expand/assets/runCardExpand.ts
patterns/card-expand/assets/useCardExpand.ts
patterns/card-stack/assets/CardStack.tsx
patterns/card-stack/assets/stackLayout.ts
patterns/carousel/assets/carouselCore.ts
patterns/carousel/assets/createCarouselAutoplay.ts
patterns/carousel/assets/useCarousel.ts
patterns/cart-fly/assets/flyToTarget.ts
patterns/cart-fly/assets/useCartFly.ts
patterns/celebration/assets/Celebration.tsx
patterns/celebration/assets/createCelebration.ts
patterns/checkbox-radio/assets/Checkbox.tsx
patterns/checkbox-radio/assets/Radio.tsx
patterns/count-up/assets/CountUp.tsx
patterns/count-up/assets/createCountUp.ts
patterns/drag-to-reorder/assets/createDragReorder.ts
patterns/drag-to-reorder/assets/useDragReorder.ts
patterns/dropdown-menu/assets/DropdownMenu.tsx
patterns/dropdown-menu/assets/createMenu.ts
patterns/dropdown-menu/assets/placeMenu.ts
patterns/edge-swipe-back/assets/animateSpring.ts
patterns/edge-swipe-back/assets/createEdgeSwipe.ts
patterns/edge-swipe-back/assets/edgeSwipeCore.ts
patterns/edge-swipe-back/assets/spring.ts
patterns/edge-swipe-back/assets/useEdgeSwipeBack.ts
patterns/enter-exit/assets/Presence.tsx
patterns/enter-exit/assets/createPresence.ts
patterns/file-upload/assets/FileDropZone.tsx
patterns/file-upload/assets/createDropZone.ts
patterns/file-upload/assets/validateFiles.ts
patterns/flip-list/assets/captureFlip.ts
patterns/flip-list/assets/useFlipList.ts
patterns/floating-label/assets/TextField.tsx
patterns/form-shake-error/assets/ShakeField.tsx
patterns/form-shake-error/assets/shakeCore.ts
patterns/glass-nav/assets/createGlassNav.ts
patterns/glass-nav/assets/navScrollCore.ts
patterns/glass-nav/assets/navSpyCore.ts
patterns/glass-nav/assets/useGlassNav.ts
patterns/glass-surface/assets/Glass.tsx
patterns/hamburger-menu/assets/HamburgerMenu.tsx
patterns/infinite-scroll/assets/createInfiniteScroll.ts
patterns/infinite-scroll/assets/useInfiniteScroll.ts
patterns/layout-audit/assets/audit.mjs
patterns/layout-audit/assets/auditCore.ts
patterns/layout-audit/assets/auditLayout.ts
patterns/layout-audit/assets/layoutTokens.ts
patterns/layout-principles/assets/Icon.tsx
patterns/layout-principles/assets/Illustration.tsx
patterns/layout-principles/assets/icons.ts
patterns/layout-principles/assets/illustrations.ts
patterns/layout-principles/assets/layoutTokens.ts
patterns/layout-principles/assets/palette.ts
patterns/like-pop/assets/DoubleTapArea.tsx
patterns/like-pop/assets/LikeButton.tsx
patterns/like-pop/assets/createDoubleTap.ts
patterns/loading-button/assets/LoadingButton.tsx
patterns/loading-button/assets/createAsyncAction.ts
patterns/loading-button/assets/useAsyncAction.ts
patterns/long-press-menu/assets/LongPressMenu.tsx
patterns/long-press-menu/assets/createLongPress.ts
patterns/long-press-menu/assets/placeContextMenu.ts
patterns/modal-dialog/assets/Modal.tsx
patterns/motion-audit/assets/audit.mjs
patterns/motion-audit/assets/auditCore.ts
patterns/motion-audit/assets/auditMotion.ts
patterns/motion-principles/assets/motionTokens.ts
patterns/otp-input/assets/OtpInput.tsx
patterns/otp-input/assets/createOtpInput.ts
patterns/otp-input/assets/shakeCore.ts
patterns/page-transition/assets/runPageTransition.ts
patterns/page-transition/assets/usePageStack.ts
patterns/pinch-zoom/assets/PinchZoom.tsx
patterns/pinch-zoom/assets/createPinchZoom.ts
patterns/pinch-zoom/assets/pinchCore.ts
patterns/progress-ring/assets/ActivityRings.tsx
patterns/progress-ring/assets/ProgressRing.tsx
patterns/progress-ring/assets/ringGeometry.ts
patterns/pull-to-refresh/assets/PullToRefresh.tsx
patterns/pull-to-refresh/assets/createPullToRefresh.ts
patterns/quantity-stepper/assets/QuantityStepper.tsx
patterns/quantity-stepper/assets/createHoldRepeat.ts
patterns/range-slider/assets/RangeSlider.tsx
patterns/range-slider/assets/rangeValues.ts
patterns/scroll-reveal/assets/ScrollReveal.tsx
patterns/scroll-reveal/assets/revealOnScroll.ts
patterns/scroll-reveal/assets/useScrollReveal.ts
patterns/search-suggest/assets/createSuggestSearch.ts
patterns/search-suggest/assets/useSearchSuggest.ts
patterns/segmented-control/assets/SegmentedControl.tsx
patterns/segmented-control/assets/moveSegmentThumb.ts
patterns/segmented-control/assets/useSegmentedControl.ts
patterns/select/assets/Select.tsx
patterns/select/assets/selectCore.ts
patterns/skeleton/assets/Skeleton.tsx
patterns/spring-physics/assets/animateSpring.ts
patterns/spring-physics/assets/spring.ts
patterns/spring-physics/assets/useSpring.ts
patterns/sticky-header/assets/observeHeaderCollapse.ts
patterns/sticky-header/assets/useStickyHeader.ts
patterns/story-progress/assets/createStoryProgress.ts
patterns/story-progress/assets/useStoryProgress.ts
patterns/stretchy-header/assets/createStretchyHeader.ts
patterns/stretchy-header/assets/stretchCore.ts
patterns/stretchy-header/assets/useStretchyHeader.ts
patterns/swipe-dismiss-viewer/assets/SwipeDismissViewer.tsx
patterns/swipe-dismiss-viewer/assets/animateSpring.ts
patterns/swipe-dismiss-viewer/assets/createSwipeDismiss.ts
patterns/swipe-dismiss-viewer/assets/dismissCore.ts
patterns/swipe-dismiss-viewer/assets/spring.ts
patterns/swipe-to-delete/assets/SwipeToDelete.tsx
patterns/swipe-to-delete/assets/createSwipeDelete.ts
patterns/switch/assets/Switch.tsx
patterns/tab-indicator/assets/moveTabIndicator.ts
patterns/tab-indicator/assets/useTabIndicator.ts
patterns/theme-toggle/assets/ThemeToggle.tsx
patterns/theme-toggle/assets/runThemeTransition.ts
patterns/theme-toggle/assets/useTheme.ts
patterns/toast-stack/assets/createToastStack.ts
patterns/toast-stack/assets/useToastStack.ts
patterns/tooltip/assets/Tooltip.tsx
patterns/tooltip/assets/createTooltipTrigger.ts
patterns/virtual-list/assets/useVirtualList.ts
patterns/virtual-list/assets/virtualRange.ts
patterns/wheel-picker/assets/WheelPicker.tsx
patterns/wheel-picker/assets/createWheel.ts
patterns/wheel-picker/assets/wheelCore.ts
patterns/zoom-lightbox/assets/openZoom.ts
scripts/audit.mjs
scripts/auditAll.ts
scripts/hookCore.ts
scripts/palette.mjs
scripts/post-edit-hook.mjs

Files

../../.claude-plugin/marketplace.jsonasset726 bytes
../../.claude-plugin/plugin.jsonasset773 bytes
../../.claude-plugin/plugin.jsonasset773 bytes
SKILL.mdcore57,732 bytes
patterns/accordion/PATTERN.mddoc4,949 bytes
patterns/accordion/assets/Accordion.tsxruns2,622 bytes
patterns/accordion/assets/accordion.cssasset2,348 bytes
patterns/accordion/assets/accordionCore.tsruns736 bytes
patterns/bottom-nav/PATTERN.mddoc9,663 bytes
patterns/bottom-nav/assets/BottomNav.tsxruns3,666 bytes
patterns/bottom-nav/assets/bottom-nav.cssasset3,912 bytes
patterns/bottom-nav/assets/bottomNavCore.tsruns4,880 bytes
patterns/bottom-sheet/PATTERN.mddoc4,998 bytes
patterns/bottom-sheet/assets/BottomSheet.tsxruns3,174 bytes
patterns/bottom-sheet/assets/bottom-sheet.cssasset2,008 bytes
patterns/bottom-sheet/assets/createSheetDrag.tsruns6,538 bytes
patterns/card-expand/PATTERN.mddoc10,804 bytes
patterns/card-expand/assets/card-expand.cssasset7,394 bytes
patterns/card-expand/assets/runCardExpand.tsruns5,510 bytes
patterns/card-expand/assets/useCardExpand.tsruns3,328 bytes
patterns/card-stack/PATTERN.mddoc7,871 bytes
patterns/card-stack/assets/CardStack.tsxruns3,758 bytes
patterns/card-stack/assets/card-stack.cssasset2,845 bytes
patterns/card-stack/assets/stackLayout.tsruns5,118 bytes
patterns/carousel/PATTERN.mddoc5,334 bytes
patterns/carousel/assets/carousel.cssasset2,264 bytes
patterns/carousel/assets/carouselCore.tsruns3,601 bytes
patterns/carousel/assets/createCarouselAutoplay.tsruns2,505 bytes
patterns/carousel/assets/useCarousel.tsruns2,199 bytes
patterns/cart-fly/PATTERN.mddoc4,260 bytes
patterns/cart-fly/assets/flyToTarget.tsruns3,544 bytes
patterns/cart-fly/assets/useCartFly.tsruns690 bytes
patterns/celebration/PATTERN.mddoc9,186 bytes
patterns/celebration/assets/Celebration.tsxruns5,874 bytes
patterns/celebration/assets/celebration.cssasset5,398 bytes
patterns/celebration/assets/createCelebration.tsruns3,110 bytes
patterns/checkbox-radio/PATTERN.mddoc4,968 bytes
patterns/checkbox-radio/assets/Checkbox.tsxruns976 bytes
patterns/checkbox-radio/assets/Radio.tsxruns880 bytes
patterns/checkbox-radio/assets/checkbox-radio.cssasset3,334 bytes
patterns/count-up/PATTERN.mddoc4,111 bytes
patterns/count-up/assets/CountUp.tsxruns1,544 bytes
patterns/count-up/assets/count-up.cssasset576 bytes
patterns/count-up/assets/createCountUp.tsruns2,217 bytes
patterns/drag-to-reorder/PATTERN.mddoc6,550 bytes
patterns/drag-to-reorder/assets/createDragReorder.tsruns10,085 bytes
patterns/drag-to-reorder/assets/drag-to-reorder.cssasset2,307 bytes
patterns/drag-to-reorder/assets/useDragReorder.tsruns3,091 bytes
patterns/dropdown-menu/PATTERN.mddoc6,236 bytes
patterns/dropdown-menu/assets/DropdownMenu.tsxruns2,987 bytes
patterns/dropdown-menu/assets/createMenu.tsruns6,416 bytes
patterns/dropdown-menu/assets/dropdown-menu.cssasset2,928 bytes
patterns/dropdown-menu/assets/placeMenu.tsruns2,537 bytes
patterns/edge-swipe-back/PATTERN.mddoc11,598 bytes
patterns/edge-swipe-back/assets/animateSpring.tsruns1,987 bytes
patterns/edge-swipe-back/assets/createEdgeSwipe.tsruns9,804 bytes
patterns/edge-swipe-back/assets/edge-swipe-back.cssasset2,728 bytes
patterns/edge-swipe-back/assets/edgeSwipeCore.tsruns2,297 bytes
patterns/edge-swipe-back/assets/spring.tsruns5,177 bytes
patterns/edge-swipe-back/assets/useEdgeSwipeBack.tsruns2,777 bytes
patterns/enter-exit/PATTERN.mddoc4,630 bytes
patterns/enter-exit/assets/Presence.tsxruns2,438 bytes
patterns/enter-exit/assets/createPresence.tsruns2,605 bytes
patterns/enter-exit/assets/enter-exit.cssasset1,734 bytes
patterns/enter-exit/references/edge-cases.mddoc1,299 bytes
patterns/file-upload/PATTERN.mddoc7,621 bytes
patterns/file-upload/assets/FileDropZone.tsxruns7,384 bytes
patterns/file-upload/assets/createDropZone.tsruns3,471 bytes
patterns/file-upload/assets/file-upload.cssasset4,590 bytes
patterns/file-upload/assets/validateFiles.tsruns2,890 bytes
patterns/flip-list/PATTERN.mddoc3,695 bytes
patterns/flip-list/assets/captureFlip.tsruns2,406 bytes
patterns/flip-list/assets/useFlipList.tsruns1,195 bytes
patterns/floating-label/PATTERN.mddoc4,060 bytes
patterns/floating-label/assets/TextField.tsxruns965 bytes
patterns/floating-label/assets/floating-label.cssasset2,051 bytes
patterns/form-shake-error/PATTERN.mddoc5,371 bytes
patterns/form-shake-error/assets/ShakeField.tsxruns1,365 bytes
patterns/form-shake-error/assets/form-shake-error.cssasset2,355 bytes
patterns/form-shake-error/assets/shakeCore.tsruns1,730 bytes
patterns/glass-nav/PATTERN.mddoc9,856 bytes
patterns/glass-nav/assets/createGlassNav.tsruns8,761 bytes
patterns/glass-nav/assets/glass-nav.cssasset6,008 bytes
patterns/glass-nav/assets/navScrollCore.tsruns2,821 bytes
patterns/glass-nav/assets/navSpyCore.tsruns2,389 bytes
patterns/glass-nav/assets/useGlassNav.tsruns2,256 bytes
patterns/glass-surface/PATTERN.mddoc6,577 bytes
patterns/glass-surface/assets/Glass.tsxruns1,942 bytes
patterns/glass-surface/assets/glass.cssasset4,711 bytes
patterns/hamburger-menu/PATTERN.mddoc5,239 bytes
patterns/hamburger-menu/assets/HamburgerMenu.tsxruns2,593 bytes
patterns/hamburger-menu/assets/hamburger-menu.cssasset3,558 bytes
patterns/infinite-scroll/PATTERN.mddoc7,693 bytes
patterns/infinite-scroll/assets/createInfiniteScroll.tsruns3,885 bytes
patterns/infinite-scroll/assets/infinite-scroll.cssasset1,943 bytes
patterns/infinite-scroll/assets/useInfiniteScroll.tsruns2,220 bytes
patterns/layout-audit/PATTERN.mddoc16,461 bytes
patterns/layout-audit/assets/audit.mjsruns2,414 bytes
patterns/layout-audit/assets/auditCore.tsruns10,002 bytes
patterns/layout-audit/assets/auditLayout.tsruns91,328 bytes
patterns/layout-audit/assets/layoutTokens.tsruns5,255 bytes
patterns/layout-principles/PATTERN.mddoc22,279 bytes
patterns/layout-principles/assets/Icon.tsxruns1,485 bytes
patterns/layout-principles/assets/Illustration.tsxruns1,042 bytes
patterns/layout-principles/assets/content-art.cssasset12,316 bytes
patterns/layout-principles/assets/icons.tsruns21,637 bytes
patterns/layout-principles/assets/illustrations.tsruns109,681 bytes
patterns/layout-principles/assets/layout-tokens.cssasset8,266 bytes
patterns/layout-principles/assets/layoutTokens.tsruns5,255 bytes
patterns/layout-principles/assets/palette.tsruns10,923 bytes
patterns/layout-principles/references/copy.mddoc8,793 bytes
patterns/layout-principles/references/principles.mddoc26,259 bytes
patterns/layout-principles/references/react-native.mddoc7,994 bytes
patterns/layout-principles/references/screen-conventions.mddoc81,239 bytes
patterns/layout-principles/references/tone.mddoc29,700 bytes
patterns/like-pop/PATTERN.mddoc4,546 bytes
patterns/like-pop/assets/DoubleTapArea.tsxruns2,387 bytes
patterns/like-pop/assets/LikeButton.tsxruns1,320 bytes
patterns/like-pop/assets/createDoubleTap.tsruns1,821 bytes
patterns/like-pop/assets/like-pop.cssasset2,751 bytes
patterns/loading-button/PATTERN.mddoc6,015 bytes
patterns/loading-button/assets/LoadingButton.tsxruns2,917 bytes
patterns/loading-button/assets/createAsyncAction.tsruns3,555 bytes
patterns/loading-button/assets/loading-button.cssasset5,151 bytes
patterns/loading-button/assets/useAsyncAction.tsruns1,480 bytes
patterns/long-press-menu/PATTERN.mddoc8,620 bytes
patterns/long-press-menu/assets/LongPressMenu.tsxruns6,441 bytes
patterns/long-press-menu/assets/createLongPress.tsruns4,261 bytes
patterns/long-press-menu/assets/long-press-menu.cssasset4,604 bytes
patterns/long-press-menu/assets/placeContextMenu.tsruns2,306 bytes
patterns/modal-dialog/PATTERN.mddoc5,679 bytes
patterns/modal-dialog/assets/Modal.tsxruns3,309 bytes
patterns/modal-dialog/assets/modal-dialog.cssasset2,820 bytes
patterns/motion-audit/PATTERN.mddoc9,297 bytes
patterns/motion-audit/assets/audit.mjsruns2,273 bytes
patterns/motion-audit/assets/auditCore.tsruns10,002 bytes
patterns/motion-audit/assets/auditMotion.tsruns17,237 bytes
patterns/motion-principles/PATTERN.mddoc7,175 bytes
patterns/motion-principles/assets/motion-tokens.cssasset2,827 bytes
patterns/motion-principles/assets/motionTokens.tsruns3,703 bytes
patterns/motion-principles/references/decision-table.mddoc3,864 bytes
patterns/otp-input/PATTERN.mddoc6,566 bytes
patterns/otp-input/assets/OtpInput.tsxruns3,848 bytes
patterns/otp-input/assets/createOtpInput.tsruns4,958 bytes
patterns/otp-input/assets/otp-input.cssasset2,488 bytes
patterns/otp-input/assets/shakeCore.tsruns1,730 bytes
patterns/page-transition/PATTERN.mddoc8,002 bytes
patterns/page-transition/assets/page-transition.cssasset3,451 bytes
patterns/page-transition/assets/runPageTransition.tsruns2,212 bytes
patterns/page-transition/assets/usePageStack.tsruns2,210 bytes
patterns/pinch-zoom/PATTERN.mddoc5,093 bytes
patterns/pinch-zoom/assets/PinchZoom.tsxruns1,602 bytes
patterns/pinch-zoom/assets/createPinchZoom.tsruns5,075 bytes
patterns/pinch-zoom/assets/pinch-zoom.cssasset2,217 bytes
patterns/pinch-zoom/assets/pinchCore.tsruns1,558 bytes
patterns/press-feedback/PATTERN.mddoc2,607 bytes
patterns/press-feedback/assets/press-feedback.cssasset1,418 bytes
patterns/progress-ring/PATTERN.mddoc7,562 bytes
patterns/progress-ring/assets/ActivityRings.tsxruns2,066 bytes
patterns/progress-ring/assets/ProgressRing.tsxruns3,219 bytes
patterns/progress-ring/assets/progress-ring.cssasset3,460 bytes
patterns/progress-ring/assets/ringGeometry.tsruns2,112 bytes
patterns/pull-to-refresh/PATTERN.mddoc3,832 bytes
patterns/pull-to-refresh/assets/PullToRefresh.tsxruns2,110 bytes
patterns/pull-to-refresh/assets/createPullToRefresh.tsruns3,237 bytes
patterns/pull-to-refresh/assets/pull-to-refresh.cssasset1,664 bytes
patterns/quantity-stepper/PATTERN.mddoc5,629 bytes
patterns/quantity-stepper/assets/QuantityStepper.tsxruns8,006 bytes
patterns/quantity-stepper/assets/createHoldRepeat.tsruns2,142 bytes
patterns/quantity-stepper/assets/quantity-stepper.cssasset2,930 bytes
patterns/range-slider/PATTERN.mddoc5,892 bytes
patterns/range-slider/assets/RangeSlider.tsxruns3,522 bytes
patterns/range-slider/assets/range-slider.cssasset4,059 bytes
patterns/range-slider/assets/rangeValues.tsruns3,016 bytes
patterns/scroll-reveal/PATTERN.mddoc4,058 bytes
patterns/scroll-reveal/assets/ScrollReveal.tsxruns1,079 bytes
patterns/scroll-reveal/assets/revealOnScroll.tsruns1,949 bytes
patterns/scroll-reveal/assets/scroll-reveal.cssasset1,131 bytes
patterns/scroll-reveal/assets/useScrollReveal.tsruns1,176 bytes
patterns/search-suggest/PATTERN.mddoc7,006 bytes
patterns/search-suggest/assets/createSuggestSearch.tsruns3,334 bytes
patterns/search-suggest/assets/search-suggest.cssasset2,713 bytes
patterns/search-suggest/assets/useSearchSuggest.tsruns4,845 bytes
patterns/segmented-control/PATTERN.mddoc6,652 bytes
patterns/segmented-control/assets/SegmentedControl.tsxruns1,989 bytes
patterns/segmented-control/assets/moveSegmentThumb.tsruns2,081 bytes
patterns/segmented-control/assets/segmented-control.cssasset3,481 bytes
patterns/segmented-control/assets/useSegmentedControl.tsruns1,606 bytes
patterns/select/PATTERN.mddoc4,631 bytes
patterns/select/assets/Select.tsxruns4,911 bytes
patterns/select/assets/select.cssasset3,354 bytes
patterns/select/assets/selectCore.tsruns936 bytes
patterns/skeleton/PATTERN.mddoc3,572 bytes
patterns/skeleton/assets/Skeleton.tsxruns1,184 bytes
patterns/skeleton/assets/skeleton.cssasset2,178 bytes
patterns/spring-physics/PATTERN.mddoc6,031 bytes
patterns/spring-physics/assets/animateSpring.tsruns1,987 bytes
patterns/spring-physics/assets/spring.tsruns5,177 bytes
patterns/spring-physics/assets/useSpring.tsruns1,948 bytes
patterns/sticky-header/PATTERN.mddoc3,265 bytes
patterns/sticky-header/assets/observeHeaderCollapse.tsruns1,475 bytes
patterns/sticky-header/assets/sticky-header.cssasset1,569 bytes
patterns/sticky-header/assets/useStickyHeader.tsruns847 bytes
patterns/story-progress/PATTERN.mddoc4,032 bytes
patterns/story-progress/assets/createStoryProgress.tsruns2,959 bytes
patterns/story-progress/assets/story-progress.cssasset750 bytes
patterns/story-progress/assets/useStoryProgress.tsruns1,797 bytes
patterns/stretchy-header/PATTERN.mddoc6,398 bytes
patterns/stretchy-header/assets/createStretchyHeader.tsruns5,704 bytes
patterns/stretchy-header/assets/stretchCore.tsruns3,371 bytes
patterns/stretchy-header/assets/stretchy-header.cssasset3,159 bytes
patterns/stretchy-header/assets/useStretchyHeader.tsruns1,407 bytes
patterns/swipe-dismiss-viewer/PATTERN.mddoc6,110 bytes
patterns/swipe-dismiss-viewer/assets/SwipeDismissViewer.tsxruns2,613 bytes
patterns/swipe-dismiss-viewer/assets/animateSpring.tsruns1,987 bytes
patterns/swipe-dismiss-viewer/assets/createSwipeDismiss.tsruns6,462 bytes
patterns/swipe-dismiss-viewer/assets/dismissCore.tsruns2,347 bytes
patterns/swipe-dismiss-viewer/assets/spring.tsruns5,177 bytes
patterns/swipe-dismiss-viewer/assets/swipe-dismiss-viewer.cssasset2,055 bytes
patterns/swipe-to-delete/PATTERN.mddoc8,328 bytes
patterns/swipe-to-delete/assets/SwipeToDelete.tsxruns6,766 bytes
patterns/swipe-to-delete/assets/createSwipeDelete.tsruns4,791 bytes
patterns/swipe-to-delete/assets/swipe-to-delete.cssasset4,380 bytes
patterns/switch/PATTERN.mddoc4,033 bytes
patterns/switch/assets/Switch.tsxruns1,085 bytes
patterns/switch/assets/switch.cssasset3,117 bytes
patterns/tab-indicator/PATTERN.mddoc4,057 bytes
patterns/tab-indicator/assets/moveTabIndicator.tsruns1,509 bytes
patterns/tab-indicator/assets/tab-indicator.cssasset1,147 bytes
patterns/tab-indicator/assets/useTabIndicator.tsruns1,530 bytes
patterns/theme-toggle/PATTERN.mddoc7,483 bytes
patterns/theme-toggle/assets/ThemeToggle.tsxruns2,929 bytes
patterns/theme-toggle/assets/runThemeTransition.tsruns5,429 bytes
patterns/theme-toggle/assets/theme-toggle.cssasset3,153 bytes
patterns/theme-toggle/assets/useTheme.tsruns2,519 bytes
patterns/toast-stack/PATTERN.mddoc4,722 bytes
patterns/toast-stack/assets/createToastStack.tsruns3,925 bytes
patterns/toast-stack/assets/toast-stack.cssasset2,110 bytes
patterns/toast-stack/assets/useToastStack.tsruns1,223 bytes
patterns/tooltip/PATTERN.mddoc4,874 bytes
patterns/tooltip/assets/Tooltip.tsxruns1,615 bytes
patterns/tooltip/assets/createTooltipTrigger.tsruns2,102 bytes
patterns/tooltip/assets/tooltip.cssasset3,133 bytes
patterns/virtual-list/PATTERN.mddoc8,006 bytes
patterns/virtual-list/assets/useVirtualList.tsruns4,643 bytes
patterns/virtual-list/assets/virtual-list.cssasset1,316 bytes
patterns/virtual-list/assets/virtualRange.tsruns3,223 bytes
patterns/wheel-picker/PATTERN.mddoc7,452 bytes
patterns/wheel-picker/assets/WheelPicker.tsxruns3,442 bytes
patterns/wheel-picker/assets/createWheel.tsruns7,675 bytes
patterns/wheel-picker/assets/wheel-picker.cssasset3,008 bytes
patterns/wheel-picker/assets/wheelCore.tsruns4,079 bytes
patterns/zoom-lightbox/PATTERN.mddoc3,325 bytes
patterns/zoom-lightbox/assets/openZoom.tsruns3,256 bytes
patterns/zoom-lightbox/assets/zoom-lightbox.cssasset946 bytes
scripts/audit.mjsruns2,523 bytes
scripts/auditAll.tsruns1,716 bytes
scripts/hookCore.tsruns8,935 bytes
scripts/palette.mjsruns1,551 bytes
scripts/post-edit-hook.mjsruns2,672 bytes

Read SKILL.md


# suta — AI 슬롭 없는 UI

AI에게 UI를 맡기면 어디서 본 듯한, 티 나는 결과가 나온다. 모든 섹션을 카드로 감싸고 간격을 한 값으로 맞추고, 그라데이션과 배지로 꾸민다. 장식을 걷어 내도 흰 바탕에 선만 남고, 강조색은 프레임워크 기본 파랑이고, 상태마다 연노랑·주황·연두 알약을 붙이고, 같은 정보와 버튼을 두세 곳에 반복하고, 글자는 작고 흐리다. 모든 요소에 `transition: all`을 붙이고, `height`·`top`을 움직여 화면이 버벅이고, 동작 줄이기 설정을 무시하고, `div`에 `onClick`을 달아 키보드로 쓸 수 없게 만든다. 이 스킬은 그런 UI가 나오지 않게 한다. 아래 금지선을 지키고, 검증된 패턴 57종(테스트·접근성·reduced-motion을 갖춘 코드)을 프로젝트에 맞게 가져다 쓴다.

수타(手打)는 기계가 아니라 손으로 친다는 뜻이다. 찍어낸 UI가 아니라 손으로 다듬은 UI를 목표로 한다.

## 폴더 지도

| 경로 | 내용 |
|---|---|
| `SKILL.md` | 이 문서 — 작업 절차, 금지선, 레이아웃·모션 값, 패턴 카탈로그 |
| `patterns/{패턴}/PATTERN.md` | 패턴 설명서 — 언제 쓰는가, 왜 이 기술인가, 파일 표, 사용법(React / 순수 JS), 커스터마이즈, 주의사항 |
| `patterns/{패턴}/assets/` | 복사해 쓰는 코드 — 프레임워크 무관 코어(.ts, 의존성 0) + React 래퍼(.tsx) + CSS |
| `scripts/audit.mjs` | 통합 검사 — 레이아웃·색·문구·모션 규칙을 한 번에 돌린다. 편집 후 검사 훅(`scripts/post-edit-hook.mjs`)도 같은 검사를 쓴다 |

View the complete source on GitHub

Skills included

suta

Repository facts

License: MIT
Created: Aug 19, 2026
Last pushed: Nov 6, 2026
Forks: 2
Open issues: 0
Project activity: Active

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 32 notes

.claude-plugin/plugin.json:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/suta/patterns/layout-principles/assets/illustrations.ts:37 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:36 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:38 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:39 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:40 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:41 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:42 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:43 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:44 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:45 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:46 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:47 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:48 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:49 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:50 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:51 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:64 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:72 Analysis incomplete: physical or joined line exceeds character limit
skills/suta/patterns/layout-principles/assets/illustrations.ts:71 Analysis incomplete: physical or joined line exceeds character limit

No broad tool permissions
No dangerous shell commands
95 network referencesin 64 files: .claude-plugin/marketplace.json:3 suta/patterns/layout-principles/assets/icons.ts:5 suta/patterns/layout-principles/assets/illustrations.ts:7 and 61 more
3 obfuscation signalsin 2 files: suta/patterns/layout-principles/assets/illustrations.ts:47 suta/patterns/layout-audit/assets/auditLayout.ts:70
No instruction overrides
139 executable scriptsin 139 files: suta/patterns/accordion/assets/Accordion.tsx:1 suta/patterns/accordion/assets/accordionCore.ts:1 suta/patterns/bottom-nav/assets/BottomNav.tsx:1 and 136 more
No access to secrets
No requests to vote in Hot

Show all 237 signals by file

`.claude-plugin/marketplace.json`

Network accessline 3

"owner": {     "name": "Guksu",     "url": "https://github.com/Guksu"

Network accessline 4

"name": "Guksu",     "url": "https://github.com/Guksu"   },

Network accessline 5
```
"url": "https://github.com/Guksu"
```

Network accessline 16

"version": "0.15.0",       "author": { "name": "Guksu" },       "homepage": "https://github.com/Guksu/suta",

Network accessline 17

"author": { "name": "Guksu" },       "homepage": "https://github.com/Guksu/suta",       "keywords": ["ai-slop", "frontend", "ui", "layout", "animation", "interaction", "accessibility", "css", "react"]

Network accessline 18

"homepage": "https://github.com/Guksu/suta",

`.claude-plugin/plugin.json`

Network accessline 3

"description": "UI guidelines and code for 57 patterns for Claude Code and Codex. Includes layout, color, motion and accessibility guidance, with checks after supported file edits.",   "version": "0.15.0",   "author": { "name": "Guksu", "ur

Network accessline 4

"version": "0.15.0",   "author": { "name": "Guksu", "url": "https://github.com/Guksu" },   "homepage": "https://guksu.github.io/suta/",

Network accessline 5

"author": { "name": "Guksu", "url": "https://github.com/Guksu" },

Network accessline 6

"homepage": "https://guksu.github.io/suta/",

Network accessline 7

"repository": "https://github.com/Guksu/suta",

`skills/suta/patterns/accordion/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/accordion

`skills/suta/patterns/accordion/assets/Accordion.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/accordion/assets/accordionCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/bottom-nav/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/bottom-nav

`skills/suta/patterns/bottom-nav/assets/BottomNav.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/bottom-nav/assets/bottomNavCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/bottom-sheet/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/bottom-sheet

`skills/suta/patterns/bottom-sheet/assets/BottomSheet.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/bottom-sheet/assets/createSheetDrag.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/card-expand/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/card-expand

`skills/suta/patterns/card-expand/assets/runCardExpand.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/card-expand/assets/useCardExpand.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/card-stack/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/card-stack

`skills/suta/patterns/card-stack/assets/CardStack.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/card-stack/assets/stackLayout.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/carousel/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/carousel

`skills/suta/patterns/carousel/assets/carouselCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/carousel/assets/createCarouselAutoplay.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/carousel/assets/useCarousel.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/cart-fly/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/cart-fly

`skills/suta/patterns/cart-fly/assets/flyToTarget.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/cart-fly/assets/useCartFly.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/celebration/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/celebration

`skills/suta/patterns/celebration/assets/Celebration.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/celebration/assets/createCelebration.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/checkbox-radio/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/checkbox-radio

`skills/suta/patterns/checkbox-radio/assets/Checkbox.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/checkbox-radio/assets/Radio.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/count-up/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/count-up

`skills/suta/patterns/count-up/assets/CountUp.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/count-up/assets/createCountUp.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/drag-to-reorder/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/drag-to-reorder

`skills/suta/patterns/drag-to-reorder/assets/createDragReorder.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/drag-to-reorder/assets/useDragReorder.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/dropdown-menu/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/dropdown-menu

`skills/suta/patterns/dropdown-menu/assets/DropdownMenu.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/dropdown-menu/assets/createMenu.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/dropdown-menu/assets/placeMenu.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/edge-swipe-back/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/edge-swipe-back

`skills/suta/patterns/edge-swipe-back/assets/animateSpring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/edge-swipe-back/assets/createEdgeSwipe.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/edge-swipe-back/assets/edgeSwipeCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/edge-swipe-back/assets/spring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/edge-swipe-back/assets/useEdgeSwipeBack.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/enter-exit/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/enter-exit

`skills/suta/patterns/enter-exit/assets/Presence.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/enter-exit/assets/createPresence.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/file-upload/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/file-upload

`skills/suta/patterns/file-upload/assets/FileDropZone.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/file-upload/assets/createDropZone.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/file-upload/assets/validateFiles.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/flip-list/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/flip-list

`skills/suta/patterns/flip-list/assets/captureFlip.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/flip-list/assets/useFlipList.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/floating-label/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/floating-label

`skills/suta/patterns/floating-label/assets/TextField.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/form-shake-error/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/form-shake-error

`skills/suta/patterns/form-shake-error/assets/ShakeField.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/form-shake-error/assets/shakeCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/glass-nav/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/glass-nav

`skills/suta/patterns/glass-nav/assets/createGlassNav.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/glass-nav/assets/navScrollCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/glass-nav/assets/navSpyCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/glass-nav/assets/useGlassNav.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/glass-surface/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/glass-surface

`skills/suta/patterns/glass-surface/assets/Glass.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/hamburger-menu/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/hamburger-menu

`skills/suta/patterns/hamburger-menu/assets/HamburgerMenu.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/infinite-scroll/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/infinite-scroll

`skills/suta/patterns/infinite-scroll/assets/createInfiniteScroll.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/infinite-scroll/assets/useInfiniteScroll.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/layout-audit/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/layout-audit

`skills/suta/patterns/layout-audit/assets/audit.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`skills/suta/patterns/layout-audit/assets/auditCore.ts`

Executable scriptline 1
```
Executable file
```

Network accessline 144

/** 문자열은 그대로 두고 // · 블록 주석만 공백으로 지운다 — 'https://…' 같은 문자열 속 //를 주석으로 보지 않는다 */

`skills/suta/patterns/layout-audit/assets/auditLayout.ts`

Executable scriptline 1
```
Executable file
```

Possible obfuscationline 70

const EMOJI = /\p{Emoji_Presentation}|\p{Extended_Pictographic}<U+FE0F>/gu

`skills/suta/patterns/layout-audit/assets/layoutTokens.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/layout-principles/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/layout-principles

`skills/suta/patterns/layout-principles/assets/Icon.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/layout-principles/assets/Illustration.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/layout-principles/assets/icons.ts`

Executable scriptline 1
```
Executable file
```

Network accessline 5

* 이 목록에 없는 아이콘이 필요하면 같은 출처(Lucide)에서 같은 형식으로 더한다 — 다른 아이콘 세트와 섞지 않는다.  *  * 경로 출처: Lucide v0.469.0 (https://lucide.dev)

Network accessline 6

*  * 경로 출처: Lucide v0.469.0 (https://lucide.dev)  * ISC License

Network accessline 7

* 경로 출처: Lucide v0.469.0 (https://lucide.dev)

Network accessline 197

.join('')   const a11y = label ? `role="img" aria-label="${label.replace(/"/g, '&quot;')}"` : 'aria-hidden="true"'   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="${filled ? 'curr

Network accessline 198

const a11y = label ? `role="img" aria-label="${label.replace(/"/g, '&quot;')}"` : 'aria-hidden="true"'   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="${filled ? 'currentColor' :

Network accessline 199

return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="${filled ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="roun

`skills/suta/patterns/layout-principles/assets/illustrations.ts`

Executable scriptline 1
```
Executable file
```

Network accessline 7

* 원본의 돈주머니·지폐 그림은 달러($) 표시가 있어 원화 서비스에 어긋나서 넣지 않았다(가계부 온보딩 판정 8번이 짚었다).  *  * 그림 출처: Microsoft Fluent Emoji(Flat 스타일, https://github.com/microsoft/fluentui-emoji)

Network accessline 8

*  * 그림 출처: Microsoft Fluent Emoji(Flat 스타일, https://github.com/microsoft/fluentui-emoji)  * MIT License

Network accessline 9

* 그림 출처: Microsoft Fluent Emoji(Flat 스타일, https://github.com/microsoft/fluentui-emoji)

Possible obfuscationline 47

'bread': '<path d="M27.3408 25.5926L15 30V16.5L29 13V23.2382C29 24.2947 28.3358 25.2372 27.3408 25.5926Z" fill="#F3AD61"/><path d="M14.5898 3.26178L3.20215 7.55596L16.9999 19.0001L27.9812 15.1988C29.1895 14.7806 29.9999 13.6425 29.9999 12.3

Possible obfuscationline 72

'hotel': '<path d="M21 8.01629C21 5.23834 18.76 3 16 3C13.24 3 11 5.24834 11 8.01629V8H3V8.01629V29.1706V30H3.83H11H21H28.17H29V29.1706V8.01629V8H21V8.01629Z" fill="#FFDEA7"/><path d="M11 8V30H10V8H11ZM22 8H21V30H22V8Z" fill="#F3AD61"/><pat

Network accessline 102

export const illustrationSvg = ({ name, size = 40, label }: { name: IllustrationName; size?: number; label?: string }) => {   const a11y = label ? `role="img" aria-label="${label.replace(/"/g, '&quot;')}"` : 'aria-hidden="true"'   return `<

Network accessline 103

const a11y = label ? `role="img" aria-label="${label.replace(/"/g, '&quot;')}"` : 'aria-hidden="true"'   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 32 32" fill="none" focusable="false" ${a1

Network accessline 104

return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 32 32" fill="none" focusable="false" ${a11y}>${ILLUSTRATIONS[name]}</svg>`

`skills/suta/patterns/layout-principles/assets/layoutTokens.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/layout-principles/assets/palette.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/like-pop/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/like-pop

Network accessline 55

onDoubleTap: ({ x, y }) => {     const rect = area.getBoundingClientRect()     const heart = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

Network accessline 56

const rect = area.getBoundingClientRect()     const heart = document.createElementNS('http://www.w3.org/2000/svg', 'svg')     heart.setAttribute('class', 'burst-heart')

Network accessline 57

const heart = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

`skills/suta/patterns/like-pop/assets/DoubleTapArea.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/like-pop/assets/LikeButton.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/like-pop/assets/createDoubleTap.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/loading-button/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/loading-button

Network accessline 53

const placeOrder = async () => {   const res = await fetch('/api/orders', { method: 'POST' })

Network accessline 54

const res = await fetch('/api/orders', { method: 'POST' })

`skills/suta/patterns/loading-button/assets/LoadingButton.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/loading-button/assets/createAsyncAction.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/loading-button/assets/useAsyncAction.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/long-press-menu/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/long-press-menu

`skills/suta/patterns/long-press-menu/assets/LongPressMenu.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/long-press-menu/assets/createLongPress.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/long-press-menu/assets/placeContextMenu.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/modal-dialog/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/modal-dialog

`skills/suta/patterns/modal-dialog/assets/Modal.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/motion-audit/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/motion-audit

`skills/suta/patterns/motion-audit/assets/audit.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`skills/suta/patterns/motion-audit/assets/auditCore.ts`

Executable scriptline 1
```
Executable file
```

Network accessline 144

/** 문자열은 그대로 두고 // · 블록 주석만 공백으로 지운다 — 'https://…' 같은 문자열 속 //를 주석으로 보지 않는다 */

`skills/suta/patterns/motion-audit/assets/auditMotion.ts`

Executable scriptline 1
```
Executable file
```

Network accessline 162

/** 실행되지 않는 글을 같은 길이의 공백으로 지운다 — 주석과 템플릿 문자열(화면에 보여 주는 예시 코드·마크업 문자열).  * 문서·데모 페이지의 예시 코드에 편집 후 훅이 걸려 에이전트를 멈추지 않게 한다. 줄 번호는 그대로다.  * `https://`의 `//`는 주석이 아니므로 바로 앞이 `:`이면 남긴다 */

Network accessline 163

* 문서·데모 페이지의 예시 코드에 편집 후 훅이 걸려 에이전트를 멈추지 않게 한다. 줄 번호는 그대로다.  * `https://`의 `//`는 주석이 아니므로 바로 앞이 `:`이면 남긴다 */ const scriptCode = (text: string) =>

Network accessline 164

* `https://`의 `//`는 주석이 아니므로 바로 앞이 `:`이면 남긴다 */

`skills/suta/patterns/motion-principles/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/motion-principles

`skills/suta/patterns/motion-principles/assets/motionTokens.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/otp-input/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/otp-input

`skills/suta/patterns/otp-input/assets/OtpInput.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/otp-input/assets/createOtpInput.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/otp-input/assets/shakeCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/page-transition/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/page-transition

`skills/suta/patterns/page-transition/assets/runPageTransition.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/page-transition/assets/usePageStack.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/pinch-zoom/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/pinch-zoom

`skills/suta/patterns/pinch-zoom/assets/PinchZoom.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/pinch-zoom/assets/createPinchZoom.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/pinch-zoom/assets/pinchCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/press-feedback/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/press-feedback

`skills/suta/patterns/progress-ring/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/progress-ring

`skills/suta/patterns/progress-ring/assets/ActivityRings.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/progress-ring/assets/ProgressRing.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/progress-ring/assets/ringGeometry.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/pull-to-refresh/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/pull-to-refresh

`skills/suta/patterns/pull-to-refresh/assets/PullToRefresh.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/pull-to-refresh/assets/createPullToRefresh.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/quantity-stepper/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/quantity-stepper

`skills/suta/patterns/quantity-stepper/assets/QuantityStepper.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/quantity-stepper/assets/createHoldRepeat.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/range-slider/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/range-slider

`skills/suta/patterns/range-slider/assets/RangeSlider.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/range-slider/assets/rangeValues.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/scroll-reveal/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/scroll-reveal

`skills/suta/patterns/scroll-reveal/assets/ScrollReveal.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/scroll-reveal/assets/revealOnScroll.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/scroll-reveal/assets/useScrollReveal.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/search-suggest/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/search-suggest

Network accessline 41

const search = useSearchSuggest<Menu>({     fetchSuggestions: ({ query, signal }) =>       fetch(`/api/menus?q=${encodeURIComponent(query)}`, { signal }).then((res) => res.json()),

Network accessline 42

fetchSuggestions: ({ query, signal }) =>       fetch(`/api/menus?q=${encodeURIComponent(query)}`, { signal }).then((res) => res.json()),     toText: (menu) => menu.name,

Network accessline 43

fetch(`/api/menus?q=${encodeURIComponent(query)}`, { signal }).then((res) => res.json()),

Network accessline 92

const search = createSuggestSearch({   fetchSuggestions: ({ query, signal }) => fetch(`/api/menus?q=${query}`, { signal }).then((r) => r.json()),

Network accessline 93

fetchSuggestions: ({ query, signal }) => fetch(`/api/menus?q=${query}`, { signal }).then((r) => r.json()),

`skills/suta/patterns/search-suggest/assets/createSuggestSearch.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/search-suggest/assets/useSearchSuggest.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/segmented-control/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/segmented-control

`skills/suta/patterns/segmented-control/assets/SegmentedControl.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/segmented-control/assets/moveSegmentThumb.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/segmented-control/assets/useSegmentedControl.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/select/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/select

`skills/suta/patterns/select/assets/Select.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/select/assets/selectCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/skeleton/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/skeleton

`skills/suta/patterns/skeleton/assets/Skeleton.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/spring-physics/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/spring-physics

`skills/suta/patterns/spring-physics/assets/animateSpring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/spring-physics/assets/spring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/spring-physics/assets/useSpring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/sticky-header/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/sticky-header

`skills/suta/patterns/sticky-header/assets/observeHeaderCollapse.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/sticky-header/assets/useStickyHeader.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/story-progress/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/story-progress

`skills/suta/patterns/story-progress/assets/createStoryProgress.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/story-progress/assets/useStoryProgress.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/stretchy-header/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/stretchy-header

`skills/suta/patterns/stretchy-header/assets/createStretchyHeader.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/stretchy-header/assets/stretchCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/stretchy-header/assets/useStretchyHeader.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-dismiss-viewer/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/swipe-dismiss-viewer

`skills/suta/patterns/swipe-dismiss-viewer/assets/SwipeDismissViewer.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-dismiss-viewer/assets/animateSpring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-dismiss-viewer/assets/createSwipeDismiss.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-dismiss-viewer/assets/dismissCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-dismiss-viewer/assets/spring.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-to-delete/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/swipe-to-delete

`skills/suta/patterns/swipe-to-delete/assets/SwipeToDelete.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/swipe-to-delete/assets/createSwipeDelete.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/switch/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/switch

`skills/suta/patterns/switch/assets/Switch.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/tab-indicator/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/tab-indicator

`skills/suta/patterns/tab-indicator/assets/moveTabIndicator.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/tab-indicator/assets/useTabIndicator.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/theme-toggle/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/theme-toggle

`skills/suta/patterns/theme-toggle/assets/ThemeToggle.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/theme-toggle/assets/runThemeTransition.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/theme-toggle/assets/useTheme.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/toast-stack/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/toast-stack

`skills/suta/patterns/toast-stack/assets/createToastStack.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/toast-stack/assets/useToastStack.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/tooltip/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/tooltip

`skills/suta/patterns/tooltip/assets/Tooltip.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/tooltip/assets/createTooltipTrigger.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/virtual-list/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/virtual-list

`skills/suta/patterns/virtual-list/assets/useVirtualList.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/virtual-list/assets/virtualRange.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/wheel-picker/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/wheel-picker

`skills/suta/patterns/wheel-picker/assets/WheelPicker.tsx`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/wheel-picker/assets/createWheel.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/wheel-picker/assets/wheelCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/patterns/zoom-lightbox/PATTERN.md`

Network accessline 8

라이브 데모: https://guksu.github.io/suta/#/zoom-lightbox

`skills/suta/patterns/zoom-lightbox/assets/openZoom.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/scripts/audit.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`skills/suta/scripts/auditAll.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/scripts/hookCore.ts`

Executable scriptline 1
```
Executable file
```

`skills/suta/scripts/palette.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`skills/suta/scripts/post-edit-hook.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Declared and executed: 2 facts

Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionsuta/patterns/layout-principles/assets/icons.ts:199High confidence
Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionsuta/patterns/layout-principles/assets/illustrations.ts:104High confidence

Signal confidence: 226 facts

Network access in prose of documentationsuta/patterns/accordion/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/accordion/assets/Accordion.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/accordion/assets/accordionCore.ts:1Low confidence
Network access in prose of documentationsuta/patterns/bottom-nav/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/bottom-nav/assets/BottomNav.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/bottom-nav/assets/bottomNavCore.ts:1Low confidence
Network access in prose of documentationsuta/patterns/bottom-sheet/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/bottom-sheet/assets/BottomSheet.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/bottom-sheet/assets/createSheetDrag.ts:1Low confidence
Network access in prose of documentationsuta/patterns/card-expand/PATTERN.md:8Low confidence
Executable script in a comment of a file that runssuta/patterns/card-expand/assets/runCardExpand.ts:1Low confidence
Executable script in code of a file that runssuta/patterns/card-expand/assets/useCardExpand.ts:1High confidence
Network access in prose of documentationsuta/patterns/card-stack/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/card-stack/assets/CardStack.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/card-stack/assets/stackLayout.ts:1Low confidence
Network access in prose of documentationsuta/patterns/carousel/PATTERN.md:8Low confidence
Executable script in a comment of a file that runssuta/patterns/carousel/assets/carouselCore.ts:1Low confidence
Executable script in a comment of a file that runssuta/patterns/carousel/assets/createCarouselAutoplay.ts:1Low confidence
Executable script in code of a file that runssuta/patterns/carousel/assets/useCarousel.ts:1High confidence
Network access in prose of documentationsuta/patterns/cart-fly/PATTERN.md:8Low confidence
Executable script in a comment of a file that runssuta/patterns/cart-fly/assets/flyToTarget.ts:1Low confidence
Executable script in code of a file that runssuta/patterns/cart-fly/assets/useCartFly.ts:1High confidence
Network access in prose of documentationsuta/patterns/celebration/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/celebration/assets/Celebration.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/celebration/assets/createCelebration.ts:1Low confidence
Network access in prose of documentationsuta/patterns/checkbox-radio/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/checkbox-radio/assets/Checkbox.tsx:1High confidence
Executable script in code of a file that runssuta/patterns/checkbox-radio/assets/Radio.tsx:1High confidence
Network access in prose of documentationsuta/patterns/count-up/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/count-up/assets/CountUp.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/count-up/assets/createCountUp.ts:1Low confidence
Network access in prose of documentationsuta/patterns/drag-to-reorder/PATTERN.md:8Low confidence
Executable script in a comment of a file that runssuta/patterns/drag-to-reorder/assets/createDragReorder.ts:1Low confidence
Executable script in code of a file that runssuta/patterns/drag-to-reorder/assets/useDragReorder.ts:1High confidence
Network access in prose of documentationsuta/patterns/dropdown-menu/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/dropdown-menu/assets/DropdownMenu.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/dropdown-menu/assets/createMenu.ts:1Low confidence
Executable script in a comment of a file that runssuta/patterns/dropdown-menu/assets/placeMenu.ts:1Low confidence
Network access in prose of documentationsuta/patterns/edge-swipe-back/PATTERN.md:8Low confidence
Executable script in a comment of a file that runssuta/patterns/edge-swipe-back/assets/animateSpring.ts:1Low confidence
Executable script in code of a file that runssuta/patterns/edge-swipe-back/assets/createEdgeSwipe.ts:1High confidence
Executable script in a comment of a file that runssuta/patterns/edge-swipe-back/assets/edgeSwipeCore.ts:1Low confidence
Executable script in a comment of a file that runssuta/patterns/edge-swipe-back/assets/spring.ts:1Low confidence
Executable script in code of a file that runssuta/patterns/edge-swipe-back/assets/useEdgeSwipeBack.ts:1High confidence
Network access in prose of documentationsuta/patterns/enter-exit/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/enter-exit/assets/Presence.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/enter-exit/assets/createPresence.ts:1Low confidence
Network access in prose of documentationsuta/patterns/file-upload/PATTERN.md:8Low confidence
Executable script in code of a file that runssuta/patterns/file-upload/assets/FileDropZone.tsx:1High confidence
Executable script in a comment of a file that runssuta/patterns/file-upload/assets/createDropZone.ts:1Low confidence

and 176 more

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Manifest .claude-plugin/marketplace.json	`.claude/skills/<skill-name>/`
Codex	Native	Manifest AGENTS.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md skills/suta/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md skills/suta/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md skills/suta/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md skills/suta/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Guksu/suta

History

skills/suta/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

suta

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

.claude-plugin/marketplace.json

.claude-plugin/plugin.json

skills/suta/patterns/accordion/PATTERN.md

skills/suta/patterns/accordion/assets/Accordion.tsx

skills/suta/patterns/accordion/assets/accordionCore.ts

skills/suta/patterns/bottom-nav/PATTERN.md

skills/suta/patterns/bottom-nav/assets/BottomNav.tsx

skills/suta/patterns/bottom-nav/assets/bottomNavCore.ts

skills/suta/patterns/bottom-sheet/PATTERN.md

skills/suta/patterns/bottom-sheet/assets/BottomSheet.tsx

skills/suta/patterns/bottom-sheet/assets/createSheetDrag.ts

skills/suta/patterns/card-expand/PATTERN.md

skills/suta/patterns/card-expand/assets/runCardExpand.ts

skills/suta/patterns/card-expand/assets/useCardExpand.ts

skills/suta/patterns/card-stack/PATTERN.md

skills/suta/patterns/card-stack/assets/CardStack.tsx

skills/suta/patterns/card-stack/assets/stackLayout.ts

skills/suta/patterns/carousel/PATTERN.md

skills/suta/patterns/carousel/assets/carouselCore.ts

skills/suta/patterns/carousel/assets/createCarouselAutoplay.ts

skills/suta/patterns/carousel/assets/useCarousel.ts

skills/suta/patterns/cart-fly/PATTERN.md

skills/suta/patterns/cart-fly/assets/flyToTarget.ts

skills/suta/patterns/cart-fly/assets/useCartFly.ts

skills/suta/patterns/celebration/PATTERN.md

skills/suta/patterns/celebration/assets/Celebration.tsx

skills/suta/patterns/celebration/assets/createCelebration.ts

skills/suta/patterns/checkbox-radio/PATTERN.md

skills/suta/patterns/checkbox-radio/assets/Checkbox.tsx

skills/suta/patterns/checkbox-radio/assets/Radio.tsx

skills/suta/patterns/count-up/PATTERN.md

skills/suta/patterns/count-up/assets/CountUp.tsx

skills/suta/patterns/count-up/assets/createCountUp.ts

skills/suta/patterns/drag-to-reorder/PATTERN.md

skills/suta/patterns/drag-to-reorder/assets/createDragReorder.ts

skills/suta/patterns/drag-to-reorder/assets/useDragReorder.ts

skills/suta/patterns/dropdown-menu/PATTERN.md

skills/suta/patterns/dropdown-menu/assets/DropdownMenu.tsx

skills/suta/patterns/dropdown-menu/assets/createMenu.ts

skills/suta/patterns/dropdown-menu/assets/placeMenu.ts

skills/suta/patterns/edge-swipe-back/PATTERN.md

skills/suta/patterns/edge-swipe-back/assets/animateSpring.ts

skills/suta/patterns/edge-swipe-back/assets/createEdgeSwipe.ts

skills/suta/patterns/edge-swipe-back/assets/edgeSwipeCore.ts

skills/suta/patterns/edge-swipe-back/assets/spring.ts

skills/suta/patterns/edge-swipe-back/assets/useEdgeSwipeBack.ts

skills/suta/patterns/enter-exit/PATTERN.md

skills/suta/patterns/enter-exit/assets/Presence.tsx

skills/suta/patterns/enter-exit/assets/createPresence.ts

skills/suta/patterns/file-upload/PATTERN.md

skills/suta/patterns/file-upload/assets/FileDropZone.tsx

skills/suta/patterns/file-upload/assets/createDropZone.ts

skills/suta/patterns/file-upload/assets/validateFiles.ts

skills/suta/patterns/flip-list/PATTERN.md

skills/suta/patterns/flip-list/assets/captureFlip.ts

skills/suta/patterns/flip-list/assets/useFlipList.ts

skills/suta/patterns/floating-label/PATTERN.md

skills/suta/patterns/floating-label/assets/TextField.tsx

skills/suta/patterns/form-shake-error/PATTERN.md

skills/suta/patterns/form-shake-error/assets/ShakeField.tsx

skills/suta/patterns/form-shake-error/assets/shakeCore.ts

skills/suta/patterns/glass-nav/PATTERN.md

`skills/suta/SKILL.md`

`.claude-plugin/marketplace.json`

`.claude-plugin/plugin.json`

`skills/suta/patterns/accordion/PATTERN.md`

`skills/suta/patterns/accordion/assets/Accordion.tsx`

`skills/suta/patterns/accordion/assets/accordionCore.ts`

`skills/suta/patterns/bottom-nav/PATTERN.md`

`skills/suta/patterns/bottom-nav/assets/BottomNav.tsx`

`skills/suta/patterns/bottom-nav/assets/bottomNavCore.ts`

`skills/suta/patterns/bottom-sheet/PATTERN.md`

`skills/suta/patterns/bottom-sheet/assets/BottomSheet.tsx`

`skills/suta/patterns/bottom-sheet/assets/createSheetDrag.ts`

`skills/suta/patterns/card-expand/PATTERN.md`

`skills/suta/patterns/card-expand/assets/runCardExpand.ts`

`skills/suta/patterns/card-expand/assets/useCardExpand.ts`

`skills/suta/patterns/card-stack/PATTERN.md`

`skills/suta/patterns/card-stack/assets/CardStack.tsx`

`skills/suta/patterns/card-stack/assets/stackLayout.ts`

`skills/suta/patterns/carousel/PATTERN.md`

`skills/suta/patterns/carousel/assets/carouselCore.ts`

`skills/suta/patterns/carousel/assets/createCarouselAutoplay.ts`

`skills/suta/patterns/carousel/assets/useCarousel.ts`

`skills/suta/patterns/cart-fly/PATTERN.md`

`skills/suta/patterns/cart-fly/assets/flyToTarget.ts`

`skills/suta/patterns/cart-fly/assets/useCartFly.ts`

`skills/suta/patterns/celebration/PATTERN.md`

`skills/suta/patterns/celebration/assets/Celebration.tsx`

`skills/suta/patterns/celebration/assets/createCelebration.ts`

`skills/suta/patterns/checkbox-radio/PATTERN.md`

`skills/suta/patterns/checkbox-radio/assets/Checkbox.tsx`

`skills/suta/patterns/checkbox-radio/assets/Radio.tsx`

`skills/suta/patterns/count-up/PATTERN.md`

`skills/suta/patterns/count-up/assets/CountUp.tsx`

`skills/suta/patterns/count-up/assets/createCountUp.ts`

`skills/suta/patterns/drag-to-reorder/PATTERN.md`

`skills/suta/patterns/drag-to-reorder/assets/createDragReorder.ts`

`skills/suta/patterns/drag-to-reorder/assets/useDragReorder.ts`

`skills/suta/patterns/dropdown-menu/PATTERN.md`

`skills/suta/patterns/dropdown-menu/assets/DropdownMenu.tsx`

`skills/suta/patterns/dropdown-menu/assets/createMenu.ts`

`skills/suta/patterns/dropdown-menu/assets/placeMenu.ts`

`skills/suta/patterns/edge-swipe-back/PATTERN.md`

`skills/suta/patterns/edge-swipe-back/assets/animateSpring.ts`

`skills/suta/patterns/edge-swipe-back/assets/createEdgeSwipe.ts`

`skills/suta/patterns/edge-swipe-back/assets/edgeSwipeCore.ts`

`skills/suta/patterns/edge-swipe-back/assets/spring.ts`

`skills/suta/patterns/edge-swipe-back/assets/useEdgeSwipeBack.ts`

`skills/suta/patterns/enter-exit/PATTERN.md`

`skills/suta/patterns/enter-exit/assets/Presence.tsx`

`skills/suta/patterns/enter-exit/assets/createPresence.ts`

`skills/suta/patterns/file-upload/PATTERN.md`

`skills/suta/patterns/file-upload/assets/FileDropZone.tsx`

`skills/suta/patterns/file-upload/assets/createDropZone.ts`

`skills/suta/patterns/file-upload/assets/validateFiles.ts`

`skills/suta/patterns/flip-list/PATTERN.md`

`skills/suta/patterns/flip-list/assets/captureFlip.ts`

`skills/suta/patterns/flip-list/assets/useFlipList.ts`

`skills/suta/patterns/floating-label/PATTERN.md`

`skills/suta/patterns/floating-label/assets/TextField.tsx`

`skills/suta/patterns/form-shake-error/PATTERN.md`

`skills/suta/patterns/form-shake-error/assets/ShakeField.tsx`

`skills/suta/patterns/form-shake-error/assets/shakeCore.ts`

`skills/suta/patterns/glass-nav/PATTERN.md`

`skills/suta/patterns/glass-nav/assets/createGlassNav.ts`

`skills/suta/patterns/glass-nav/assets/navScrollCore.ts`

`skills/suta/patterns/glass-nav/assets/navSpyCore.ts`

`skills/suta/patterns/glass-nav/assets/useGlassNav.ts`

`skills/suta/patterns/glass-surface/PATTERN.md`

`skills/suta/patterns/glass-surface/assets/Glass.tsx`

`skills/suta/patterns/hamburger-menu/PATTERN.md`

`skills/suta/patterns/hamburger-menu/assets/HamburgerMenu.tsx`

`skills/suta/patterns/infinite-scroll/PATTERN.md`

`skills/suta/patterns/infinite-scroll/assets/createInfiniteScroll.ts`

`skills/suta/patterns/infinite-scroll/assets/useInfiniteScroll.ts`

`skills/suta/patterns/layout-audit/PATTERN.md`

`skills/suta/patterns/layout-audit/assets/audit.mjs`

`skills/suta/patterns/layout-audit/assets/auditCore.ts`

`skills/suta/patterns/layout-audit/assets/auditLayout.ts`

`skills/suta/patterns/layout-audit/assets/layoutTokens.ts`

`skills/suta/patterns/layout-principles/PATTERN.md`