Source profileQuality 79/100

nexu-io/open-design/docs/examples/saas-landing-skill/SKILL.md

saas-landing

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

Source repository stars
91,167
Declared platforms
0
Static risk flags
1
Last source update
2026-08-25
Source checked
2026-08-25
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSourceFAQ

Decision brief

What it does: where it fits

Produce a single-page SaaS landing. Agent, follow this workflow exactly.

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/nexu-io/open-design --skill "docs/examples/saas-landing-skill"
    Safe inspection promptEditorial

    Inspect the Agent Skill "saas-landing" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/docs/examples/saas-landing-skill/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      1. Read context

      Before writing anything: - Read DESIGN.md in the current working directory. If missing, stop and ask for one. - Identify the color palette, typography tokens, and layout principles. - Note the "Agent Prompt Guide" section — it overrides any instruction here if they conflict.

      Read DESIGN.md in the current working directory. If missing, stop and ask for one.Identify the color palette, typography tokens, and layout principles.Note the "Agent Prompt Guide" section — it overrides any instruction here if they conflict.
    2. 02

      2. Plan sections

      Required sections, in order: 1. Hero — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the herodensity parameter as vertical padding in px. 2. Features — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body. 3. Social…

      Hero — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the herodensity parameter as vertical padding in px.Features — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body.Social proof — proofcount logos or testimonials. If 0, skip this section.
    3. 03

      3. Apply design system

      All colors must come from DESIGN.md tokens. Do not invent hex values.

      All colors must come from DESIGN.md tokens. Do not invent hex values.Typography: use the declared display font for headlines, body font for everything else.Layout: respect the grid, max-width, and section spacing rules.
    4. 04

      4. Write the file

      Output a single self-contained index.html with: - All CSS inlined in a block in . - System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc. - No external JS. - Semantic HTML (, , , ). - Each editable element tagged with data-od-id="" so the host app's com…

      All CSS inlined in a block in .System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc.No external JS.

    Permission review

    Static risk signals and limitations

    Writes files

    medium · line 31

    The documentation asks the agent to create, modify, or delete local files.

    ## 4. Write the file

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score79/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars91,167SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    nexu-io/open-design
    Skill path
    docs/examples/saas-landing-skill/SKILL.md
    Commit
    edfa6b5f447e95cb120eae030f03baba00dc34de
    License
    Apache-2.0
    Collected
    2026-08-25
    Default branch
    main
    View the original SKILL.md

    SaaS Landing Skill

    Produce a single-page SaaS landing. Agent, follow this workflow exactly.

    1. Read context

    Before writing anything:

    • Read DESIGN.md in the current working directory. If missing, stop and ask for one.
    • Identify the color palette, typography tokens, and layout principles.
    • Note the "Agent Prompt Guide" section — it overrides any instruction here if they conflict.

    2. Plan sections

    Required sections, in order:

    1. Hero — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the hero_density parameter as vertical padding in px.
    2. Features — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body.
    3. Social proof — proof_count logos or testimonials. If 0, skip this section.
    4. Pricing — 2–3 tiers. Include only if has_pricing is true.
    5. Footer CTA — large accent-colored band with one-button call to action.
    6. Footer — minimal: links + copyright.

    3. Apply design system

    • All colors must come from DESIGN.md tokens. Do not invent hex values.
    • Typography: use the declared display font for headlines, body font for everything else.
    • Layout: respect the grid, max-width, and section spacing rules.
    • Components: use declared button/card/input patterns. Do not add shadows if DESIGN.md's Depth & Elevation says minimal.
    • Accent: use the accent color only once in the hero, once in the footer CTA, and for all links. Do not flood the page.

    4. Write the file

    Output a single self-contained index.html with:

    • All CSS inlined in a <style> block in <head>.
    • System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc.
    • No external JS.
    • Semantic HTML (<header>, <main>, <section>, <footer>).
    • Each editable element tagged with data-od-id="<unique-slug>" so the host app's comment mode can target it.

    5. Self-check

    Before finishing, verify:

    • All text is content-meaningful, not lorem ipsum (use product_name and tagline inputs; generate plausible specific copy for the rest).
    • No broken color references (every CSS color value is in DESIGN.md's palette or a valid alpha/fallback variant).
    • Responsive breakpoints match DESIGN.md's Responsive Behavior section.
    • The page looks good at 1440w, 768w, and 375w (mentally simulate).
    • Accent used no more than twice total.

    6. Done

    Write only index.html. Do not generate a separate CSS file, JS file, or README.

    For skill authors reading this as a reference

    This is a minimal but complete skill. Structure:

    saas-landing-skill/
├── SKILL.md    ← you are here
└── assets/
    └── base.html    (optional starter template; this skill doesn't use one)

    Things to notice:

    • The od: front-matter block is optional for Claude-Code-only compatibility, but adding it lights up OD's typed inputs, sliders, preview metadata, and capability gating.
    • The workflow below the front-matter is plain Markdown that the agent reads as its system prompt.
    • DESIGN.md is treated as a collaborator, not an override. The skill gives the agent authority to override when the brief conflicts, but never to invent new tokens.
    • data-od-id tagging is how we wire elements to comment mode. Skills that want comment-mode compatibility must annotate their output.

    See ../../skills-protocol.md for the full protocol.

    Frequently asked questions

    What to verify before installation and use

    What does the saas-landing source document cover?

    Produce a single-page SaaS landing. Agent, follow this workflow exactly.

    How do I install saas-landing?

    The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "docs/examples/saas-landing-skill". Inspect the command and pinned source before running it.

    Which permission-related actions were detected?

    Static rules flagged write-files in the source; the page lists the matching lines and excerpts.

    Alternatives

    Compare before choosing

    Computed 7991,167

    nexu-io/open-design

    saas-landing

    Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

    2026-08-250 platforms
    Computed 982,634

    aaron-he-zhu/aaron-marketing-skills

    reactivation-specialist

    Use when the user asks to "build a win-back campaign", "re-engage lapsed subscribers", "run a re-permission / re-consent sweep", or "sunset my dead list"; produces a closed-loop reactivation program — a lapsed-cohort definition, a staged offer ladder, a re-consent (re-permission) capture step, and a sunset-confirm / suppression rule. Owns none of the SEND-N sub-item notes: engagement-decay / sunset is email-sequence-designer's and preference-center / frequency options is preference-frequency-man

    2026-08-251 platforms
    Computed 9841

    respira-press/agent-skills-wordpress

    design-system-synthesizer

    Use when the user says 'build a design system for my site', 'extract design tokens', 'capture my brand', or 'build my style guide', or after a rebrand. Reads representative pages, theme files, and media to extract logo, colors, typography, spacing, and components, then writes a visible style-guide page.

    2026-08-190 platforms
    Computed 9830

    MoizIbnYousaf/marketing-cli

    higgsfield-generate

    Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "

    2026-08-170 platforms