It asks an AI to assume the persona of a Senior Frontend
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…
Overview
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.
The prompt
| 1 | Act as a senior frontend engineer and product-focused UI/UX reviewer with experience building scalable web applications. |
| 2 | |
| 3 | Your task is NOT to write code yet. |
| 4 | |
| 5 | First, carefully analyze the project based on: |
| 6 | |
| 7 | 1. Folder structure (Next.js App Router architecture, route groups, component organization) |
| 8 | 2. UI implementation (layout, spacing, typography, hierarchy, consistency) |
| 9 | 3. Component reuse and design system consistency |
| 10 | 4. Separation of concerns (layout vs pages vs components) |
| 11 | 5. Scalability and maintainability of the current structure |
| 12 | |
| 13 | Context: |
| 14 | This is a modern Next.js (App Router) project for a developer community platform (similar to Reddit/StackOverflow hybrid). |
| 15 | |
| 16 | Instructions: |
| 17 | |
| 18 | * Start by analyzing the folder structure and explain what is good and what is problematic |
| 19 | * Identify architectural issues or anti-patterns |
| 20 | * Analyze the UI visually (hierarchy, spacing, consistency, usability) |
| 21 | * Point out inconsistencies in design (cards, buttons, typography, spacing, colors) |
| 22 | * Evaluate whether the layout system (root layout vs app layout) is correctly implemented |
| 23 | * Suggest improvements ONLY at a conceptual level (no code yet) |
| 24 | * Prioritize suggestions (high impact vs low impact) |
| 25 | * Be critical but constructive, like a senior reviewing a real product |
| 26 | |
| 27 | Output format: |
| 28 | |
| 29 | 1. Overall assessment (brief) |
| 30 | 2. Folder structure review |
| 31 | 3. UI/UX review |
| 32 | 4. Design system issues |
| 33 | 5. Top 5 high-impact improvements |
| 34 | |
| 35 | Do NOT generate code yet. |
| 36 | Focus only on analysis and recommendations. |
Connects with Agent Alley MCP · agentalley.io/mcp
Details
- Updated
- Sep 9, 2026
- License
- CC0-1.0
- Source
- prompts.chat ↗
- Creator
- surendhar cherukuri · 1 listing
Similar prompts
See all →
SkillCreate branded architecture, architecture deltaDiagram design
cathrynlavery/diagram-design · by cathrynlaveryCreate branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio, Mermaid, and .excalidraw import, plus lifecycle phase maps, block decomposition trees, and onboarding guidance.★ 43.2k GitHub stars
SkillReview a PR against the Pascal architectural rulesReview architecture
pascalorg/editor · by pascalorgReview a PR against the Pascal architectural rules — package boundaries (core/viewer/editor/nodes), the registry-driven composition model (def.geometry / def.renderer / def.system), legacy-dispatch regressions, the slots + world-scale-UV convention for new nodes/geometry, hook hygiene (useEditor/useScene/useViewer), and selector performance. Use when the user asks to review a PR, audit a branch, or check that changes respect the codebase's architecture.★ 24.6k GitHub stars
SkillCreate and edit draw.io/diagrams.net diagramsDraw.io Architecture Studio
Agents365-ai/drawio-skill · by Agents365-aiCreate and edit draw.io/diagrams.net diagrams as editable `.drawio` files. Covers architecture, UML/ERD/sequence, BPMN, network, and swimlane views authored from a description or converted from code, IaC, SQL, and API schemas, plus sync, query, test, review, export, and publish of existing diagrams. Use when the user asks for draw.io/diagrams.net or an editable diagram; prefer Mermaid/PlantUML when diagrams-as-code is enough.★ 9.8k GitHub stars
SkillCreate polished dark-themed architecture diagramsArchitecture Diagram Skill
Cocoon-AI/architecture-diagram-generator · by Cocoon-AICreate polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.★ 7.4k GitHub stars
SkillThe foundational knowledge distillation pattern for buildingLLM Wiki — Knowledge Distillation Pattern
Ar9av/obsidian-wiki · by Ar9avThe foundational knowledge distillation pattern for building and maintaining an AI-powered Obsidian wiki. Based on Andrej Karpathy's LLM Wiki architecture. Use this skill whenever the user wants to understand the wiki pattern, set up a new knowledge base, or needs guidance on the three-layer architecture (raw sources → wiki → schema). Also use when discussing knowledge management strategy, wiki structure decisions, or how to organize distilled knowledge. This is the "theory" skill — other skills handle specific operations (ingesting, querying, linting).★ 3.5k GitHub stars
SkillManage software complexity through deep modulesA Philosophy of Software Design Framework
wondelai/skills · by wondelaiManage software complexity through deep modules, information hiding, and strategic programming. Use when the user mentions "module design", "API too complex", "shallow class", "complexity budget", "strategic vs tactical", "deep module", "information leakage", "pass-through method", "this code is over-engineered", or "simplify this design". Also trigger when reviewing an interface for simplicity, evaluating whether an abstraction is pulling its weight, deciding whether a comment is worth writing, or choosing between general-purpose and special-purpose approaches. Covers deep vs shallow modules, red flags for complexity, and comments as design documentation. For code quality, see clean-code. For architecture boundaries, see clean-architecture.★ 2.2k GitHub stars