From ac3c63c6d6999399454e87dff225fc60e53b424e Mon Sep 17 00:00:00 2001 From: promptadmin Date: Sat, 6 Jun 2026 20:33:19 +0000 Subject: [PATCH] Automated ingestion of prompt: App Store Screenshots Gallery Generator --- ...tore_screenshots_gallery_generator_1300.md | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 prompts/coding/app_store_screenshots_gallery_generator_1300.md diff --git a/prompts/coding/app_store_screenshots_gallery_generator_1300.md b/prompts/coding/app_store_screenshots_gallery_generator_1300.md new file mode 100644 index 0000000..727bd8f --- /dev/null +++ b/prompts/coding/app_store_screenshots_gallery_generator_1300.md @@ -0,0 +1,126 @@ +--- +title: "App Store Screenshots Gallery Generator" +contributor: "@AgileInnov8tor" +tags: #coding, #agileinnov8tor +--- + +# App Store Screenshots Gallery Generator + +**Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that looks like it was designed by the top 1% of app developers.** + +## Context + +You are building a screenshots gallery page for an app. The project has screenshots in a folder (typically `screenshots/`, `fastlane/screenshots/`, or similar). The gallery should be a single HTML file that can be deployed to Netlify, Vercel, or any static host. + +## Requirements + +### 1. Design System Foundation + +Create CSS custom properties (design tokens) for: + +- **Colors**: Primary palette (50-900 shades), secondary/accent palette, neutral grays (50-900) +- **Surfaces**: Three surface levels (surface-1, surface-2, surface-3) +- **Typography**: Two-font stack (mono for UI elements, sans for body) +- **Spacing**: Consistent scale (4px base) +- **Borders**: Radius scale (sm, md, lg, xl, 2xl, 3xl) +- **Shadows**: Five elevation levels (sm, md, lg, xl, 2xl) +- **Transitions**: Three speeds (fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier) + +### 2. Layout Architecture + +- **Container**: Max-width 1600px, centered, with responsive padding +- **Grid**: Masonry-style responsive grid using `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` +- **Gap**: 2rem on desktop, 1.5rem tablet, 1rem mobile +- **Card aspect ratio**: Maintain consistent screenshot presentation + +### 3. Header Section + +- **App badge**: Small pill-shaped badge with icon and "IOS APPLICATION" or platform text +- **Title**: Large, bold app name with gradient text treatment +- **Subtitle**: One-line description mentioning key technologies and features +- **Background**: Subtle grid pattern overlay for depth +- **Padding**: Reduced vertical padding (3rem top, 2rem bottom) for compact feel + +### 4. Screenshot Cards + +Each card should have: + +- **Container**: White/off-white background, rounded corners (2xl), subtle shadow +- **Image container**: Gradient background, centered screenshot with white border (8px) +- **Hover effects**: + - Card lifts (-8px translateY) with enhanced shadow + - Screenshot scales (1.04) with slight rotation (0.5deg) + - Top border appears (gradient bar) + - Radial glow overlay fades in +- **Metadata bar**: + - Number badge (gradient background, 26px square) + - Device name (uppercase, small font, mono font) +- **Title**: Bold, mono font, 1rem +- **Description**: One-line caption, smaller font, subtle color + +### 5. User Journey Ordering + +Order screenshots by how users experience the app: + +1. **Login/Onboarding** - First screen users see +2. **Dashboard/Home** - Main landing after login +3. **Primary feature views** - Core app functionality +4. **Settings/Configuration** - Customization screens +5. **Permissions/Integrations** - HealthKit, notifications, etc. +6. **Advanced features** - Sync, sharing, cloud features +7. **Analytics/Reports** - Data visualization screens +8. **Archive/History** - Historical data views + +### 6. Animations + +- **Entrance**: Staggered fade-in with translateY (0.1s delays between cards) +- **Hover**: Smooth cubic-bezier easing (0.16, 1, 0.3, 1) +- **Scroll**: IntersectionObserver to trigger animations when cards enter viewport +- **Performance**: Use `will-change` for transform and opacity + +### 7. Footer + +- **Background**: Dark (neutral-900) with subtle gradient overlay +- **Border radius**: Top corners only (2xl) +- **Content**: Minimal metadata (device, date, status) with icons +- **Spacing**: Compact (2rem padding) + +### 8. Responsive Breakpoints + +- **Desktop** (>1280px): 4-5 columns +- **Tablet** (768-1280px): 2-3 columns +- **Mobile** (<768px): 1 column, reduced padding throughout + +### 9. Technical Requirements + +- **Single HTML file**: All CSS inline in `