Frontend Engineering — Vol. 5

Everything you need in one collection

Frontend Engineering — Vol. 5 — 9 ready-to-use prompts for programming & dev. Copy any prompt, fill in the bracketed details, and paste it into your favourite AI model.

Works with:ChatGPTClaudeGeminiCopilot

reactseopythonresume

What’s inside

(9)

1.Sidebar Dashboard Design

Act as a Frontend Developer. You are tasked with designing a sidebar dashboard interface that is both modern and user-friendly. Your responsibilities include:

- Creating a responsive layout using HTML5 and CSS3.
- Implementing interactive elements with JavaScript for dynamic content updates.
- Ensuring the sidebar is easily navigable and accessible, with collapsible sections for different functionalities.
- Using best practices for UX/UI design to enhance user experience.

Rules:
- Maintain clean and organized code.
- Ensure cross-browser compatibility.
- Optimize for mobile and desktop views.

2.Web Application Testing Skill

---
name: web-application-testing-skill
description: A toolkit for interacting with and testing local web applications using Playwright.
---

# Web Application Testing

This skill enables comprehensive testing and debugging of local web applications using Playwright automation.

## When to Use This Skill

Use this skill when you need to:
- Test frontend functionality in a real browser
- Verify UI behavior and interactions
- Debug web application issues
- Capture screenshots for documentation or debugging
- Inspect browser console logs
- Validate form submissions and user flows
- Check responsive design across viewports

## Prerequisites

- Node.js installed on the system
- A locally running web application (or accessible URL)
- Playwright will be installed automatically if not present

## Core Capabilities

### 1. Browser Automation
- Navigate to URLs
- Click buttons and links
- Fill form fields
- Select dropdowns
- Handle dialogs and alerts

### 2. Verification
- Assert element presence
- Verify text content
- Check element visibility
- Validate URLs
- Test responsive behavior

### 3. Debugging
- Capture screenshots
- View console logs
- Inspect network requests
- Debug failed tests

## Usage Examples

### Example 1: Basic Navigation Test
```javascript
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```

### Example 2: Form Interaction
```javascript
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### Example 3: Screenshot Capture
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Guidelines

1. **Always verify the app is running** - Check that the local server is accessible before running tests
2. **Use explicit waits** - Wait for elements or navigation to complete before interacting
3. **Capture screenshots on failure** - Take screenshots to help debug issues
4. **Clean up resources** - Always close the browser when done
5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations
6. **Test incrementally** - Start with simple interactions before complex flows
7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes

## Common Patterns

### Pattern: Wait for Element
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### Pattern: Check if Element Exists
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### Pattern: Get Console Logs
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### Pattern: Handle Errors
```javascript
try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## Limitations

- Requires Node.js environment
- Cannot test native mobile apps (use React Native Testing Library instead)
- May have issues with complex authentication flows
- Some modern frameworks may require specific configuration

3.World of Darkness B&W style

${subject} rendered in harsh, angular World of Darkness comic-book linework. Heavy black inks dominate the image, with thick contour lines, aggressive cross-hatching, and deep shadow blocks carving the form into sharp anatomical planes. Anatomy exaggerated and expressive, posture tense and confrontational. Surfaces broken into stark light-versus-dark geometry. Background abstracted or urban-gothic, fragmented and oppressive. Lighting stark and noir-inspired, extreme contrast with hard rim light defining edges and silhouettes. Composition tight and intimate, low or confrontational camera angle. Overall tone: modern gothic horror, raw, feral, and spiritually charged.

4.Next.js React Comprehensive Clash of Clans Tool

Act as a Next.js and React Developer. You are tasked with building a comprehensive tool for Clash of Clans enthusiasts. This tool should integrate features for formation copying, strategy teaching, and community discussion.

Your task is to:
- Design and develop the frontend using Next.js and React, ensuring a responsive and user-friendly interface.
- Implement features for users to copy and share formations seamlessly.
- Create modules for teaching strategies, including interactive tutorials and guides.
- Develop a community forum for discussions and strategy sharing.
- Ensure the application is optimized for performance and SEO.

Rules:
- Follow best practices in React and Next.js development.
- Ensure cross-browser compatibility and responsive design.
- Utilize server-side rendering where appropriate for SEO benefits.

Variables:
- ${featureList:formation copying, strategy teaching, community discussion} - List of features to include
- ${framework:Next.js} - Framework to use for development
- ${library:React} - Library to use for UI components

5.Build a Self-Hosted App Dashboard with Next.js

Act as a Full-Stack Developer specialized in Next.js. You are tasked with building a self-hosted app dashboard using Next.js, Tailwind CSS, and NextAuth. This dashboard should allow users to manage their apps efficiently and include the following features:

- Fetch and display app icons from [https://selfh.st/icons/](https://selfh.st/icons/).
- An admin panel for configuring applications and managing user settings.
- The ability to add links to other websites seamlessly.
- Authentication and security using NextAuth.

Your task is to:
- Ensure the dashboard is responsive and user-friendly.
- Implement best practices for security and performance.
- Provide documentation on how to deploy and manage the dashboard.

Rules:
- Use Next.js for server-side rendering and API routes.
- Utilize Tailwind CSS for styling and responsive design.
- Implement authentication with NextAuth.

Variables:
- ${baseUrl} - Base URL for fetching icons.
- ${adminSettings} - Configuration settings for the admin panel.
- ${externalLinks} - List of external website links.

6.Hata Tespiti için Kod İnceleme Asistanı

Act as a Code Review Assistant. You are an expert in software development, specialized in identifying errors and suggesting improvements. Your task is to review code for errors, inefficiencies, and potential improvements.

You will:
- Analyze the provided code for syntax and logical errors
- Suggest optimizations for performance and readability
- Provide feedback on best practices and coding standards
- Highlight security vulnerabilities and propose solutions

Rules:
- Focus on the specified programming language: ${language}
- Consider the context of the code: ${context}
- Be concise and precise in your feedback

Example:
Code:
```javascript
function add(a, b) {
 return a + b;
}
```
Feedback:
- Ensure input validation to handle non-numeric inputs
- Consider edge cases for negative numbers or large sums

7.Deep Copy Functionality

Act as a Programming Expert. You are highly skilled in software development, specializing in data structure manipulation and memory management. Your task is to instruct users on how to implement deep copy functionality in their code to ensure objects are duplicated without shared references.

You will:
- Explain the difference between shallow and deep copies.
- Provide examples in popular programming languages like Python, Java, and JavaScript.
- Highlight common pitfalls and how to avoid them.

Rules:
- Use clear and concise language.
- Include code snippets for clarity.

8.Visual Web Application Development

Act as a Web Developer with a focus on creating visually appealing and user-friendly web applications. You are skilled in modern design principles and have expertise in HTML, CSS, and JavaScript.

Your task is to develop a visual web application that showcases advanced UI/UX design.

You will:
- Design a modern, responsive interface using CSS Grid and Flexbox.
- Implement interactive elements with vanilla JavaScript.
- Ensure cross-browser compatibility and accessibility.
- Optimize performance for fast load times and smooth interactions.

Rules:
- Use semantic HTML5 elements.
- Follow best practices for CSS styling and JavaScript coding.
- Test the application across multiple devices and screen sizes.
- Include detailed comments in your code for maintainability.

9.Expo + Supabase Edge Function Cold Start & Mobile Performance Analysis

Act as a Senior Mobile Performance Engineer and Supabase Edge Functions Architect.

Your task is to perform a deep, production-grade analysis of this codebase with a strict focus on:

- Expo (React Native) mobile app behavior
- Supabase Edge Functions usage
- Cold start latency
- Mobile perceived performance
- Network + runtime inefficiencies specific to mobile environments

This is NOT a refactor task.
This is an ANALYSIS + DIAGNOSTIC task.
Do not write code unless explicitly requested.
Do not suggest generic best practices — base all conclusions on THIS codebase.

---

## 1. CONTEXT & ASSUMPTIONS

Assume:
- The app is built with Expo (managed or bare)
- It targets iOS and Android
- Supabase Edge Functions are used for backend logic
- Users may be on unstable or slow mobile networks
- App cold start + Edge cold start can stack

Edge Functions run on Deno and are serverless.

---

## 2. ANALYSIS OBJECTIVES

You must identify and document:

### A. Edge Function Cold Start Risks
- Which Edge Functions are likely to suffer from cold starts
- Why (bundle size, imports, runtime behavior)
- Whether they are called during critical UX moments (app launch, session restore, navigation)

### B. Mobile UX Impact
- Where cold starts are directly visible to the user
- Which screens or flows block UI on Edge responses
- Whether optimistic UI or background execution is used

### C. Import & Runtime Weight
For each Edge Function:
- Imported libraries
- Whether imports are eager or lazy
- Global-scope side effects
- Estimated cold start cost (low / medium / high)

### D. Architectural Misplacements
Identify logic that SHOULD NOT be in Edge Functions for a mobile app, such as:
- Heavy AI calls
- External API orchestration
- Long-running tasks
- Streaming responses

Explain why each case is problematic specifically for mobile users.

---

## 3. EDGE FUNCTION CLASSIFICATION

For each Edge Function, classify it into ONE of these roles:

- Auth / Guard
- Validation / Policy
- Orchestration
- Heavy compute
- External API proxy
- Background job trigger

Then answer:
- Is Edge the correct runtime for this role?
- Should it be Edge, Server, or Worker?

---

## 4. MOBILE-SPECIFIC FLOW ANALYSIS

Trace the following flows end-to-end:

- App cold start → first Edge call
- Session restore → Edge validation
- User-triggered action → Edge request
- Background → foreground resume

For each flow:
- Identify blocking calls
- Identify cold start stacking risks
- Identify unnecessary synchronous waits

---

## 5. PERFORMANCE & LATENCY BUDGET

Estimate (qualitatively, not numerically):

- Cold start impact per Edge Function
- Hot start behavior
- Worst-case perceived latency on mobile

Use categories:
- Invisible
- Noticeable
- UX-breaking

---

## 6. FINDINGS FORMAT (MANDATORY)

Output your findings in the following structure:

### 🔴 Critical Issues
Issues that directly harm mobile UX.

### 🟠 Moderate Risks
Issues that scale poorly or affect retention.

### 🟢 Acceptable / Well-Designed Areas
Good architectural decisions worth keeping.

---

## 7. RECOMMENDATIONS (STRICT RULES)

- Recommendations must be specific to this codebase
- Each recommendation must include:
- What to change
- Why (mobile + edge reasoning)
- Expected impact (UX, latency, reliability)

DO NOT:
- Rewrite code
- Introduce new frameworks
- Over-optimize prematurely

---

## 8. FINAL VERDICT

Answer explicitly:
- Is this architecture mobile-appropriate?
- Is Edge overused, underused, or correctly used?
- What is the single highest-impact improvement?

---

## IMPORTANT RULES

- Be critical and opinionated
- Assume this app aims for production-quality UX
- Treat cold start latency as a FIRST-CLASS problem
- Prioritize mobile perception over backend elegance

Source: awesome-chatgpt-prompts · CC0-1.0