### Scaffold Next.js Project and Install Dependencies

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Demonstrates how to scaffold a new Next.js project and install the 'html-to-image' dependency using different package managers (bun, pnpm, npm). This is part of the project setup for the screenshot generator.

```bash
# Detect package manager (priority: bun > pnpm > yarn > npm)
which bun && echo "use bun" || which pnpm && echo "use pnpm" || which yarn && echo "use yarn" || echo "use npm"

# Scaffold with bun
bunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
bun add html-to-image

# Scaffold with pnpm
pnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
pnpm add html-to-image

# Scaffold with npm
npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
npm install html-to-image
```

--------------------------------

### Install App Store Screenshots Generator using Skills CLI

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Instructions for installing the App Store Screenshots Generator skill using the skills CLI. This includes options for installing for the current project, globally, or for a specific agent like Claude Code.

```bash
# Install for current project
npx skills add ParthJadhav/app-store-screenshots

# Install globally (available across all projects)
npx skills add ParthJadhav/app-store-screenshots -g

# Install for a specific agent
npx skills add ParthJadhav/app-store-screenshots -a claude-code
```

--------------------------------

### Manual Installation of App Store Screenshots Generator

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/README.md

Installs the App Store Screenshots Generator skill by cloning the Git repository into the specified skills directory. This method is an alternative to using `npx` for installation.

```bash
git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots

```

--------------------------------

### Manually Install App Store Screenshots Generator via Git

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Provides instructions for manually installing the App Store Screenshots Generator by cloning the repository directly into the AI coding agent's skills directory.

```bash
# Clone to Claude Code skills directory
git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots
```

--------------------------------

### Install App Store Screenshots Generator using npx

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/README.md

Installs the App Store Screenshots Generator skill using `npx`. This command works with various AI coding agents like Claude Code, Cursor, and Windsurf. It can be installed globally for use across all projects or for a specific agent.

```bash
npx skills add ParthJadhav/app-store-screenshots

```

```bash
npx skills add ParthJadhav/app-store-screenshots -g

```

```bash
npx skills add ParthJadhav/app-store-screenshots -a claude-code

```

--------------------------------

### Triggering App Store Screenshot Generation Skill

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Provides example prompts to trigger an AI coding agent for generating App Store screenshots. It also lists the information the AI will request from the user to customize the screenshots.

```bash
# Example prompts that trigger the skill
> Build App Store screenshots for my app
> Generate marketing screenshots for an iOS app
> Create exportable screenshot assets
> I need App Store screenshots with a dark theme

# The AI will ask for:
# 1. App screenshots (PNG files)
# 2. App icon
# 3. Brand colors
# 4. Font preference
# 5. Feature list in priority order
# 6. Number of slides (up to 10)
# 7. Style direction (warm, dark, minimal, bold, etc.)
```

--------------------------------

### Define Responsive Typography

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Defines a typography scale relative to the canvas width (W) to ensure text scales proportionally across different export resolutions. Includes a Caption component example for applying these styles.

```typescript
const typography = {
  categoryLabel: {
    fontSize: W * 0.028,
    fontWeight: 600,
    lineHeight: 'default',
  },
  headline: {
    fontSize: W * 0.09,
    fontWeight: 700,
    lineHeight: 1.0,
  },
  heroHeadline: {
    fontSize: W * 0.1,
    fontWeight: 700,
    lineHeight: 0.92,
  },
};

function Caption({ label, headline }: { label: string; headline: React.ReactNode }) {
  return (
    <div className="text-center">
      <p style={{ fontSize: W * 0.028, fontWeight: 600 }}>{label}</p>
      <h1 style={{ fontSize: W * 0.09, fontWeight: 700, lineHeight: 1.0 }}>
        {headline}
      </h1>
    </div>
  );
}
```

--------------------------------

### Phone Placement CSS Snippets

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/skills/app-store-screenshots/SKILL.md

Provides CSS positioning and transformation rules for different phone layouts in app store screenshots. These examples illustrate how to center a single phone, layer two phones for comparison, and position floating elements effectively.

```css
bottom: 0, width: "82-86%", translateX(-50%) translateY(12-14%)
```

```css
Back: left: "-8%", width: "65%", rotate(-4deg), opacity: 0.55
Front: right: "-4%", width: "82%", translateY(10%)
```

```css
Cards should NOT block the phone's main content.
Position at edges, slight rotation (2-5deg), drop shadows.
If distracting, push partially off-screen or make smaller.
```

--------------------------------

### Detect Package Manager

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/skills/app-store-screenshots/SKILL.md

This script checks for available package managers in a specific order (bun, pnpm, yarn, npm) and outputs the detected manager. It's useful for automating project setup in environments where the package manager might vary.

```bash
# Check in order
which bun && echo "use bun" || which pnpm && echo "use pnpm" || which yarn && echo "use yarn" || echo "use npm"
```

--------------------------------

### Next.js Layout Font Setup

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/skills/app-store-screenshots/SKILL.md

This TypeScript code snippet shows how to set up a custom font in the root layout of a Next.js application. It imports a font from 'next/font/google' and applies its class name to the body, ensuring consistent typography across the application.

```tsx
// src/app/layout.tsx
import { YourFont } from "next/font/google"; // Use whatever font the user specified
const font = YourFont({ subsets: ["latin"] });

export default function Layout({ children }: { children: React.ReactNode }) {
  return <html><body className={font.className}>{children}</body></html>;
}
```

--------------------------------

### Scaffolded Project Structure for Screenshot Generator

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/README.md

Illustrates the file structure generated by the App Store Screenshots Generator when starting from an empty folder. The core functionality resides in a single `src/app/page.tsx` file, with assets like `mockup.png` and `app-icon.png` placed in the `public` directory.

```tree
project/
├── public/
│   ├── mockup.png          # iPhone frame (copied from skill)
│   ├── app-icon.png        # Your app icon
│   └── screenshots/        # Your app screenshots
├── src/app/
│   ├── layout.tsx          # Font setup
│   └── page.tsx            # Screenshot generator (single file)
├── package.json
└── ...

```

--------------------------------

### Implement Phone Placement Patterns

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Provides CSS-in-JS patterns for positioning phone mockups on the canvas. Includes configurations for centered hero shots and layered comparison layouts.

```typescript
const centeredPhone = {
  position: 'absolute' as const,
  bottom: 0,
  left: '50%',
  width: '84%',
  transform: 'translateX(-50%) translateY(13%)',
};

const backPhone = {
  position: 'absolute' as const,
  left: '-8%',
  bottom: 0,
  width: '65%',
  transform: 'rotate(-4deg)',
  opacity: 0.55,
};

const frontPhone = {
  position: 'absolute' as const,
  right: '-4%',
  bottom: 0,
  width: '82%',
  transform: 'translateY(10%)',
};
```

--------------------------------

### Scaffold Next.js Project and Add Dependency

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/skills/app-store-screenshots/SKILL.md

These commands demonstrate how to scaffold a new Next.js project with TypeScript, Tailwind CSS, and other configurations, and then add the 'html-to-image' library. The specific command varies based on the detected package manager (bun, pnpm, yarn, npm).

```bash
# With bun:
bunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
bun add html-to-image
```

```bash
# With pnpm:
pnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
pnpm add html-to-image
```

```bash
# With yarn:
yarn create next-app . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
yarn add html-to-image
```

```bash
# With npm:
npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
npm install html-to-image
```

--------------------------------

### Export Screenshot with html-to-image (TypeScript)

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/skills/app-store-screenshots/SKILL.md

Demonstrates how to use the `html-to-image` library to export an HTML element as a PNG image. It includes essential steps like preparing the element for capture, applying a double-call trick for accurate rendering, and resetting the element's styles afterward. This method is preferred over `html2canvas` due to its superior handling of complex CSS properties.

```typescript
import { toPng } from "html-to-image";

// Before capture: move element on-screen
el.style.left = "0px";
el.style.opacity = "1";
el.style.zIndex = "-1";

const opts = { width: W, height: H, pixelRatio: 1, cacheBust: true };

// CRITICAL: Double-call trick — first warms up fonts/images, second produces clean output
await toPng(el, opts);
const dataUrl = await toPng(el, opts);

// After capture: move back off-screen
el.style.left = "-9999px";
el.style.opacity = "";
el.style.zIndex = "";
```

--------------------------------

### Phone Mockup Component for Screenshot Generation (TypeScript)

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

A React component that renders an iPhone mockup with a transparent screen area for displaying app screenshots. It uses pre-measured dimensions to precisely position the screenshot within the mockup frame.

```typescript
// Pre-measured mockup dimensions
const MK_W = 1022;  // mockup image width
const MK_H = 2082;  // mockup image height
const SC_L = (52 / MK_W) * 100;   // screen left offset %
const SC_T = (46 / MK_H) * 100;   // screen top offset %
const SC_W = (918 / MK_W) * 100;  // screen width %
const SC_H = (1990 / MK_H) * 100; // screen height %
const SC_RX = (126 / 918) * 100;  // border-radius x %
const SC_RY = (126 / 1990) * 100; // border-radius y %

function Phone({ src, alt, style, className = "" }: { src: string; alt: string; style?: React.CSSProperties; className?: string; }) {
  return (
    <div className={`relative ${className}`}
      style={{ aspectRatio: `${MK_W}/${MK_H}`, ...style }}>
      <img src="/mockup.png" alt="" 
        className="block w-full h-full" draggable={false} />
      <div className="absolute z-10 overflow-hidden"
        style={{
          left: `${SC_L}%`, top: `${SC_T}%`,
          width: `${SC_W}%`, height: `${SC_H}%`,
          borderRadius: `${SC_RX}% / ${SC_RY}%`,
        }}>
        <img src={src} alt={alt}
          className="block w-full h-full object-cover object-top"
          draggable={false} />
      </div>
    </div>
  );
}
```

--------------------------------

### Export Screenshots with html-to-image

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Handles the conversion of DOM elements into PNG files. Uses a double-call strategy to ensure fonts and images are fully rendered before capture and resizes the output to target dimensions.

```typescript
import { toPng } from "html-to-image";

async function exportScreenshot(el: HTMLElement, name: string, index: number, targetW: number, targetH: number) {
  el.style.left = "0px";
  el.style.opacity = "1";
  el.style.zIndex = "-1";

  const opts = { width: W, height: H, pixelRatio: 1, cacheBust: true };
  await toPng(el, opts);
  const dataUrl = await toPng(el, opts);

  el.style.left = "-9999px";
  
  const img = new Image();
  img.src = dataUrl;
  await new Promise((resolve) => (img.onload = resolve));

  const canvas = document.createElement("canvas");
  canvas.width = targetW;
  canvas.height = targetH;
  const ctx = canvas.getContext("2d")!;
  ctx.drawImage(img, 0, 0, targetW, targetH);

  const link = document.createElement("a");
  const paddedIndex = String(index + 1).padStart(2, "0");
  link.download = `${paddedIndex}-${name}-${targetW}x${targetH}.png`;
  link.href = canvas.toDataURL("image/png");
  link.click();
}
```

--------------------------------

### Configure Font Layout in Next.js

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Sets up global font optimization using Next.js font loaders. This ensures consistent typography across all screenshot components.

```tsx
import { Inter } from "next/font/google";

const font = Inter({ subsets: ["latin"] });

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body className={font.className}>{children}</body>
    </html>
  );
}
```

--------------------------------

### Phone Mockup Component for Screenshots (React/TypeScript)

Source: https://github.com/parthjadhav/app-store-screenshots/blob/main/skills/app-store-screenshots/SKILL.md

A React component that renders a phone mockup with a screen overlay for displaying app screenshots. It uses pre-measured offsets and dimensions to position the screenshot within the mockup.

```typescript
const MK_W = 1022;  // mockup image width
const MK_H = 2082;  // mockup image height
const SC_L = (52 / MK_W) * 100;   // screen left offset %
const SC_T = (46 / MK_H) * 100;   // screen top offset %
const SC_W = (918 / MK_W) * 100;  // screen width %
const SC_H = (1990 / MK_H) * 100; // screen height %
const SC_RX = (126 / 918) * 100;  // border-radius x %
const SC_RY = (126 / 1990) * 100; // border-radius y %
```

```jsx
function Phone({ src, alt, style, className = "" }: { src: string; alt: string; style?: React.CSSProperties; className?: string; }) {
  return (
    <div className={`relative ${className}`}
      style={{ aspectRatio: `${MK_W}/${MK_H}`, ...style }}>
      <img src="/mockup.png" alt="" 
        className="block w-full h-full" draggable={false} />
      <div className="absolute z-10 overflow-hidden"
        style={{
          left: `${SC_L}%`, top: `${SC_T}%`,
          width: `${SC_W}%`, height: `${SC_H}%`,
          borderRadius: `${SC_RX}% / ${SC_RY}%`,
        }}>
        <img src={src} alt={alt}
          className="block w-full h-full object-cover object-top"
          draggable={false} />
      </div>
    </div>
  );
}
```

--------------------------------

### Define Export Size Constants for App Store Screenshots (TypeScript)

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Defines constants for Apple's required iPhone screenshot export sizes. It specifies the design resolution and lists other required resolutions, emphasizing designing at the largest size.

```typescript
const SIZES = [
  { label: '6.9"', w: 1320, h: 2868 },  // Design at this size
  { label: '6.5"', w: 1284, h: 2778 },
  { label: '6.3"', w: 1206, h: 2622 },
  { label: '6.1"', w: 1125, h: 2436 },
] as const;

// Base dimensions for design
const W = 1320;
const H = 2868;
```

--------------------------------

### Screenshot Registry Pattern in TypeScript

Source: https://context7.com/parthjadhav/app-store-screenshots/llms.txt

Defines an interface for screenshot definitions and an array to hold these definitions. This pattern facilitates easy iteration and management of screenshots for export. It's used within a React component to render previews and hidden export containers.

```typescript
interface ScreenshotDef {
  name: string;
  component: React.FC;
}

const SCREENSHOTS: ScreenshotDef[] = [
  { name: "hero", component: HeroScreenshot },
  { name: "freshness", component: FreshnessScreenshot },
  { name: "widgets", component: WidgetsScreenshot },
  { name: "logging", component: LoggingScreenshot },
  { name: "features", component: MoreFeaturesScreenshot },
];

// Main page renders preview grid + hidden export containers
export default function ScreenshotsPage() {
  const exportRefs = useRef<(HTMLDivElement | null)[]>([]);

  return (
    <div className="p-8">
      {/* Preview grid */}
      <div className="grid grid-cols-3 gap-4">
        {SCREENSHOTS.map((s, i) => (
          <ScreenshotPreview
            key={s.name}
            screenshot={s}
            onExport={() => exportAllSizes(exportRefs.current[i]!, s.name, i)}
          />
        ))}
      </div>

      {/* Hidden export containers at full resolution */}
      {SCREENSHOTS.map((s, i) => (
        <div
          key={`export-${s.name}`}
          ref={(el) => (exportRefs.current[i] = el)}
          style={{ position: "absolute", left: "-9999px", width: W, height: H }}
        >
          <s.component />
        </div>
      ))}
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.