vibe-stack 플러그인
The full vibe-coding loop: scaffold an app or marketing site, animate it (GSAP, scroll, micro-interactions), make the fake data real, unstick it, de-AI it, ship it, demo it.
vibe-stack 플러그인 설치 방법
두 명령을 모두 Claude Code 안에서 실행하십시오. 첫 번째는 마켓플레이스를 한 번 추가하고, 두 번째는 플러그인을 설치합니다.
/plugin marketplace add OneWave-AI/open-agent-stack
/plugin install vibe-stack@open-agent-stackvibe-stack 구성 요소
플러그인 파일에서 읽어온 16개의 항목입니다.
Commands 1
/vibe-stack:name 으로 실행- /vibe-stack:vibe-check
Audit a vibe-coded app across the six things that actually block shipping, and get a prioritized fix list
Agents 1
@agent-vibe-stack:name 으로 호출- @agent-vibe-stack:slop-detector
Reviews frontend code and copy for the fingerprints of AI-generated output and reports specific, located fixes. Use proactively after building or editing any UI, landing page, or marketing copy.
Skills 14
작업이 일치하면 Claude가 로드합니다- add-feature
Add a feature to an app you vibe-coded without breaking the three things that already worked -- read the existing patterns first, extend them instead of inventing a second way to do the same thing. Use when adding any new screen, flow, or capability to an existing codebase.
- demo-video
Plan and capture the demo or launch video for the app you just shipped -- the beat sheet, the clean capture setup, and the narration -- so it shows the product working instead of narrating a tour. Use after shipping, when the app needs a video for a landing page, launch post, or client handoff.
- gsap-web
GSAP in a React or Next.js app without the leaks -- timelines over stacked tweens, useGSAP and context for cleanup, ScrollTrigger set up so it survives route changes and layout shifts. Use when building GSAP animations in a component-based app.
- handoff
Make a vibe-coded app survivable by someone else -- an honest README, the decisions written down, the shortcuts listed, and a setup path a new developer can follow without you. Use before handing an app to a client, a contractor, a teammate, or your own future self.
- make-it-real
Turn the demo into a product -- replace hardcoded arrays with a real database, stubbed sign-in with real auth, and the fake form with one that actually delivers. Use when an app looks finished but nothing it shows is true.
- micro-interactions
The small motion that makes an app feel built rather than generated -- hover, press, focus, toggles, loading, and state changes done as a consistent system in plain CSS. Use when UI feels static or lifeless, or when hover effects are scattered and inconsistent.
- motion-perf
Find and fix animation jank -- the layout thrash, paint storms, and layer explosions that make motion stutter on real devices even when it is smooth on your laptop. Use when animations feel choppy, scroll stutters, or before shipping any animation-heavy page.
- motion-system
Define the app's motion language before animating anything -- a small set of durations, easings, and named moves that every animation draws from, so the app feels designed instead of decorated. Use before writing the first animation in a project, or when existing motion feels scattered.
- new-app
Scaffold a new app from one sentence -- Next.js + TypeScript + Tailwind with a real design-token theme applied from the first commit, opinionated structure, and honest slots for auth and data. Use when starting any new project, prototype, or client build.
- polish-pass
The de-AI pass -- audit a vibe-coded app for template smell in design and copy, then fix it with editorial layout, purposeful motion, and human-sounding words. Use after any build session, before anyone else sees it.
- scroll-story
Build scroll-driven sections that feel authored rather than twitchy -- pinned scenes, scrubbed timelines, reveals, and parallax with the timing and cleanup that make them work on a phone. Use for landing pages, product tours, and any section where scrolling advances a narrative.
- ship-it
Pre-flight and deploy -- catch the classic day-one embarrassments (exposed keys, missing env vars, broken build, open endpoints), then ship to Vercel with domains and analytics wired. Use when the app is ready for other humans.
- site-builder
Build a marketing website that converts and ranks -- page inventory, copy before layout, one honest conversion path, real SEO and OG metadata, forms that actually deliver. Use for landing pages, company sites, product sites, and portfolios, as opposed to apps with accounts and data.
- unstick
The app broke and you did not write the code -- find the actual cause instead of guessing at fixes, and stop the loop where every attempted fix adds a new bug. Use when something worked yesterday, the build fails, the deploy is white, or the same error keeps coming back.
Claude Code에서 vibe-stack 사용하기
Claude Code 세션에서 명령어를 입력하세요:
/vibe-stack:vibe-check이름으로 agent를 요청하세요:
@agent-vibe-stack:slop-detectorSkills는 명령어가 필요하지 않습니다. 요청이 설명과 일치하면 Claude가 이를 읽습니다.
업데이트, 비활성화 또는 삭제
- 플러그인 업데이트 (shell)
- claude plugin update vibe-stack@open-agent-stack
- marketplace 새로고침
- /plugin marketplace update open-agent-stack
- 일시적으로 비활성화
- /plugin disable vibe-stack@open-agent-stack
- 삭제
- /plugin uninstall vibe-stack@open-agent-stack
vibe-stack의 스킬
- add-featureOneWave-AI/open-agent-stack
Add a feature to an app you vibe-coded without breaking the three things that already worked -- read the existing patterns first, extend them instead of inventing a second way to do the same thing. Use when adding any new screen, flow, or capability to an existing codebase.
5스타 - demo-videoOneWave-AI/open-agent-stack
Plan and capture the demo or launch video for the app you just shipped -- the beat sheet, the clean capture setup, and the narration -- so it shows the product working instead of narrating a tour. Use after shipping, when the app needs a video for a landing page, launch post, or client handoff.
5스타 - gsap-webOneWave-AI/open-agent-stack
GSAP in a React or Next.js app without the leaks -- timelines over stacked tweens, useGSAP and context for cleanup, ScrollTrigger set up so it survives route changes and layout shifts. Use when building GSAP animations in a component-based app.
5스타 - handoffOneWave-AI/open-agent-stack
Make a vibe-coded app survivable by someone else -- an honest README, the decisions written down, the shortcuts listed, and a setup path a new developer can follow without you. Use before handing an app to a client, a contractor, a teammate, or your own future self.
5스타 - make-it-realOneWave-AI/open-agent-stack
Turn the demo into a product -- replace hardcoded arrays with a real database, stubbed sign-in with real auth, and the fake form with one that actually delivers. Use when an app looks finished but nothing it shows is true.
5스타 - micro-interactionsOneWave-AI/open-agent-stack
The small motion that makes an app feel built rather than generated -- hover, press, focus, toggles, loading, and state changes done as a consistent system in plain CSS. Use when UI feels static or lifeless, or when hover effects are scattered and inconsistent.
5스타 - motion-perfOneWave-AI/open-agent-stack
Find and fix animation jank -- the layout thrash, paint storms, and layer explosions that make motion stutter on real devices even when it is smooth on your laptop. Use when animations feel choppy, scroll stutters, or before shipping any animation-heavy page.
5스타 - motion-systemOneWave-AI/open-agent-stack
Define the app's motion language before animating anything -- a small set of durations, easings, and named moves that every animation draws from, so the app feels designed instead of decorated. Use before writing the first animation in a project, or when existing motion feels scattered.
5스타 - new-appOneWave-AI/open-agent-stack
Scaffold a new app from one sentence -- Next.js + TypeScript + Tailwind with a real design-token theme applied from the first commit, opinionated structure, and honest slots for auth and data. Use when starting any new project, prototype, or client build.
5스타 - polish-passOneWave-AI/open-agent-stack
The de-AI pass -- audit a vibe-coded app for template smell in design and copy, then fix it with editorial layout, purposeful motion, and human-sounding words. Use after any build session, before anyone else sees it.
5스타 - scroll-storyOneWave-AI/open-agent-stack
Build scroll-driven sections that feel authored rather than twitchy -- pinned scenes, scrubbed timelines, reveals, and parallax with the timing and cleanup that make them work on a phone. Use for landing pages, product tours, and any section where scrolling advances a narrative.
5스타 - ship-itOneWave-AI/open-agent-stack
Pre-flight and deploy -- catch the classic day-one embarrassments (exposed keys, missing env vars, broken build, open endpoints), then ship to Vercel with domains and analytics wired. Use when the app is ready for other humans.
5스타 - site-builderOneWave-AI/open-agent-stack
Build a marketing website that converts and ranks -- page inventory, copy before layout, one honest conversion path, real SEO and OG metadata, forms that actually deliver. Use for landing pages, company sites, product sites, and portfolios, as opposed to apps with accounts and data.
5스타 - unstickOneWave-AI/open-agent-stack
The app broke and you did not write the code -- find the actual cause instead of guessing at fixes, and stop the loop where every attempted fix adds a new bug. Use when something worked yesterday, the build fails, the deploy is white, or the same error keeps coming back.
5스타
vibe-stack 플러그인 질문
vibe-stack 플러그인은 어떻게 설치하나요?
Claude Code에서 /plugin marketplace add OneWave-AI/open-agent-stack를 실행한 다음 /plugin install vibe-stack@open-agent-stack을 실행하십시오.
vibe-stack 플러그인에는 무엇이 포함되나요?
vibe-stack은(는) 1개 명령, 1개 에이전트, 14개 스킬을(를) 묶습니다.
vibe-stack 플러그인은 어떤 명령어를 추가하나요?
/vibe-stack:vibe-check를 추가합니다. Claude Code에서 플러그인 접두사를 사용하여 실행하세요. 예: /vibe-stack:vibe-check.
vibe-stack에는 어떤 agent가 포함되어 있나요?
slop-detector입니다. @agent-vibe-stack:slop-detector로 호출하세요.
vibe-stack 플러그인을 어떻게 업데이트하거나 삭제하나요?
shell에서 claude plugin update vibe-stack@open-agent-stack를 사용하여 업데이트하거나 /plugin의 Installed 탭에서 수행하세요. 삭제하려면 /plugin uninstall vibe-stack@open-agent-stack을 사용하세요.
vibe-stack 플러그인의 라이선스는 무엇인가요?
플러그인 manifest에 명시된 대로 MIT입니다.