Files
antigravity-skills-reference/skills/app-builder/templates/nextjs-static/TEMPLATE.md
sck_0 4e8e5069fa feat: add 33 skills from vudovn/antigravity-kit
- Added: api-patterns, app-builder, architecture, bash-linux, behavioral-modes,
  clean-code, code-review-checklist, database-design, deployment-procedures,
  docker-expert, documentation-templates, game-development, geo-fundamentals,
  i18n-localization, lint-and-validate, mobile-design, nestjs-expert,
  nextjs-best-practices, nodejs-best-practices, parallel-agents,
  performance-profiling, plan-writing, powershell-windows, prisma-expert,
  python-patterns, react-patterns, red-team-tactics, seo-fundamentals,
  server-management, tailwind-patterns, tdd-workflow, typescript-expert,
  vulnerability-scanner
- Updated README: skill count 179 → 223
- Added credit for vudovn/antigravity-kit (MIT License)

Source: https://github.com/vudovn/antigravity-kit
2026-01-20 08:51:02 +01:00

2.0 KiB

name, description
name description
nextjs-static Next.js static site template principles. Landing pages, portfolios, marketing.

Next.js Static Site Template

Tech Stack

Component Technology
Framework Next.js 14 (Static Export)
Language TypeScript
Styling Tailwind CSS
Animations Framer Motion
Icons Lucide React
SEO Next SEO

Directory Structure

project-name/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx      # Landing
│   │   ├── about/
│   │   ├── contact/
│   │   └── blog/
│   ├── components/
│   │   ├── layout/       # Header, Footer
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── ui/
│   └── lib/
├── content/              # Markdown content
├── public/
└── next.config.js

Static Export Config

// next.config.js
const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
  trailingSlash: true,
};

Landing Page Sections

Section Purpose
Hero Main headline, CTA
Features Product benefits
Testimonials Social proof
Pricing Plans
CTA Final conversion

Animation Patterns

Pattern Use
Fade up Content entry
Stagger List items
Scroll reveal On viewport
Hover Interactive feedback

Setup Steps

  1. npx create-next-app {{name}} --typescript --tailwind --app
  2. Install: npm install framer-motion lucide-react next-seo
  3. Configure static export
  4. Create sections
  5. npm run dev

Deployment

Platform Method
Vercel Auto
Netlify Auto
GitHub Pages gh-pages branch
Any host Upload out folder

Best Practices

  • Static export for maximum performance
  • Framer Motion for premium animations
  • Responsive mobile-first design
  • SEO metadata on every page