prompts.chatprompts.chatprompts.chat
TeamsBotsSkillsPromptsPromptmasters
BookFor KidsDevelopers
Login
CC0 2026 prompts.chat
DeepWikiHow to...DocsAPIPrivacyTermsSupportAboutGitHub

Architecture & UI/UX Audit

It asks an AI to assume the persona of a Senior Frontend Engineer & Product Reviewer to perform a high-level critique of a Next.js (App Router) project. Instead of writing code, the prompt focuses on evaluating the architecture (folder structure, scalability), UI/UX (hierarchy, consistency), and design system (component reuse) of a developer community platform to identify anti-patterns and suggest high-impact improvements.

ss
@surendharnadh280709 +1
2 contributors
8 months agoMarch 28, 2026 at 01:52 PM
Web Development

Content

Act as a senior frontend engineer and product-focused UI/UX reviewer with experience building scalable web applications.

Your task is NOT to write code yet.

First, carefully analyze the project based on:

1. Folder structure (Next.js App Router architecture, route groups, component organization)
2. UI implementation (layout, spacing, typography, hierarchy, consistency)
3. Component reuse and design system consistency
4. Separation of concerns (layout vs pages vs components)
5. Scalability and maintainability of the current structure

Context:
This is a modern Next.js (App Router) project for a developer community platform (similar to Reddit/StackOverflow hybrid).

Instructions:

* Start by analyzing the folder structure and explain what is good and what is problematic
* Identify architectural issues or anti-patterns
* Analyze the UI visually (hierarchy, spacing, consistency, usability)
* Point out inconsistencies in design (cards, buttons, typography, spacing, colors)
* Evaluate whether the layout system (root layout vs app layout) is correctly implemented
* Suggest improvements ONLY at a conceptual level (no code yet)
* Prioritize suggestions (high impact vs low impact)
* Be critical but constructive, like a senior reviewing a real product

Output format:

1. Overall assessment (brief)
2. Folder structure review
3. UI/UX review
4. Design system issues
5. Top 5 high-impact improvements

Do NOT generate code yet.
Focus only on analysis and recommendations.
Works best with:
Gemini 3 ProClaude 4.5 SonnetClaude 4.5 Opus

Comments (0)

Related Prompts

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

Text

Transform your forms into visual masterpieces. This prompt turns AI into a senior developer to create forms in Next.js, React, and TypeScript. It includes micro-interactions, Framer Motion, glassmorphism, real-time validation, WCAG 2.1 accessibility, and mobile-first design. Fully customizable with 11 variables. Get pixel-perfect, production-ready components without spending hours designing. Ideal for developers seeking high visual standards and performance.

E@easycoregamesnoctis
0

Make UI/UX better of an already Created Application

Text

Generate a comprehensive, actionable development plan to enhance the existing web application.

W@ayoubelouardi3710
2

Generate a Plan for Building the Best UI/UX

Text

Generate a comprehensive, actionable development plan for building a responsive web application.

W@ayoubelouardi3710
0

Production-Grade PostHog Integration for Next.js 15 (App Router)

Text

—

T@ted2xmen
0

Related Skills

Codebase Ecosystem Atlas

Skill

Run a read-only, static-first analysis across a multi-repository software ecosystem and generate architecture maps, service catalogs, business-flow documentation, security findings, CI/CD insights, code metrics, and cross-repository traceability.

O@omid
0

Unity Architecture Specialist

Skill

A Claude Code agent skill for Unity game developers. Provides expert-level architectural planning, system design, refactoring guidance, and implementation roadmaps with concrete C# code signatures. Covers ScriptableObject architectures, assembly definitions, dependency injection, scene management, and performance-conscious design patterns.

M@metehanyengil
1

AST Code Analysis Superpower

Skill

AST-based code pattern analysis using ast-grep for security, performance, and structural issues. Use when (1) reviewing code for security vulnerabilities, (2) analyzing React hook dependencies or performance patterns, (3) detecting structural anti-patterns across large codebases, (4) needing systematic pattern matching beyond manual inspection.

İ@izzetemre
1

Codebase WIKI Documentation Skill

Skill

This skill generates comprehensive WIKI.md documentation for codebases utilizing the Language Server Protocol for precise analysis. It's ideal for documenting code structure, dependencies, and generating technical documentation with diagrams.

S@s-celles
0

Related Bots

Frontend Engineer

Bot

Ships UI issues as small PRs with screenshots. Made for the Lean Software Factory team.

E@enesalatas1

Component Modernizer

Bot

Rewrites UI/components on a feature branch while preserving design and behavior from the plan.

F@f0