nexoreai/skills

SaaS Landing Template

Overview

Create a clean, premium SaaS landing page template that mirrors the provided layout and spacing system while staying brand-neutral and image-free. The canonical source is the template files under assets/template/.

Workflow

1) Scaffold the project (Bun + Next.js)

• Use bunx --bun create-next-app@latest . with App Router, TypeScript, Tailwind, and src/.
• Keep ESLint enabled. Avoid experimental flags.

2) Initialize shadcn/ui

• Run shadcn init and add the button component.
• Copy assets/template/src/components/ui/skeleton.tsx into the project to provide placeholders.

3) Apply global tokens + typography

• Replace src/app/globals.css with assets/template/src/app/globals.css.
• This sets the neutral-first palette, radii, shadows, typography scale, and the fixed background gradient.
• Keep the font-face declarations as-is, or swap to your preferred rounded sans while preserving weights 400/500/600.

4) Install the template structure

• Copy the following into the project:
  • assets/template/src/app/layout.tsx
  • assets/template/src/app/page.tsx
  • assets/template/src/components/landing/*
  • assets/template/src/components/ui/skeleton.tsx
• Ensure src/lib/utils.ts exists (standard shadcn cn helper). If missing, copy assets/template/src/lib/utils.ts.

5) Keep it brand-neutral

• Replace all brand references with placeholders like Company and Platform.
• Avoid any real company names, founders, or external credits.

6) Validate structure and accessibility

• Confirm semantic headings (h1 then h2 for section titles).
• Ensure button and link text is descriptive.
• Keep the nav pill and main CTAs keyboard-friendly.

References

• For exact tokens, spacing, and skeleton sizes: references/template-spec.md
• For section order and layout intent: references/section-map.md

Assets

• Canonical template files: assets/template/