Frontend Engineering — Vol. 9

Overview

Inside the Frontend Engineering — Vol. 9 you'll find 9 prompts built specifically for programming & dev. It includes prompts like “Page-by-Page Build”, “Design System Extraction Prompt Kit” and “Next.js”. None of them lock you in; mix, match and edit until the output sounds like you. Use them in ChatGPT, Claude and Gemini; the [bracketed] placeholders show you exactly what to swap in.

• 1.Next.js

  Copy

  # Next.js
  - Use minimal hook set for components: useState for state, useEffect for side effects, useCallback for memoized handlers, and useMemo for computed values. Confidence: 0.85
  - Never make page.tsx a client component. All client-side logic lives in components under /components, and page.tsx stays a server component. Confidence: 0.85
  - When persisting client-side state, use lazy initialization with localStorage. Confidence: 0.85
  - Always use useRef for stable, non-reactive state, especially for DOM access, input focus, measuring elements, storing mutable values, and managing browser APIs without triggering re-renders. Confidence: 0.85
  - Use sr-only classes for accessibility labels. Confidence: 0.85
  - Always use shadcn/ui as the component system for Next.js projects. Confidence: 0.85
  - When setting up shadcn/ui, ensure globals.css is properly configured with all required Tailwind directives and shadcn theme variables. Confidence: 0.70
  - When a component grows beyond a single responsibility, break it into smaller subcomponents to keep each file focused and improve readability. Confidence: 0.85
  - State itself should trigger persistence to keep side-effects predictable, centralized, and always in sync with the UI. Confidence: 0.85
  - Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state. Confidence: 0.85

• 2.Code Translator — Idiomatic, Version-Aware & Production-Ready

  Copy

  You are a senior polyglot software engineer with deep expertise in multiple
  programming languages, their idioms, design patterns, standard libraries,
  and cross-language translation best practices.
  
  I will provide you with a code snippet to translate. Perform the translation
  using the following structured flow:
  
  ---
  
  📋 STEP 1 — Translation Brief
  Before analyzing or translating, confirm the translation scope:
  
  - 📌 Source Language  : [Language + Version e.g., Python 3.11]
  - 🎯 Target Language  : [Language + Version e.g., JavaScript ES2023]
  - 📦 Source Libraries : List all imported libraries/frameworks detected
  - 🔄 Target Equivalents: Immediate library/framework mappings identified
  - 🧩 Code Type        : e.g., script / class / module / API / utility
  - 🎯 Translation Goal : Direct port / Idiomatic rewrite / Framework-specific
  - ⚠️  Version Warnings : Any target version limitations to be aware of upfront
  
  ---
  
  🔍 STEP 2 — Source Code Analysis
  Deeply analyze the source code before translating:
  
  - 🎯 Code Purpose      : What the code does overall
  - ⚙️  Key Components   : Functions, classes, modules identified
  - 🌿 Logic Flow        : Core logic paths and control flow
  - 📥 Inputs/Outputs    : Data types, structures, return values
  - 🔌 External Deps     : Libraries, APIs, DB, file I/O detected
  - 🧩 Paradigms Used    : OOP, functional, async, decorators, etc.
  - 💡 Source Idioms     : Language-specific patterns that need special
                           attention during translation
  
  ---
  
  ⚠️ STEP 3 — Translation Challenges Map
  Before translating, identify and map every challenge:
  
  LIBRARY & FRAMEWORK EQUIVALENTS:
  | # | Source Library/Function | Target Equivalent | Notes |
  |---|------------------------|-------------------|-------|
  
  PARADIGM SHIFTS:
  | # | Source Pattern | Target Pattern | Complexity | Notes |
  |---|---------------|----------------|------------|-------|
  
  Complexity:
  - 🟢 [Simple]  — Direct equivalent exists
  - 🟡 [Moderate]— Requires restructuring
  - 🔴 [Complex] — Significant rewrite needed
  
  UNTRANSLATABLE FLAGS:
  | # | Source Feature | Issue | Best Alternative in Target |
  |---|---------------|-------|---------------------------|
  
  Flag anything that:
  - Has no direct equivalent in target language
  - Behaves differently at runtime (e.g., null handling,
    type coercion, memory management)
  - Requires target-language-specific workarounds
  - May impact performance differently in target language
  
  ---
  
  🔄 STEP 4 — Side-by-Side Translation
  For every key logic block identified in Step 2, show:
  
  [BLOCK NAME — e.g., Data Processing Function]
  
  SOURCE ([Language]):
  ```[source language]
  [original code block]
  ```
  
  TRANSLATED ([Language]):
  ```[target language]
  [translated code block]
  ```
  
  🔍 Translation Notes:
  - What changed and why
  - Any idiom or pattern substitution made
  - Any behavior difference to be aware of
  
  Cover all major logic blocks. Skip only trivial
  single-line translations.
  
  ---
  
  🔧 STEP 5 — Full Translated Code
  Provide the complete, fully translated production-ready code:
  
  Code Quality Requirements:
  - Written in the TARGET language's idioms and best practices
    · NOT a line-by-line literal translation
    · Use native patterns (e.g., JS array methods, not manual loops)
  - Follow target language style guide strictly:
    · Python → PEP8
    · JavaScript/TypeScript → ESLint Airbnb style
    · Java → Google Java Style Guide
    · Other → mention which style guide applied
  - Full error handling using target language conventions
  - Type hints/annotations where supported by target language
  - Complete docstrings/JSDoc/comments in target language style
  - All external dependencies replaced with proper target equivalents
  - No placeholders or omissions — fully complete code only
  
  ---
  
  📊 STEP 6 — Translation Summary Card
  
  Translation Overview:
  Source Language  : [Language + Version]
  Target Language  : [Language + Version]
  Translation Type : [Direct Port / Idiomatic Rewrite]
  
  | Area                    | Details                                    |
  |-------------------------|--------------------------------------------|
  | Components Translated   | ...                                        |
  | Libraries Swapped       | ...                                        |
  | Paradigm Shifts Made    | ...                                        |
  | Untranslatable Items    | ...                                        |
  | Workarounds Applied     | ...                                        |
  | Style Guide Applied     | ...                                        |
  | Type Safety             | ...                                        |
  | Known Behavior Diffs    | ...                                        |
  | Runtime Considerations  | ...                                        |
  
  Compatibility Warnings:
  - List any behaviors that differ between source and target runtime
  - Flag any features that require minimum target version
  - Note any performance implications of the translation
  
  Recommended Next Steps:
  - Suggested tests to validate translation correctness
  - Any manual review areas flagged
  - Dependencies to install in target environment:
    e.g., npm install [package] / pip install [package]
  
  ---
  
  Here is my code to translate:
  
  Source Language : [SPECIFY SOURCE LANGUAGE + VERSION]
  Target Language : [SPECIFY TARGET LANGUAGE + VERSION]
  
  [PASTE YOUR CODE HERE]

• 3.Job Fit

  Copy

  Act as a Job Fit Assessor. You are tasked with evaluating the compatibility of a job opportunity with the candidate's profile.
  
  Your task is to assess the fit between the job description provided and the candidate's resume and project portfolio. Additionally, you will review any feedback and insights related to the candidate's leadership growth.
  
  You will:
  - Analyze the job description details
  - Review the candidate's resume added to project files
  - Consider the projects within this project folder
  - Evaluate feedback and leadership growth insights
  - Provide a detailed fit assessment
  
  Rules:
  - Do not generate or modify the candidate's resume
  - Do not generate any completed JavaScript document
  - Focus solely on the fit assessment based on available information

• 4.Angular Directive Generator

  Copy

  You are an expert Angular developer. Generate a complete Angular directive based on the following description:
  
  Directive Description: ${description}
  Directive Type: [structural | attribute]
  Selector Name: [e.g. appHighlight, *appIf]
  Inputs needed: [list any @Input() properties]
  Target element behavior: ${what_should_happen_to_the_host_element}
  
  Generate:
  1. The full directive TypeScript class with proper decorators
  2. Any required imports
  3. Host bindings or listeners if needed
  4. A usage example in a template
  5. A brief explanation of how it works
  
  Use Angular 17+ standalone directive syntax. Follow Angular style guide conventions.

• 5.Generate a Plan for Building the Best UI/UX

  Copy

  You are a senior full-stack engineer and UX/UI architect with 10+ years of experience building
  production-grade web applications. You specialize in responsive design systems, modern UI/UX
  patterns, and cross-device performance optimization.
  
  ---
  
  ## TASK
  
  Generate a **comprehensive, actionable development plan** for building a responsive web application
  that meets the following criteria:
  
  ### 1. RESPONSIVENESS & CROSS-DEVICE COMPATIBILITY
  - Flawlessly adapts to: mobile (320px+), tablet (768px+), desktop (1024px+), large screens (1440px+)
  - Define a clear **breakpoint strategy** with rationale
  - Specify a **mobile-first vs desktop-first** approach with justification
  - Address: touch targets, tap gestures, hover states, keyboard navigation
  - Handle: notches, safe areas, dynamic viewport units (dvh/svh/lvh)
  - Cover: font scaling, image optimization (srcset, art direction), fluid typography
  
  ### 2. PERFORMANCE & SMOOTHNESS
  - Target: 60fps animations, <2.5s LCP, <100ms INP, <0.1 CLS (Core Web Vitals)
  - Strategy for: lazy loading, code splitting, asset optimization
  - Approach to: CSS containment, will-change, GPU compositing for animations
  - Plan for: offline support or graceful degradation
  
  ### 3. MODERN & ELEGANT DESIGN SYSTEM
  - Define a **design token architecture**: colors, spacing, typography, elevation, motion
  - Specify: color palette strategy (light/dark mode support), font pairing rationale
  - Include: spacing scale, border radius philosophy, shadow system
  - Cover: iconography approach, illustration/imagery style guidance
  - Detail: component-level visual consistency rules
  
  ### 4. MODERN UX/UI BEST PRACTICES
  Apply and plan for the following UX/UI principles:
  - **Hierarchy & Scannability**: F/Z pattern layouts, visual weight, whitespace strategy
  - **Feedback & Affordance**: loading states, skeleton screens, micro-interactions, error states
  - **Navigation Patterns**: responsive nav (hamburger, bottom nav, sidebar), breadcrumbs, wayfinding
  - **Accessibility (WCAG 2.1 AA minimum)**: contrast ratios, ARIA roles, focus management, screen reader support
  - **Forms & Input**: validation UX, inline errors, autofill, input types per device
  - **Motion Design**: purposeful animation (easing curves, duration tokens), reduced-motion support
  - **Empty States & Edge Cases**: zero data, errors, timeouts, permission denied
  
  ### 5. TECHNICAL ARCHITECTURE PLAN
  - Recommend a **tech stack** with justification (framework, CSS approach, state management)
  - Define: component architecture (atomic design or alternative), folder structure
  - Specify: theming system implementation, CSS strategy (modules, utility-first, CSS-in-JS)
  - Include: testing strategy for responsiveness (tools, breakpoints to test, devices)
  
  ---
  
  ## OUTPUT FORMAT
  
  Structure your plan in the following sections:
  
  1. **Executive Summary** – One paragraph overview of the approach
  2. **Responsive Strategy** – Breakpoints, layout system, fluid scaling approach
  3. **Performance Blueprint** – Targets, techniques, tooling
  4. **Design System Specification** – Tokens, palette, typography, components
  5. **UX/UI Pattern Library Plan** – Key patterns, interactions, accessibility checklist
  6. **Technical Architecture** – Stack, structure, implementation order
  7. **Phased Rollout Plan** – Prioritized milestones (MVP → polish → optimization)
  8. **Quality Checklist** – Pre-launch verification across all devices and criteria
  
  ---
  
  ## CONSTRAINTS & STYLE
  
  - Be **specific and actionable** — avoid vague recommendations
  - Provide **concrete values** where applicable (e.g., "8px base spacing scale", "400ms ease-out for modals")
  - Flag **common pitfalls** and how to avoid them
  - Where multiple approaches exist, **recommend one with reasoning** rather than listing all options
  - Assume the target is a **[INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]**
  - Target users are **[INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]**
  
  ---
  
  Begin with the Executive Summary, then proceed section by section.

• 6.Elite Feedback Form Generator — Stunning UI with Next.js, React & TypeScript

  Copy

  <role>
  You are an elite senior frontend developer with exceptional artistic expertise and modern aesthetic sensibility. You deeply master Next.js, React, TypeScript, and other modern frontend technologies, combining technical excellence with sophisticated visual design.
  </role>
  
  <instructions>
  You will create a feedback form that is a true visual masterpiece.
  
  Follow these guidelines in order of priority:
  
  1. VISUAL IDENTITY ANALYSIS
  Examine the existing project carefully to extract:
  - Primary and secondary color palette
  - Typography and visual hierarchy
  - Spacing patterns and grid system
  - Animation and transition styles
  - Characteristic visual elements
  - Logo and its application
  
  Reference material: `${path_or_description_of_existing_project}`
  
  Reason: Maintaining consistency with the established visual identity is essential for creating a cohesive and professional brand experience.
  
  2. COMPONENT ARCHITECTURE
  Structure the form using modular, reusable React/Next.js components:
  - Create atomic components for inputs, buttons, and cards
  - Implement TypeScript with strong and complete typing
  - Organize the folder structure professionally
  - Ensure full responsiveness (mobile-first)
  
  Target directory: `${target_folder_path}`
  
  Reason: A well-structured architecture facilitates maintenance, testing, and scalability.
  
  3. EXCEPTIONAL VISUAL DESIGN
  Elevate the visual standard with:
  - Smooth and meaningful micro-interactions on every element
  - Fluid animations using Framer Motion or similar libraries
  - Transitions between states (hover, focus, active, disabled)
  - Immediate visual feedback for each user action
  - Depth effects with subtle shadows and gradients
  - Glassmorphism or other modern effects where appropriate
  
  Design inspiration/references: `${design_references_or_urls}`
  
  Reason: Well-executed interactive elements and animations create a memorable experience and demonstrate attention to detail.
  
  4. INTERACTIVE AND REACTIVE ELEMENTS
  Implement features that increase engagement:
  - Real-time validation with elegant messages
  - Visual progress indicators
  - Animated and contextual loading states
  - Success/error messages with smooth animations
  - Informative tooltips where relevant
  - Entry animations when the form appears on screen
  
  Reason: Constant visual feedback keeps the user informed and confident during interaction.
  
  5. LOGO INTEGRATION
  Use the existing logo creatively:
  - Logo location: `${logo_file_path}`
  - Brand colors: `${primary_color}`, `${secondary_color}`
  - Position it strategically in the layout
  - Consider subtle logo animations (pulse, glow, etc.)
  - Maintain brand visual integrity
  
  Reason: The logo is a central element of the visual identity and should be highlighted with elegance.
  
  6. OPTIMIZATION AND PERFORMANCE
  Ensure visual richness does not compromise performance:
  - Optimize animations for 60fps
  - Lazy load resources where appropriate
  - Code splitting for larger components
  - Optimized images in modern formats
  
  Reason: A visually impressive form that loads slowly damages the user experience.
  </instructions>
  
  <thinking>
  Before starting to code, think step by step:
  
  1. Analyze the existing project at `${path_or_description_of_existing_project}` and list specifically:
     - What colors are being used?
     - What is the typography style?
     - What types of animations already exist?
     - What is the general feel/mood of the design?
  
  2. Plan the form structure:
     - Required fields: `${form_fields}` _(e.g. name, email, rating, message)_
     - How to organize them in a visually appealing way?
     - What flow makes the most sense for the user?
  
  3. Choose libraries and tools:
     - Which animation library to use? (Framer Motion, React Spring, etc.)
     - Is a form library needed? (React Hook Form, Formik, etc.)
     - Which styling approach? `${styling_approach}` _(e.g. Tailwind, Styled Components, CSS Modules)_
  
  4. Define states and interactions:
     - What visual states will each element have?
     - What visual feedback will each action generate?
     - How do animations connect with each other?
  
  5. Verify that your solution:
     - Maintains consistency with the established visual identity
     - Is completely functional and responsive
     - Is well-typed in TypeScript
     - Follows React/Next.js best practices
  </thinking>
  
  <task>
  Create a complete and functional feedback form that is a visual masterpiece, using Next.js, React, and TypeScript. The form must:
  
  - Capture user feedback in an elegant and intuitive way
  - Incorporate the project's visual identity (colors, typography, logo)
  - Include animations and micro-interactions on all interactive elements
  - Be fully responsive and accessible
  - Demonstrate technical and artistic excellence in every detail
  - Submit data to: `${api_endpoint_or_action}` _(e.g. /api/feedback or a server action)_
  
  Provide complete, organized code ready to be integrated into the system.
  </task>
  
  <constraints>
  - Maintain absolute fidelity to the established visual identity
  - Ensure accessibility (WCAG 2.1 AA minimum)
  - Code must be production-ready, not a prototype
  - All animations must be smooth (60fps)
  - The form must work perfectly on mobile, tablet, and desktop
  - Package manager: `${package_manager}` _(e.g. npm, pnpm, yarn)_
  - Node version: `${node_version}` _(optional)_
  </constraints>
  
  <output_format>
  Structure your response as follows:
  
  1. VISUAL ANALYSIS
  Briefly describe the visual elements identified in the existing project that you will use as reference.
  
  2. FILE STRUCTURE
  List the folder and file structure you will create.
  </output_format>

• 7.Tistory Blog Skin UI/UX Enhancement Pipeline

  Copy

  ## Role
  You are a senior frontend designer specializing in blog theme customization. You enhance Tistory blog skins to professional-grade UI/UX.
  
  ## Context
  - **Base**: Tistory "Poster" skin with custom Hero, card grid, AOS animations, dark sidebar
  - **Reference**: inpa.tistory.com (professional dev blog with 872 posts, rich UI)
  - **Color System**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe066
  - **Dark theme**: Sidebar gradient #0f0c29 → #1a1a2e → #16213e
  
  ## Constraints
  - Tistory skin system only (HTML template + CSS, inline JS)
  - Template variables: [##_var_##], s_tag blocks, body IDs (tt-body-index, tt-body-page, etc.)
  - No external JS libraries (vanilla JS only)
  - Playwright + Monaco editor for automated deployment
  - Must preserve existing AOS, typing animation, parallax functionality
  
  ## Enhancement Checklist (Priority Order)
  
  ### A-Tier (High Impact, Easy Implementation)
  1. **Scroll Progress Bar**: Fixed top bar showing reading progress on post pages
     - CSS: height 3px, gradient matching accent colors, z-index 9999
     - JS: scroll event → width percentage calculation
     - Only visible on tt-body-page (post detail)
  
  2. **Back-to-Top Floating Button**: Bottom-right, appears after 300px scroll
     - CSS: 48px circle, accent gradient, smooth opacity transition
     - JS: scroll threshold toggle, smooth scrollTo(0,0)
     - Icon: CSS-only chevron arrow
  
  3. **Sidebar Profile Section**: Avatar + blog name + description above categories
     - HTML: Use [##_blogger_##] or manual profile block
     - CSS: Centered layout, avatar with gradient border ring, glassmorphism card
     - Desktop: Inside dark sidebar top area
     - Mobile: Inside slide-in drawer
  
  4. **Category Count Badge Enhancement**: Colored pill badges per category
     - CSS: Small rounded badges with accent gradient background
     - Different opacity levels for parent vs sub-categories
  
  ### B-Tier (Medium Impact)
  5. **Hero Wave Separator**: Curved bottom edge on hero section
     - CSS: clip-path or ::after pseudo-element with SVG wave
     - Smooth transition from dark hero to light content area
  
  6. **Floating TOC**: Right-side sticky table of contents on post pages
     - JS: Parse h2/h3 headings from #article-view, build TOC dynamically
     - CSS: Fixed position, accent left-border on active section
     - Only on tt-body-page, hide on mobile
     - Highlight current section via IntersectionObserver
  
  ## Output Requirements
  - Provide complete CSS additions (append to existing stylesheet)
  - Provide complete HTML modifications (minimal, use existing template structure)
  - Provide inline JS (append to existing script block)
  - All code must be production-ready, not prototype

• 8.Page-by-Page Build

  Copy

  Based on the approved concept, build the [Homepage/About/etc.] page.
  
  Constraints:
  - Single-file React component with Tailwind
  - Mobile-first, responsive
  - Performance budget: no library over 50kb unless justified
  - [Specific interaction from Phase 1] must be the hero moment
  - Use the frontend-design skill for design quality
  
  Show me the component. I'll review before moving to the next page.

• 9.Design System Extraction Prompt Kit

  Copy

  You are a senior design systems engineer conducting a forensic audit of an existing codebase. Your task is to extract every design decision embedded in the code — explicit or implicit.
  
  ## Project Context
  - **Framework:** [Next.js / React / etc.]
  - **Styling approach:** [Tailwind / CSS Modules / Styled Components / etc.]
  - **Component library:** [shadcn/ui / custom / MUI / etc.]
  - **Codebase location:** [path or "uploaded files"]
  
  ## Extraction Scope
  
  Analyze the entire codebase and extract the following into a structured JSON report:
  
  ### 1. Color System
  - Every color value used (hex, rgb, hsl, css variables, Tailwind classes)
  - Group by: primary, secondary, accent, neutral, semantic (success/warning/error/info)
  - Flag inconsistencies (e.g., 3 different grays used for borders)
  - Note opacity variations and dark mode mappings if present
  - Extract the actual CSS variable definitions and their fallback values
  
  ### 2. Typography
  - Font families (loaded fonts, fallback stacks, Google Fonts imports)
  - Font sizes (every unique size used, in px/rem/Tailwind classes)
  - Font weights used per font family
  - Line heights paired with each font size
  - Letter spacing values
  - Text styles as used combinations (e.g., "heading-large" = Inter 32px/700/1.2)
  - Responsive typography rules (mobile vs desktop sizes)
  
  ### 3. Spacing & Layout
  - Spacing scale (every margin/padding/gap value used)
  - Container widths and max-widths
  - Grid system (columns, gutters, breakpoints)
  - Breakpoint definitions
  - Z-index layers and their purpose
  - Border radius values
  
  ### 4. Components Inventory
  For each reusable component found:
  - Component name and file path
  - Props interface (TypeScript types if available)
  - Visual variants (size, color, state)
  - Internal spacing and sizing tokens used
  - Dependencies on other components
  - Usage count across the codebase (approximate)
  
  ### 5. Motion & Animation
  - Transition durations and timing functions
  - Animation keyframes
  - Hover/focus/active state transitions
  - Page transition patterns
  - Scroll-based animations (if any library like Framer Motion, GSAP is used)
  
  ### 6. Iconography & Assets
  - Icon system (Lucide, Heroicons, custom SVGs, etc.)
  - Icon sizes used
  - Favicon and logo variants
  
  ### 7. Inconsistencies Report
  - Duplicate values that should be tokens (e.g., `#1a1a1a` used 47 times but not a variable)
  - Conflicting patterns (e.g., some buttons use padding-based sizing, others use fixed height)
  - Missing states (components without hover/focus/disabled states)
  - Accessibility gaps (missing focus rings, insufficient color contrast)
  
  ## Output Format
  
  Return a single JSON object with this structure:
  {
    "colors": { "primary": [], "secondary": [], ... },
    "typography": { "families": [], "scale": [], "styles": [] },
    "spacing": { "scale": [], "containers": [], "breakpoints": [] },
    "components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],
    "motion": { "durations": [], "easings": [], "animations": [] },
    "icons": { "system": "", "sizes": [], "count": 0 },
    "inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]
  }
  
  Do NOT attempt to organize or improve anything yet.
  Do NOT suggest token names or restructuring.
  Just extract what exists, exactly as it is.

1. Step 1

   Pick a prompt

   Start with “Next.js”, or scan the 9 prompts below for the one that matches your task.

2. Step 2

   Copy it

   Use the Copy button on any prompt — or “Copy all 9 prompts” — to grab the full text.

3. Step 3

   Fill in the blanks

   Swap the [bracketed] placeholders for your own details before you run it.

4. Step 4

   Run and refine

   Paste it into ChatGPT, then ask for adjustments until the result fits programming & dev.

Related packs

• 

  Programming & DevFree

  Frontend Engineering — Vol. 3

  Battle-tested prompts, organized and ready

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 12

  A focused toolkit for faster, better output

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 10

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 5

  Everything you need in one collection

  9 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 14

  Copy, tweak, and ship in minutes

  8 promptsChatGPT · Claude · Gemini
• 

  Programming & DevFree

  Frontend Engineering — Vol. 11

  Hand-picked prompts you can copy and run today

  9 promptsChatGPT · Claude · Gemini