Communitygithub.com

FerroxLabs/murage

>- End-to-end workflow for creating a high-converting SaaS landing page from copywriting through design, development, SEO optimization, and analytics setup. Covers persuasion frameworks, responsive design, performance optimization, and conversion tracking to turn visitors into customers. Use when the user wants to build saas landing page or needs a structured multi-step process for this goal. Do NOT use when the request is a single-step task or requires professional advice beyond educational guidance.

murage란 무엇인가요?

murage is a Claude Code agent skill that >- End-to-end workflow for creating a high-converting SaaS landing page from copywriting through design, development, SEO optimization, and analytics setup. Covers persuasion frameworks, responsive design, performance optimization, and conversion tracking to turn visitors into customers. Use when the user wants to build saas landing page or needs a structured multi-step process for this goal. Do NOT use when the request is a single-step task or requires professional advice beyond educational guidance.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/FerroxLabs/murage/tree/HEAD/skills-library/build-saas-landing-page
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Build Saas Landing Page

Estimated time: 2-4 weeks

A SaaS landing page is the most important page in your business. It is where strangers become prospects and prospects become customers. This workflow covers the full lifecycle: persuasive copywriting using proven frameworks, visual design and development, SEO to drive organic traffic, performance optimization for fast load times, and analytics to measure and improve conversion rates.

The workflow follows a content-first approach: write the copy before you design, and design before you code. This ensures the page is built around persuasive messaging rather than forcing copy into a pre-built template. Every decision is oriented toward one goal: converting visitors into signups or sales.

When to Use

  • User wants to build saas landing page
  • User needs a structured, step-by-step process for build saas landing page
  • User wants to build a landing page
  • I need a SaaS website
  • How do I create a high-converting landing page
  • Do NOT use when: the request is outside the scope of build saas landing page or requires professional advice beyond educational guidance
  • Do NOT use for single-step tasks that one atomic skill can handle independently

Prerequisites

Before starting this workflow, ensure:

  • A SaaS product (launched or in development) with a clear value proposition
  • Understanding of your target customer and their pain points
  • Brand assets (logo, color palette, typography) or willingness to create them
  • Domain name and hosting capability
  • Basic web development skills or a developer to implement

Steps

Step 1: Define Messaging and Write Copy (uses: copywriter)

nail your positioning: what category are you in, who are you for, and what makes you different? Then use the Copywriter skill to write landing page copy using the PAS (Problem-Agitation-Solution) or AIDA (Attention-Interest-Desire-Action) framework. Write each section: hero headline and subheadline, problem statement, feature/benefit blocks (features tell, benefits sell), social proof section, pricing (if visible), FAQ, and CTA. Write multiple headline variants for A/B testing.

  • Input: Target customer persona (who, what role, what pain), Product value proposition (what you do, why it matters), Competitive landscape (how you differ)
  • Output: Positioning statement, Hero headline (3-5 variants for A/B testing), Subheadline and hero body copy
  • Key focus: Use the Brand Strategist skill to nail your positioning: what category are you in, who are you for, and what makes you different? Then use the Copywriter skill to write landing page copy using the PAS (Problem-Agitation-Solution) or AIDA (Attention-Interest-Desire-Action) framework

Step 2: Design and Develop the Page (uses: nextjs-architect)

build the landing page with server-side rendering for SEO and fast initial load. Use the Tailwind Designer skill for responsive design with a mobile-first approach. Structure the page in sections that follow the copy flow: hero, problem, solution/features, social proof, pricing, FAQ, footer CTA. Use visual hierarchy to guide the eye: large headlines, breathing room between sections, contrasting CTA buttons. Implement smooth scrolling, subtle animations for engagement, and responsive images with next/image.

  • Input: Copy from Step 1, Brand assets (logo, colors, typography), Design inspiration and competitors
  • Output: Landing page implemented in Next.js with Tailwind CSS, Responsive design (mobile, tablet, desktop), Component structure for each page section
  • Key focus: Use the Next.js Architect skill to build the landing page with server-side rendering for SEO and fast initial load

Step 3: Ensure Accessibility (uses: accessibility-auditor)

verify the landing page meets WCAG 2.2 Level AA. Check: color contrast ratios (minimum 4.5:1 for body text, 3:1 for large text), keyboard navigation (Tab key traverses all interactive elements), screen reader compatibility (semantic HTML, ARIA labels), image alt text, form accessibility, and focus indicators. Fix any violations. Accessible landing pages convert better because they reach more users.

  • Input: Developed landing page from Step 2, WCAG 2.2 Level AA requirements, Target audience considerations
  • Output: Accessibility audit report, Color contrast verification for all text/background combinations, Keyboard navigation test results
  • Key focus: Use the Accessibility Auditor skill to verify the landing page meets WCAG 2.2 Level AA

Step 4: Optimize Performance (uses: web-performance)

optimize for Core Web Vitals: LCP (Largest Contentful Paint) under 2.5 seconds, FID/INP under 100ms, CLS (Cumulative Layout Shift) under 0.1. Optimize images (WebP/AVIF, responsive srcset, lazy loading), minimize JavaScript bundle (code splitting, tree shaking), enable compression (Brotli), configure CDN caching, and preload critical resources. Run Lighthouse and WebPageTest to verify performance. Every 100ms of load time improvement increases conversion rates by approximately 1%.

  • Input: Developed landing page from Step 2, Core Web Vitals targets, Target audience geography and device types
  • Output: Lighthouse performance audit (target: 90+ score), Core Web Vitals measurements (LCP, FID/INP, CLS), Image optimization (formats, sizes, lazy loading)
  • Key focus: Use the Web Performance skill to optimize for Core Web Vitals: LCP (Largest Contentful Paint) under 2.5 seconds, FID/INP under 100ms, CLS (Cumulative Layout Shift) under 0.1

Step 5: Optimize for SEO (uses: seo-advisor)

Use the SEO Advisor skill for strategic SEO planning and the SEO Optimizer skill for on-page optimization. Implement: meta title and description (with target keywords), Open Graph and Twitter Card meta tags, structured data (Organization, Product, FAQ schema), semantic HTML (proper heading hierarchy), internal linking, sitemap.xml, and robots.txt. Create a content strategy for supporting pages (blog, documentation, comparison pages) that drive organic traffic to the landing page.

  • Input: Developed landing page with copy from Step 1, Target keywords for organic discovery, Competitor SEO analysis
  • Output: On-page SEO implementation (meta tags, headings, structured data), Open Graph and Twitter Card meta tags, Structured data (JSON-LD) for Organization, Product, FAQ
  • Key focus: Use the SEO Advisor skill for strategic SEO planning and the SEO Optimizer skill for on-page optimization

Step 6: Set Up Analytics and Conversion Tracking (uses: analytics-engineer)

implement conversion tracking. Set up analytics (GA4, Plausible, or PostHog) with event tracking for key actions: page views, scroll depth, CTA clicks, form submissions, and conversions. Implement UTM parameter tracking to attribute conversions to marketing channels. Set up funnel visualization to identify where visitors drop off. Create a dashboard that shows the metrics that matter: traffic, conversion rate, bounce rate, and revenue impact.

  • Input: Landing page from Steps 2-5, Key conversion actions (signup, demo request, pricing click), Marketing channels driving traffic
  • Output: Analytics implementation (GA4 or privacy-friendly alternative), Event tracking for all CTAs and form submissions, Conversion funnel visualization
  • Key focus: Use the Analytics Engineer skill to implement conversion tracking

Step 7: Launch and Iterate (uses: copywriter)

iterate on conversion rate. Launch the first A/B test (headline variants from Step 1) within the first week. Analyze scroll depth data to identify where visitors lose interest. Test CTA copy, button colors, and social proof placement. Each test should run for at least 2 weeks or 1,000 visitors (whichever is longer) to reach statistical significance. Document every test result to build institutional knowledge about what converts.

  • Input: Live landing page with analytics from Step 6, Initial traffic and conversion data, Headline variants from Step 1
  • Output: A/B test plan with hypothesis and metrics, Test results documentation, Conversion rate optimization backlog
  • Key focus: Use the Copywriter skill to iterate on conversion rate

Decision Points

  • After Step ?:
    • If After Step 1: Revise copy based on target audience feedback
    • If After Step 4: Optimize until performance targets are met
    • If After Step 5: Fix SEO issues before launch
    • If After Step 6: Fix tracking gaps before going live

Failure Handling

  • Feature-centric copy: -- Listing features instead of benefits. Nobody cares about "AI-powered analytics" -- they care about "make decisions 10x faster."
  • Designing before writing: -- Fitting copy into a template forces awkward messaging. Write first, design to support the message.
  • Slow page load: -- Every second of load time costs conversions. Optimize images, minimize JavaScript, and use a CDN.
  • No mobile optimization: -- Over 50% of traffic is mobile. If the mobile experience is poor, half your visitors bounce.
  • Weak CTA: -- "Submit" and "Learn More" are weak CTAs. Use action-oriented, value-focused language: "Start Free Trial" or "Get Your Dashboard."

Expected Outcome

When this workflow is complete, the user will have:

  1. Landing page loads in under 2.5 seconds on mobile (LCP)
  2. Lighthouse score is 90+ across Performance, Accessibility, Best Practices, and SEO
  3. Conversion rate exceeds industry average (typically 2-5% for SaaS)
  4. Organic traffic grows month over month after SEO implementation
  5. A/B testing produces at least one statistically significant improvement per month
  6. Bounce rate is below 50%

Output Format

BUILD SAAS LANDING PAGE TRACKER
===============================

[ ] Step 1: Define Messaging and Write Copy
    Status: [pending/in-progress/complete]
[ ] Step 2: Design and Develop the Page
    Status: [pending/in-progress/complete]
[ ] Step 3: Ensure Accessibility
    Status: [pending/in-progress/complete]
[ ] Step 4: Optimize Performance
    Status: [pending/in-progress/complete]
[ ] Step 5: Optimize for SEO
    Status: [pending/in-progress/complete]
[ ] Step 6: Set Up Analytics and Conversion Tracking
    Status: [pending/in-progress/complete]
[ ] Step 7: Launch and Iterate
    Status: [pending/in-progress/complete]

Timeline: ______ weeks
Overall Status: [IN PROGRESS / COMPLETE]

Adaptation notes:

  • Adjust timeline based on user's availability and prior experience
  • Steps may be reordered if dependencies allow parallel execution
  • Skip optional steps if time or budget is constrained

Edge Cases

  • Feature-centric copy: -- Listing features instead of benefits. Nobody cares about "AI-powered analytics" -- they care about "make decisions 10x faster."
  • Designing before writing: -- Fitting copy into a template forces awkward messaging. Write first, design to support the message.
  • Slow page load: -- Every second of load time costs conversions. Optimize images, minimize JavaScript, and use a CDN.
  • No mobile optimization: -- Over 50% of traffic is mobile. If the mobile experience is poor, half your visitors bounce.

Example

Input: "I want to build saas landing page and need a structured plan to follow step by step."

Output:

Step 1 (copywriter-brand-strategist): Define Messaging and Write Copy -- produces concrete deliverables for this phase.

Step 2 (nextjs-architect-tailwind-designer): Design and Develop the Page -- produces concrete deliverables for this phase.

Step 3 (accessibility-auditor): Ensure Accessibility -- produces concrete deliverables for this phase.

Step 4 (web-performance): Optimize Performance -- produces concrete deliverables for this phase.

Step 5 (seo-advisor-seo-optimizer): Optimize for SEO -- produces concrete deliverables for this phase.

Step 6 (analytics-engineer): Set Up Analytics and Conversion Tracking -- produces concrete deliverables for this phase.

Step 7 (copywriter): Launch and Iterate -- produces concrete deliverables for this phase.

Result: User has a complete build saas landing page plan with all deliverables produced, validated, and ready for implementation.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

FerroxLabs/murage

Comprehensive animation guidance covering the 12 principles of animation, 2D and 3D production pipelines, tools (Blender, After Effects, Procreate, Toon Boom), frame rates, rigging, motion graphics vs character animation, and building an animation practice from concept to final render. Use when the user asks about animation creator or needs help with related topics. Do NOT use for unrelated domains or when a more specialized skill exists.

FerroxLabs/murage

Web animation expertise covering CSS animations and transitions, Web Animations API, Framer Motion, GSAP, scroll-driven animations, layout animations, spring physics, reduce-motion preferences, and performance budgets. Use when the user asks about animation designer, animation designer best practices, or needs guidance on animation designer implementation. Do NOT use when the user needs a different specialized skill or is asking about an unrelated technology domain.

FerroxLabs/murage

Writes board-level narrative updates that complement financial reports with strategic context, competitive positioning, key risks, and forward-looking guidance for board of directors audiences. Use when the user needs to write a board update, board meeting narrative, or director-level briefing. Do NOT use for stakeholder updates to management (use `stakeholder-update`), investor emails (use `investor-update-email`), or full business reports (use `business-report`).

FerroxLabs/murage

Calculates startup burn rate (gross and net), projects cash runway in months, and builds scenario analysis for different spending and revenue trajectories. Use when the user asks about burn rate, cash runway, how long their money will last, or startup cash management. Do NOT use for personal savings calculations (use budget-planning), full financial modeling (use financial-model-structure), or fundraising narrative (use fundraising-narrative).

FerroxLabs/murage

The user is asking \"how long do we have,\" \"can we afford this hire,\" or \"are we running out.\" Load whenever cash, burn, or time-to-zero shows up — or when a spending decision is on the table and the user doesn't know how many months it costs.

FerroxLabs/murage

Professional corporate video production guidance covering training videos, promotional content, testimonials, and product demos. Includes client brief templates, script approval workflows, achieving professional quality on budget, brand compliance, stakeholder management, and delivery specifications. Use when the user asks about corporate video or needs help with related topics. Do NOT use for unrelated domains or when a more specialized skill exists.

FerroxLabs/murage

Teaches specific named emotional regulation techniques (the STOP technique, urge surfing, cognitive reframing, emotional labeling, opposite action, and physiological soothing) with step-by-step sequences. Gathers the user's emotional challenges and triggers, then produces a personalized regulation toolkit with technique instructions and a situation-response plan. Use when the user asks about managing emotions, controlling anger, handling frustration, emotional regulation strategies, or building emotional resilience. Do NOT use for clinical emotional dysregulation treatment, personality disorder management, or replacing professional mental health support.

FerroxLabs/murage

Structures a fundraising narrative for startup investors covering traction, market size, business model, use of funds, and milestone targets using standard VC pitch structure. Use when the user asks about fundraising pitch, investor narrative, raising capital, pitch deck story, or investment memo. Do NOT use for sales pitch decks (use sales-pitch-deck), personal loan applications, grant proposals (use grant-proposal-writing), or financial model creation (use financial-model-structure).

FerroxLabs/murage

Interactive storytelling for games covering branching narratives, dialogue trees, environmental storytelling, lore design, character writing for games, quest design, player agency, world-building for interactive media, and narrative integration with game mechanics. Use when the user asks about game narrative writer or needs help with related topics. Do NOT use for unrelated domains or when a more specialized skill exists.

FerroxLabs/murage

Writes Instagram captions with a hook line, story body, hashtag strategy, and platform-optimized call-to-action. Use when the user wants to write an Instagram caption, create Instagram content, or draft text to accompany an Instagram post or reel. Do NOT use for LinkedIn posts (use `linkedin-post`), Twitter threads (use `twitter-thread`), or blog posts (use `blog-post-writing`).

FerroxLabs/murage

Produces conversion-optimized landing page copy with hero section, problem statement, solution, social proof, and CTA sections using conversion copywriting methodology. Use when the user asks to write landing page copy, create a product page, write a sales page, draft conversion copy, or write landing page text for a website. Also useful when asked to write website copy or create a page that converts visitors. Do NOT use for ad copy (use paid-ad-copy), product descriptions for e-commerce listings (use product-description), or full website content strategy (use seo-content-strategy).

FerroxLabs/murage

>- Complete YouTube channel launch workflow from niche selection and channel strategy through video production, editing, monetization setup, community building, and personal brand development for sustainable channel growth. Use when the user wants to launch youtube channel or needs a structured multi-step process for this goal. Do NOT use when the request is a single-step task or requires professional advice beyond educational guidance.

FerroxLabs/murage

Run a section-by-section conversion teardown of one landing page — hero, value proposition, social proof, features, objection handling, CTA and footer — plus form, mobile and page-speed audits, ending in prioritised fixes split into quick wins, strategic and long-term, with A/B test hypotheses. Use when one page has traffic and is not converting. Do NOT use for a whole-site marketing audit (use market-audit), for the copy voice and awareness-stage decisions behind it (use copy-awareness-stages) or for the visual system it should sit inside (use mira-visual-system).

FerroxLabs/murage

Comprehensive motion graphics guidance covering title design, lower thirds, animated explainers, kinetic typography, logo animation, After Effects and Apple Motion workflows, design principles for motion, storyboarding for motion, and building a motion design practice. Use when the user asks about motion graphics or needs help with related topics. Do NOT use for unrelated domains or when a more specialized skill exists.

FerroxLabs/murage

Game narrative design covering branching dialogue systems, world lore construction, environmental storytelling techniques, character arc design for interactive media, player agency and consequence systems, quest narrative structure, narrative documentation, and integration with game mechanics. Use when the user asks about narrative designer or needs help with related topics. Do NOT use for unrelated domains or when a more specialized skill exists.

FerroxLabs/murage

Builds a written promotion case document with accomplishments and metrics, expanded scope evidence, peer and stakeholder impact, market rate context, and a clear ask. Produces a shareable document the user can present to their manager or leadership. Use when the user wants to make a case for promotion, prepare a promotion packet, or document their achievements to support a level-up request. Do NOT use for performance review self-assessments (use performance-review-prep), salary negotiation scripts (use salary-negotiation-script), or resume writing (use resume-bullet-writer).

FerroxLabs/murage

Expert guidance for creating educational science YouTube content covering scripting for clarity, data visualization, maintaining accuracy while being engaging, production techniques, and channel growth strategies. Use when the user asks about science youtube creator, related techniques, best practices, or needs guidance in this domain. Do NOT use when the request is outside the scope of science youtube creator or requires a different specialized skill.

FerroxLabs/murage

Produces a short-form video plan for TikTok, Instagram Reels, or YouTube Shorts with hook formula, single-concept structure, caption strategy, audio selection criteria, and loop optimization. Use when the user asks to plan a short video under 60 seconds, create a Reel or TikTok concept, or structure a vertical video for social media. Do NOT use for long-form video scripts over 60 seconds (use video-script-writing), YouTube channel strategy (use youtube-video-strategy), or video shot lists (use video-storyboard).

FerroxLabs/murage

The user has a module map or chapter list and the question is now *how does this read.* Load whenever you hear \"what's the throughline,\" \"how should chapters flow,\" \"this feels disconnected,\" or \"I have the pieces but it's not a book yet.\

FerroxLabs/murage

**Mode skill.** Default-enabled on the Stage specialist.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community