Is landing-page safe to install?

SaferSkills independently audited landing-page (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

plugins/frontend/skills/landing-page/SKILL.md · 1 file

plugins/frontend/skills/landing-page/SKILL.md6.2 KB · Markdown

name: landing-page

description: "Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'."

allowed-tools:

- Read

- Write

- Edit

- Glob

- Grep

compatibility: claude-code-only

Landing Page Generator

Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.

Workflow

1. Gather the Brief

Ask the user for:

Field	Required	Example
Business/product name	Yes	"Acme Plumbing"
Value proposition	Yes	"24/7 emergency plumbing across Newcastle"
Target audience	Yes	"Homeowners in the Hunter Valley"
Primary CTA	Yes	"Call Now" / "Get a Quote" / "Sign Up"
Secondary CTA	No	"Learn More" / "View Pricing"
Brand colours	No	Primary: #1E40AF, accent: #F59E0B
Logo URL or text	No	URL to logo image, or just use business name
Phone / email	No	For contact section
Sections wanted	No	Default: hero, features, testimonials, FAQ, footer

If no brand colours provided, suggest using the color-palette skill to generate them, or use a sensible default (slate/blue).

2. Generate the HTML

Produce a single HTML file with:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <!-- Meta, OG tags, favicon -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  <!-- Nav -->
  <!-- Hero -->
  <!-- Features -->
  <!-- Social Proof -->
  <!-- Pricing (optional) -->
  <!-- FAQ -->
  <!-- Footer -->
  <!-- Dark mode toggle script -->
</body>
</html>

3. Section Patterns

#### Navigation

Sticky top nav with logo/name + anchor links to sections
Mobile hamburger menu (CSS-only or minimal JS)
CTA button in nav (right-aligned)

#### Hero

Full-width, above the fold
Headline (h1) — the value proposition, not the business name
Subheadline — supporting detail, 1-2 sentences
Primary CTA button (large, contrasting colour)
Optional: hero image placeholder or gradient background
Pattern: text-left on desktop (60/40 split with image), centred on mobile

#### Features / Services

3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop)
Each: icon placeholder + heading + short description
Use semantic headings (h2 for section, h3 for items)

#### Social Proof / Testimonials

2-3 testimonial cards with quote, name, role/company
Star rating if applicable
Alternative: logo bar of client/partner logos

#### Pricing (optional)

2-3 tier cards (basic/pro/enterprise pattern)
Highlighted "recommended" tier
Feature comparison list per tier
CTA button per tier

#### FAQ

Accordion pattern (details/summary — no JS needed)
4-6 common questions
Schema.org FAQPage markup for SEO

#### Footer

Business name, contact info, social links
Legal links (privacy, terms) as placeholders
Copyright year (use JS for auto-update)

4. Technical Requirements

Responsive: Mobile-first with three breakpoints

Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)

Dark mode: Three-state toggle (light/dark/system)

CSS custom properties for colours
.dark class on <html> — no CSS media query
Small JS snippet for toggle + localStorage persistence

Accessibility:

Proper heading hierarchy (h1 → h2 → h3, no skips)
Alt text placeholders on all images
Focus-visible styles on interactive elements
Sufficient colour contrast (4.5:1 minimum)
Skip-to-content link

SEO:

Semantic HTML5 elements (header, main, section, footer)
OG meta tags (title, description, image, url)
Twitter card meta tags
Canonical URL
JSON-LD for LocalBusiness if it's a local business (reference seo-local-business skill)

Performance:

No JS required for core content rendering
Lazy-load images (loading="lazy")
System font stack (no external font requests)
Single file — no external CSS/JS beyond Tailwind CDN

5. Colour Application

If user provides brand colours, configure Tailwind inline:

<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
      }
    }
  }
}
</script>

If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary).

6. Output

Write the file to the user's specified location, or default to ./index.html.

After generating:

Tell the user how to preview: open index.html (macOS) or python3 -m http.server for a local server
Suggest deployment options: drag to Cloudflare Pages, Netlify drop, or wrangler deploy for Workers
List placeholder content that needs replacing (images, testimonials, phone numbers)

Quality Rules

No placeholder lorem ipsum — generate realistic placeholder text based on the business type
No broken layouts — test the responsive grid mentally: 1 col → 2 col → 3 col
No inline styles — use Tailwind classes exclusively
Real interactions — smooth scroll to sections, working accordion, working dark mode toggle
Accessible by default — don't sacrifice accessibility for aesthetics
Australian conventions — if the business is Australian, use +61 phone format, Australian spelling, ABN placeholder

Variations

Request	Approach
"Coming soon page"	Hero only + email signup form + countdown timer
"Product launch"	Hero + features + pricing + CTA-heavy
"Portfolio"	Hero + project grid + about + contact
"Event page"	Hero + schedule + speakers + venue + register CTA
"App download"	Hero + features + screenshots + app store badges

Adapt the section selection to match the page purpose. Not every page needs pricing or FAQ.

landing-page— agent skill

Is landing-page safe to install?

Landing Page Generator

Workflow

1. Gather the Brief

2. Generate the HTML

3. Section Patterns

4. Technical Requirements

5. Colour Application

6. Output

Quality Rules

Variations

Audit the pieces. Scan the whole. Decide.