Hackathon Landing Pwa

Name: Hackathon Landing Pwa
Availability: InStock
Author: fabianferno

Free Verified 91 lines By fabianferno CRO SEO

Description

Landing page and app shell polish for Next.js hackathon projects: Lenis smooth scroll, SEO and social images (favicon set, web manifest, Open Graph/Twitter banner from a seed asset), global selection styling, PWA basics, conversion-oriented copy frameworks, typography (Google Fonts + DaFont,…

What Claude Learns

→ When to use
→ Smooth scroll (Lenis + React)
→ SEO, icons, and social preview
→ Seed asset
→ Checklist (files in public/ unless the project standardizes elsewhere)
→ Global CSS: selection color

Installation

1. Visit the GitHub repository: https://github.com/fabianferno/skills
2. Copy the SKILL.md file contents
3. Save to ~/.claude/commands/skill-name.md
4. Restart Claude Code to load the new skill

Stack & Dependencies

JavaScript React CSS Tailwind

Frequently Asked Questions

Is Hackathon Landing Pwa free to use?

Yes u2014 Hackathon Landing Pwa is free. Install it directly with one command (`npx mkt-skills install hackathon-landing-pwa`) or download the SKILL.md file and drop it into your `~/.claude/skills/` directory. No account, no sign-up, no license fee.

Download SKILL.md GitHub

---
name: hackathon-landing-pwa
description: >-
  Landing page and app shell polish for Next.js hackathon projects: Lenis smooth scroll, SEO and social images
  (favicon set, web manifest, Open Graph/Twitter banner from a seed asset), global selection styling, PWA basics,
  conversion-oriented copy frameworks, typography (Google Fonts + DaFont, Tailwind `font-*` utilities). Use when
  building or refining a marketing landing page, app metadata, installable PWA, favicons, or scroll/typography
  polish alongside hackathon-app-dev.
---

# Hackathon landing page, SEO, and PWA

## When to use

Apply when shipping or tightening the **public landing** and **browser chrome** for a Next.js app: smooth scrolling, **favicons and manifest**, **OG/Twitter** previews, **PWA** affordances, **brand-colored text selection**, and **copy structure** that converts.

Pair with **[hackathon-app-dev](../hackathon-app-dev/SKILL.md)** for the core stack; use **`frontend-design`** (or equivalent) for visual direction on the hero and layout.

---

## Smooth scroll (Lenis + React)

1. Install: `pnpm add lenis` ([`lenis/react`](https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md)).
2. Wrap the app (or layout) with `<ReactLenis root />` from `lenis/react`.
3. If the project already uses **Framer Motion**, wire Lenis `raf` to Motion’s `frame` loop per the [Lenis React README — Framer Motion integration](https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md) (`autoRaf: false`, `frame.update` / `cancelFrame`).
4. Tune easing/duration via Lenis `options` only if defaults feel wrong on the target devices.

---

## SEO, icons, and social preview

### Seed asset

1. **Ask the user for a seed image** (logo, mark, or hero graphic) as the single source of truth for the brand mark.
2. **Vector**: derive or simplify a **SVG** suitable for small sizes (favicon clarity). Use tracing/simplification in a design tool or an automated vectorizer if needed; avoid illegible detail at 16×16.
3. **Rasters**: export or generate from the seed/SVG at least:
   - `android-chrome-192x192.png`
   - `android-chrome-512x512.png`
   - `apple-touch-icon.png`
   - `favicon-16x16.png`
   - `favicon-32x32.png`
   - `favicon.ico` (multi-size ICO from the same mark)
   - `site.webmanifest` (name, short_name, theme/background colors, `icons` pointing at the above)
4. **Open Graph / Twitter banner**: produce **`site-banner.png`** (typical aspect **1200×630** or current platform recommendation). **After the landing renders in the browser**, use the **Cursor browser tools** to **capture a screenshot** of the landing (above-the-fold or full page per design) and save/export as `site-banner.png` for consistent social previews, unless the user supplies a designed asset instead.
5. Wire **Next.js App Router `metadata`** (or `metadata` API): `title`, `description`, `openGraph.images`, `twitter.card` / `twitter.images`, `icons`, `manifest` path. Remove reliance on the **default `app/favicon.ico`** from `create-next-app` once custom icons live in `public/` and metadata points to them.

### Checklist (files in `public/` unless the project standardizes elsewhere)

- [ ] `android-chrome-192x192.png`, `android-chrome-512x512.png`
- [ ] `apple-touch-icon.png`
- [ ] `favicon-16x16.png`, `favicon-32x32.png`, `favicon.ico`
- [ ] `site-banner.png` (OG/Twitter)
- [ ] `site.webmanifest`
- [ ] Metadata + no duplicate stale default favicon

---

## Global CSS: selection color

In global styles (e.g. `app/globals.css`), set `::selection` (and `::-moz-selection`) **foreground/background** to match the **brand theme** (CSS variables from Tailwind/shadcn theme tokens are ideal). Remove or override any default that clashes with the palette.

---

## PWA (optimize the web app)

- **`site.webmanifest`**: `name`, `short_name`, `start_url`, `display` (`standalone` or `browser`), `theme_color`, `background_color`, icon entries.
- **Service worker**: add a maintained solution compatible with the project’s Next.js version (e.g. community **Serwist** / **next-pwa** patterns or the approach in current docs—verify against Next release notes; do not ship a dead config).
- **Installability**: HTTPS in production, maskable icons where applicable, and a **clear `start_url`**.
- **Scope**: for a hackathon, prefer a **minimal** SW (cache shell + offline fallback) over over-caching dynamic API routes.

---

## Typography and fonts

1. **Infer faces from app nature** — Pick heading + body fonts that match the product (tone, industry, energy). Use the heuristics in [reference.md](reference.md#choosing-fonts-by-app-nature); if still unsure, use the **defaults** below.
2. **Sources** — **Google Fonts** for body/UI via `next/font/google` (download is handled by Next). **DaFont** for display/heading files: use the **`curl` zip URL** pattern in [reference.md](reference.md#dafont-cli-download) (`f=<slug>` matches the font page, e.g. `herkey` for [herkey.font](https://www.dafont.com/herkey.font)), then unzip, convert to **`.woff2`** when needed, place under e.g. `app/fonts/`, load with `next/font/local`.
3. **Defaults when unsure** — **Inter** as the global **base / body** (`font-sans`). **Coolvetica** ([DaFont](https://www.dafont.com/coolvetica.font)) for **headings** and hero type, applied with the utility **`font-coolvetica`** on heading elements (not on the whole document).
4. **Tailwind convention (all custom fonts)** — For every local or Google font you add, expose it as **`font-{kebab-case-name}`** in the Tailwind theme (e.g. `font-coolvetica`, `font-safira-march`). Map each to a **CSS variable** from `next/font` (`variable: '--font-coolvetica'`) so utilities stay consistent across the app. Full layout + `tailwind.config` / `@theme` patterns: [reference.md](reference.md#tailwind-font-utilities).

---

## Copy (reference)

- **Conversion copy**: WHO/WHY/WHAT headlines, CTA → **CTV** (benefit-led), **PAS**, benefits over features, social proof, visual story. Full patterns and examples: [reference.md](reference.md#landing-page-copywriting).
- **Font catalog** (optional headings, Google body list): [reference.md](reference.md#fonts).

---

## Handoff

- Core stack, auth, and MCPs: **[hackathon-app-dev](../hackathon-app-dev/SKILL.md)** and [hackathon-app-dev/reference.md](../hackathon-app-dev/reference.md).

Description

What Claude Learns

Installation

Stack & Dependencies

Frequently Asked Questions

AI Marketing Skills Newsletter