Overview
This prompt aims to guide developers in adapting a widget from NextJS to AngularJS/Bootstrap while maintaining design integrity. Developers familiar with both frameworks will benefit by enhancing their skills in code adaptation and UI consistency.
Prompt Overview
Purpose: The purpose of this task is to adapt a widget from NextJS to AngularJS while maintaining its functionality and design.
Audience: This adaptation is intended for developers familiar with AngularJS, Bootstrap, and ServiceNow environments.
Distinctive Feature: The widget must replicate the updated UI and UX features of the NextJS version while preserving AngularJS structural idioms.
Outcome: The final output will be fully functional AngularJS/Bootstrap code files ready for integration into the existing ServiceNow environment.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Content & Media Creation, Development Tools & DevOps, General Business Operations
- Techniques: Decomposition, Plan-Then-Solve, Self-Critique / Reflection
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are given a new visual design and NextJS implementation code for the “Field Usage Finder” widget, which includes the following files:
– page.tsx
– tailwind.config.ts
– loading.tsx
– layout.tsx
Your task is to adapt and rewrite this widget’s functionality and appearance to align closely with the new NextJS version, while utilizing the technologies and structure of the existing widget, which is based on AngularJS, Bootstrap, and the ServiceNow environment.
**Specifically:**
– Carefully review the new NextJS code and the related screenshot of the updated widget UI to fully understand its design, layout, behavior, and features.
– Analyze the existing widget implementation provided via:
– template.html
– script.js
– client_script.js
– css.scss
– Rewrite and adapt the AngularJS/Bootstrap code (template, scripts, styles) of the current widget to replicate the look and functionality of the NextJS version as seen in the screenshot, ensuring that all UI elements, flows, and style details are respected.
– Ensure the adapted widget is fully functional according to the NextJS design, and that all UI interactions are consistent.
– Preserve the structural idioms and best practices of AngularJS and Bootstrap as used in ServiceNow, without introducing NextJS or unrelated frameworks.
**Step-by-step:**
1. Examine the provided NextJS files and screenshot to understand the updated widget.
2. Review the current AngularJS Bootstrap widget files.
3. Identify all UI/UX differences and new features in the NextJS version.
4. Reimplement these differences in your AngularJS/Bootstrap widget code.
5. Test for consistent appearance and functionality.
**Output Format:**
Provide the complete AngularJS/Bootstrap code files updated after adaptation:
– template.html
– script.js
– client_script.js
– css.scss
Each file should be self-contained and ready to replace the existing widget files. Include any comments needed to clarify major adaptations or design decisions.
**Note:**
– Do not translate NextJS React code literally; instead, reinterpret and rewrite it in AngularJS style.
– Maintain Bootstrap classes and styles, adjusting them to match the new design.
– Preserve existing ServiceNow widget compatibility.
This prompt assumes you will receive the NextJS code and screenshots separately and will deliver the adapted AngularJS/Bootstrap files accordingly.
Screenshot Examples
How to Use This Prompt
- Copy the prompt for your reference.
- Gather the NextJS files and widget screenshots.
- Review the existing AngularJS/Bootstrap widget files.
- Identify differences and new features in the NextJS design.
- Adapt the AngularJS/Bootstrap code to match the new design.
- Test the updated widget for functionality and appearance.
Tips for Best Results
- Understand the Design: Thoroughly analyze the new NextJS widget design and layout to ensure accurate replication in AngularJS.
- Identify Key Features: List all UI/UX differences and new features in the NextJS version that need to be integrated into the AngularJS implementation.
- Maintain Best Practices: Ensure that the adapted code adheres to AngularJS and Bootstrap best practices while aligning with the new design.
- Test Thoroughly: After implementation, rigorously test the widget for consistent appearance and functionality across different scenarios.
FAQ
- What is the purpose of the Field Usage Finder widget?
The widget helps users identify and analyze field usage within a specific application. - Which technologies are used in the existing widget?
The existing widget is built using AngularJS, Bootstrap, and is integrated with the ServiceNow environment. - What should be preserved during the adaptation process?
Maintain structural idioms and best practices of AngularJS and Bootstrap, ensuring ServiceNow compatibility. - What is the first step in the adaptation process?
Examine the provided NextJS files and screenshot to understand the updated widget design and functionality.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
