Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add modu-ai/moai-cowork --skill marketing-landing-pagegit clone --depth 1 https://github.com/modu-ai/moai-coworkWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/modu-ai/moai-cowork/marketing-landing-page)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/marketing-landing-page"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/marketing-landing-page/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/marketing-landing-page"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/marketing-landing-page.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00270 | $0.03381 |
| Opus 5 | $0.00135 | $0.01690 |
| Sonnet 5 | $0.00054 | $0.00676 |
| Haiku 4.5 | $0.00027 | $0.00338 |
Grade A, and why
marketing-landing-page scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 305 lines — stays where its author put it; the contents beside it link to each section on GitHub.
랜딩 페이지 (Landing Page)
개요
shadcn/ui 기반 고전환율 원페이지 랜딩 설계 전문 스킬입니다. 소크라테스식 테마 인터뷰로 사용자 의도에 맞는 디자인 시스템을 자동 선택하고, 히어로부터 최종 CTA까지 전환율 최적화된 랜딩 페이지를 설계·생성합니다.
지원 영역:
- shadcn/ui 기반 랜딩 페이지 전체 설계 (히어로-CTA)
- Next.js 15 + Tailwind CSS v4 + shadcn/ui 스택
- OKLCH 컬러 토큰 기반 Light/Dark 모드 동시 산출
- Framer Motion 인터랙션 프리셋 (페이드업·스크롤 리빌·패럴랙스)
- 제품·서비스 런칭, 이벤트, 리드 수집용 랜딩
트리거 키워드
랜딩페이지, 원페이지, 랜딩 페이지, 세일즈 페이지, 전환율, CTA, 히어로 섹션, 랜딩, shadcn 랜딩, shadcn ui
실전 랜딩 패턴 (한국 시장)
1. Above the Fold 3초 원칙
페이지 로딩 후 3초 내에 사용자가 다음 3 정보를 얻어야 한다:
[1] 이게 무엇인가? (1초)
[2] 나에게 좋은가? (1초)
[3] 어떻게 행동? (1초)
스크롤 없이 보이는 영역(Above the Fold)에 모두 배치.
2. Hero 4유형
| 유형 | 적용 | 예시 |
|---|---|---|
| 약속형 | 명확한 결과 | "30일 만에 영어 회화" |
| 질문형 | 페인 환기 | "왜 우리는 ~할까?" |
| 통계·소셜 증명 | 신뢰 어필 | "10,000명이 선택" |
| 이미지·영상 | 시각 임팩트 | 풍부한 비주얼 |
페르소나·상품 타입에 따라 결정.
3. CTA 5유형
| CTA | 적용 | 예시 |
|---|---|---|
| 즉시형 | 가장 무난 | "지금 시작" |
| 혜택 강조형 | 가격 매력 | "30% 할인가로" |
| 결핍 해소형 | 페인 솔루션 | "내 피부에 적용" |
| 체험 약속형 | 구독·SaaS | "30일 무료" |
| 수량 한정형 | 희소성 | "마지막 12개" |
페이지 하단·중간·상단 3곳 배치, 1차·2차 분리.
4. 전환율 높이는 작은 실험 (그로스)
큰 리뉴얼보다 작은 A/B 테스트 누적이 효과.
| 변수 | 권장 실험 |
|---|---|
| Hero 헤드라인 | 약속 vs 질문 vs 통계 |
| CTA 색 | 브랜드 색 vs 보색 |
| CTA 위치 | 우측 vs 중앙 vs 하단 |
| 가격 표시 | 월간 vs 연간 우선 |
| 사회적 증명 위치 | 상단 vs 가격 옆 |
| Form 필드 수 | 3개 vs 5개 vs 7개 |
1주일 1실험 + 결과 기록.
5. 잘 팔리는 페이지 데이터 분석 5단계
[1] 진입 채널 분리 — 광고·검색·다이렉트별 전환율
[2] 이탈 지점 추적 — 스크롤 깊이·체류 시간
[3] CTA 클릭률 — 각 CTA 위치별 측정
[4] Form 전환율 — 각 필드별 이탈 분석
[5] 후속 행동 — 클릭 후 행동 (구매·이탈·다음 페이지)
GA4 + Hotjar 같은 도구로 정량·정성 동시 측정.
워크플로우
0단계: shadcn 테마 인터뷰 (HARD)
코드·디자인 스펙 산출 직전에 반드시 수행합니다.
Q1: 베이스 팔레트 선택
- Neutral (기본)
- Zinc
- Stone
- Slate
Q2: 컬러 모드 선택
- System+Toggle (기본)
- Light
- Dark
- Auto
Q3: 모서리 반경 선택
- Balanced 0.5rem (기본)
- Sharp
- Soft
- Pill
Q4: 효과 선택 (복수)
- Fade-up
- Scroll Reveal
- Parallax
- Chart
Chart 선택 시 Q5 차트 라이브러리 선택 (Recharts/Chart.js/Tremor/ECharts)
1단계: 목적 및 타겟 파악
- 전환 목표: 구매 / 회원가입 / 다운로드 / 문의 / 이벤트 참가
- 타겟 독자 (고통점, 니즈, 반대 의견)
- 제품·서비스 핵심 가치 제안 (Value Proposition) 1가지
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/landing-page/ab-testing-guide.md 1.8 KB
- references/landing-page/brand-context-template.md 1.9 KB
- references/landing-page/copywriting-rules.md 2.0 KB
- references/landing-page/design-principles.md 5.1 KB
- references/landing-page/evaluation-checklist.md 1.9 KB
- references/landing-page/guide.md 6.8 KB
- references/landing-page/shadcn-theme-interview.md 11 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 305 lines · 270 tokens per session scan A 72c28fba8fc9
marketing-landing-page is a skill published in the GitHub repository modu-ai/moai-cowork (300 stars, last pushed 9d ago), licensed Apache-2.0. It adds 270 tokens to every session and 3,381 once invoked, about $0.0014 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
website-launch-kit
Clone inspiration sites and customize them for your business. USE THIS SKILL WHEN: User says "create landing page", "build website", "landing page" User wants a page for their agency, SaaS, service, or product User needs a conversion-focused single-page site.
seo-images
Image optimization analysis for SEO and performance — checks alt text, file sizes, formats, responsive images, lazy loading, CLS prevention, fetchpriority, filenames, and CDN usage. Use when user says "image optimization", "alt text", "image SEO", "image audit", "optimize images", "lazy loading", "WebP", or "CLS…
instant-ui
Build a BenAI-branded HTML page in the neo-brutalist instant-ui design language (cream background, near-black ink, 3px hard borders, 6px zero-blur shadows, a blue/green/amber gradient stripe, system font plus SF Mono, weight-900 headings). Use for any BenAI landing page, offer, sales, or pricing page, onboarding or…
colors
Color systems for web interfaces — OKLCH conversion and palette generation, contrast measurement (APCA/WCAG), gamut and P3 fallbacks, theming, one meaning per color. INVOKE PROACTIVELY when converting color values, building or extending a palette or token set, checking or reporting contrast, or theming light and dark…
ui-polish
Design-engineering details that make an interface feel polished — border radius, optical alignment, shadows and elevation, animations and micro-interactions, press feedback, icons. INVOKE PROACTIVELY when building or reviewing UI components, adding motion or hover/active states, or when the user says "make it feel…
layout
Layout structure for web interfaces — grouping, alignment, negative space, reading order, progressive disclosure, breakpoints, direction-aware (RTL) structure. INVOKE PROACTIVELY when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, or reviewing frontend structure.…