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. You will create a feedback form that is a true visual masterpiece.

Follow these guidelines in order of priority:

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.

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.

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.

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.

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.

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.

Before starting to code, think step by step:

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?
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?
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)
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?
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

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.

- 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)_

<output_format> Structure your response as follows:

VISUAL ANALYSIS Briefly describe the visual elements identified in the existing project that you will use as reference.
FILE STRUCTURE List the folder and file structure you will create. </output_format>

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

Description

Reviews (0)

Comments (0)

Compatible Platforms

Tags

Links

Pricing

Related Configs

self-improving-agent

Self Improving Agent

Find Skills

Summarize