<Devsly/>
NotebookLM Watermark Remover
Remove the NotebookLM watermark from PDF slide exports — free, unlimited, and 100% in your browser.
View
NotebookLM Video Watermark Remover
Remove the NotebookLM watermark from every frame of your MP4 and auto-trim the end card — free and unlimited.
View
Gemini Watermark Remover
Remove the Gemini (Veo) sparkle watermark from every frame of your AI-generated MP4 — free and unlimited.
View
MCP https://devsly.io/mcp MCP Tools Best Skills API Docs

Keyboard Shortcuts

Navigation

Quick Search
⌘ / Ctrl + K
Toggle Dark Mode
⌘ / Ctrl + D
Close Dialogs
Esc

Tool Actions

Execute / Process
⌘ / Ctrl + Enter
Clear Input
⌘ / Ctrl + Shift + C
Copy Output
⌘ / Ctrl + Shift + X

Editor

Select All
⌘ / Ctrl + A
Undo
⌘ / Ctrl + Z
Redo
⌘ / Ctrl + Shift + Z

Updated today

by hanmariyang

giting-skills

Giting이 검수한 Claude Code 스킬 마켓플레이스 — 01 ui-menu: UI 메뉴판

  • Active — Updated in the last 14 days
Works with
  • Claude

20 GitHub stars (20)

  • 18 skills (18 skills found in its SKILL.md files)
  • 2 forks (2 forks)
  • Today last update (Last updated today)

Install

Skills CLI

npx skills add hanmariyang/giting-skills

Asks which skills and agents to install. Just one: npx skills add hanmariyang/giting-skills --skill app-menu — add -g for every project.

Claude Code

git clone https://github.com/hanmariyang/giting-skillscp -r "giting-skills/plugins/app-menu/skills/app-menu" ~/.claude/skills/

Copies the app-menu skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.

Plugin

/plugin marketplace add hanmariyang/giting-skills

Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.

Skills can run code on your machine — read the SKILL.md first.

What it does

In the author's own words, from each skill's SKILL.md.

  • app-menu

    모바일 앱 UI를 만들 때, 사용자가 컴포넌트를 말로 풀어 설명하거나('아래에서 올라오는 판 만들어줘', '앱 켜면 뜨는 로고 화면', '옆에서 나오는 메뉴', '노치에 안 가리게', '누르면 진동') 정식 이름을 모를 때, 그 말을 정확한 모바일 UI 명칭(바텀시트·스플래시·드로어·세이프에어리어·햅틱 등)으로 옮기고 SwiftUI·Flutter·React Native의 실제 컴포넌트명으로 연결해 준다. iOS·안드로이드 앱 화면/컴포넌트를 만들거나 고칠 때, Expo·Flutter·SwiftUI 작업 중 UI 이름·플랫폼 관례(탭 타깃 44pt·세이프에어리어·모달=풀스크린)를 확인할 때 사용한다. 웹 UI는 ui-menu 를 쓴다.

    plugins/app-menu/skills/app-menu/SKILL.md on GitHub (opens in a new tab)
  • canvas-motion

    웹 랜딩·히어로·데모에 창발적(살아 있는) 모션 그래픽을 만들 때 사용한다. '움직이는 배경', '살아 있는 히어로', '파티클', '아이소메트릭 시뮬레이션', '데이터가 흐르는 애니메이션', '창발적/제너러티브 모션', '캔버스 애니메이션', 'GSAP/Lottie 없이 모션' 같은 요청에. Canvas 2D + requestAnimationFrame 만으로(라이브러리 0) 시뮬레이션 구동 또는 타임라인 연출 모션을 만들고, 고정 timestep 루프·보간·아이소 투영·깊이 정렬·보이드·플로우필드·A*·파티클·글로우를 재사용 엔진으로 제공한다. prefers-reduced-motion·DPR·60fps 규율 포함.

    plugins/canvas-motion/skills/canvas-motion/SKILL.md on GitHub (opens in a new tab)
  • codelazy

    안 만들어도 되는 코드를 안 만들게 하는 사전. 사용자가 '캐싱 클래스 만들어줘', '설정 관리 시스템 만들어줘', '플러그인 로더 만들어줘', '커스텀 예외 만들어줘' 처럼 무언가를 만들어 달라고 할 때, 또는 새 라이브러리를 깔거나 추상화 계층을 세우려 할 때, 표준 라이브러리·한 줄·기존 기능으로 되는지 먼저 확인한다. 코드 리뷰에서 과잉설계(over-engineering)를 줄이거나, '이거 진짜 만들어야 돼?'를 판단할 때 사용한다.

    plugins/codelazy/skills/codelazy/SKILL.md on GitHub (opens in a new tab)
  • css-menu

    CSS 증상 사전 — 화면이 깨졌을 때 CSS 용어를 몰라도 증상으로 원인을 찾고 고치게 하는 사전. 사용자가 '가운데 정렬이 안 돼요', '스크롤이 두 개예요', '삐져나가요', '버튼이 안 눌려요', '폰에서만 깨져요', '글자가 이상하게 끊겨요', '안 보여요' 같은 화면 증상을 호소할 때, 레이아웃·정렬·간격·글자·겹침·스크롤이 깨졌다고 할 때, 또는 깨진 스크린샷을 보여줄 때 이 스킬을 사용한다. 기획자·디자이너 등 비개발자의 표현('답답해요', '들쭉날쭉해요', '덜컹거려요')도 증상으로 취급해 매핑한다.

    plugins/css-menu/skills/css-menu/SKILL.md on GitHub (opens in a new tab)
  • design-brief

    Produce a project DESIGN.md so an AI coding agent builds consistent, non-generic UI instead of the default AI look. Use when the user wants a design system, a reusable style brief, to match a reference site's feel, to keep pages consistent, or says the AI's output looks generic. Ships a DESIGN.md template (palette+roles, type, spacing, components, and the reasoning), an anti-slop checklist of the…

    plugins/design-brief/skills/design-brief/SKILL.md on GitHub (opens in a new tab)
  • edit-doc

    Make a document the reader can edit and save right in the browser, with no server, extension, or login. Two kinds: (1) a standalone HTML document that carries its own editor (reports, letters, guides, notices) — copy skeleton.html and write the content; (2) a Markdown document edited in a standalone source+preview editor that saves .md — ship md-editor.html. Use when the user asks for an editable…

    plugins/edit-doc/skills/edit-doc/SKILL.md on GitHub (opens in a new tab)
  • font-menu

    웹폰트를 '어떤 인상을 원하는지'로 고르고, 그 폰트를 어디서 어떻게 불러오는지 로딩 스니펫째 주는 사전. 사용자가 '폰트 추천', '이 랜딩에 어울리는 폰트', 'AI 스타트업 느낌 폰트', '고급스러운 제목 폰트', '한글 폰트 뭐 쓰지', 'Pretendard 대안', 'Satoshi/Inter/Space Grotesk 넣어줘', '폰트가 안 바뀌어요/기본 폰트로 나와요'라고 할 때 사용한다. Google Fonts·Fontshare·jsDelivr는 로딩법이 다르고, 틀리면 조용히 시스템 폰트로 폴백된다. 맥락별 폰트·짝·라이선스·정확한 <link>를 준다.

    plugins/font-menu/skills/font-menu/SKILL.md on GitHub (opens in a new tab)
  • hangul-wrap

    Find and fix Korean line breaks that split a word (어절) in half on web pages, measured in a real browser instead of guessed. Use when a Korean UI or landing page looks 'AI-made', when the user says 한글 줄바꿈이 이상해요, 단어가 중간에서 끊겨요, 제목이 지저분하게 꺾여요, 줄넘김, word-break, keep-all, or before shipping any Korean HTML/CSS. Ships a zero-dependency checker (scripts/wrapcheck.mjs) that opens the page at several width…

    plugins/hangul-wrap/skills/hangul-wrap/SKILL.md on GitHub (opens in a new tab)
  • landing-menu

    랜딩 메뉴판. 랜딩 페이지를 만들 때 "무슨 섹션을, 어떤 순서로" 짓게 해 주는 사전이다. 사용자가 랜딩/소개 페이지를 원할 때, "히어로 뭐로 할까", "여기 뭐 넣지", 만든 랜딩이 제너릭하다고 할 때 발동한다. 6개 코스(히어로·신뢰·기능·작동·전환·뼈대)의 섹션마다 별칭 → 정식 명칭 → 요청 문장 → 실물 HTML을 준다. ⚠️ 룩(색·폰트)은 이 스킬이 정하지 않는다 — 제품의 design-brief에서 가져오고, 이 스킬은 구조·순서·조립과 제너릭 회피 규칙만 준다.

    plugins/landing-menu/skills/landing-menu/SKILL.md on GitHub (opens in a new tab)
  • motion-menu

    모션 메뉴판. 사용자가 영상·화면 움직임을 말로 설명할 때("확 당겨줘", "옆으로 훑어줘", "통통 튀게", "배경만 빨려 들어가게", "하나씩 차례로 나오게", "화면이 픽셀로 흩어지며 넘어가게", "글자가 타자 치듯 나오게", "느리게 보여줘", "번쩍거리게", "화면 반반 나눠줘", "물감 흘러내리듯 넘어가게", "밀면서 넘겨줘", "한 번 까맣게 됐다 넘어가게", "책장 넘기듯이", "유리 깨지듯 와장창", "칸이 뒤집히면서 바뀌게", "뒤에 점이 두근거리는 배경 깔아줘", "격자가 앞으로 달려오게", "글자가 쾅 하고 박히게", "공항 전광판처럼 글자 바뀌게", "색이 물감처럼 섞이는 배경", "글자가 흐릿하다가 또렷해지게", "더 세게 흔들어", "살짝만 당겨") 정식 모션 명칭(팬·줌·달리·…

    plugins/motion-menu/skills/motion-menu/SKILL.md on GitHub (opens in a new tab)
  • pixel-run

    Turn a character reference image into a clean, looping pixel-art RUN cycle. Produces a transparent GIF, a 4x4 (16-frame) sprite sheet PNG, and a ZIP of individual frames. Use when the user shares a character image and asks for a running animation, run cycle, sprite sheet, pixel-art walk/run, or 'make this character run'. The skill gives the AI a rigorous, character-agnostic generation prompt AND…

    plugins/pixel-run/skills/pixel-run/SKILL.md on GitHub (opens in a new tab)
  • product-shot

    Make commercial-grade product photos with an image model: liquid/texture (formulation) shots, product images that keep the real logo and packaging intact, and clean ad cuts. Use when the user has a product image (cosmetics, skincare, food, drink, any packaged good) and wants a texture/swatch shot, a hero ad image, a background/scene, or asks 'make a product photo / 제형 컷 / 광고컷 / keep the logo'. Th…

    plugins/product-shot/skills/product-shot/SKILL.md on GitHub (opens in a new tab)
  • session-mention

    Diagnose and fix Claude Code cross-session messaging: sending a message from one live session to another with @<session-name> on the same machine. Use when the user says the @mention isn't working, doesn't autocomplete, or the message went to the wrong session, or asks how to name sessions so they can be addressed, hand work between sessions, or list/attach/stop sessions. Covers naming (--name, /…

    plugins/session-mention/skills/session-mention/SKILL.md on GitHub (opens in a new tab)
  • sheet-io

    Use a spreadsheet as a data source or sink from Claude Code without wrecking it or blowing the token budget. Works on a local CSV or a PUBLIC Google Sheet (via its CSV export URL, no credentials). Use when the user points at a spreadsheet, a Google Sheets link, or a .csv and wants to read, filter, summarize, or append rows, or asks to 'connect the sheet', '시트 연동', '이 데이터 정리해줘'. Provides a stdlib-…

    plugins/sheet-io/skills/sheet-io/SKILL.md on GitHub (opens in a new tab)
  • skill-router

    Front door to the Giting Skills marketplace. Use when the user asks what Giting skills exist, which one fits their situation, or describes a need vaguely without naming a skill: 'giting 스킬 뭐 있어', '어떤 스킬 써야 해', '이거 뭐로 해야 하지', '뭐부터 해야 할지 모르겠어'. Matches the need to at most two skills, tells whether each is installed, and gives the one-line install command if not. It routes; it does not do the work i…

    plugins/skill-router/skills/skill-router/SKILL.md on GitHub (opens in a new tab)
  • slide-pick

    Decide WHAT to draw on each slide before designing a deck. Given a topic and the judgment the audience must make, this picks the right layout, chart, and diagram type, names it, and blocks the choices that mislead. Use when the user asks to make a PPT/deck/발표자료/장표, or asks which chart/layout/diagram to use, or says 'make it clean/fast'. Ships a selection method (판단 문장 → 후보 좁히기 → 금지 규칙), a fill-in…

    plugins/slide-pick/skills/slide-pick/SKILL.md on GitHub (opens in a new tab)
  • type-menu

    타입스크립트 타입 에러를 사람 말로 통역하고 제대로 고치게 하는 사전. 사용자가 TS 에러 메시지(예: 'possibly undefined', 'implicitly has an any type', 'not assignable to type', 'Property does not exist', 'Expected N arguments')를 붙여넣거나, '타입 에러 나요', '빨간 줄 떠요', '이거 any로 막아도 돼?' 라고 물을 때, TS 코드번호(TS18048·TS7006·TS2322·TS2339·TS2554 등)가 나올 때 사용한다. any 로 덮는 대신 원인을 짚고 제대로 좁혀 고친다. 기획자·디자이너 등 비개발자도 에러를 이해하게 돕는다.

    plugins/type-menu/skills/type-menu/SKILL.md on GitHub (opens in a new tab)
  • ui-menu

    UI 메뉴판. 사용자가 UI를 말로 설명할 때("접었다 폈다 되는 거", "화면 가운데 뜨는 창", "옆에서 미끄러져 나오는 메뉴") 정식 명칭을 찾아 주고, 검증된 실물 HTML 레퍼런스로 구현할 때 사용한다. 11개 코스 131개 항목 — 페이지 뼈대·이동/탐색·내용 표시·입력·버튼·알림·작은 표시·상태 + 웹 연출(스크롤·마우스 반응·불러오기와 흐름). UI 컴포넌트 이름이 궁금할 때, 용어를 몰라 설명이 길어질 때, 표준적인 컴포넌트 구현이 필요할 때 발동한다.

    plugins/ui-menu/skills/ui-menu/SKILL.md on GitHub (opens in a new tab)

Review before you install

A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.