Using AI to code a Minimum Viable Product Line (MVPL) simple browser app

 Using AI to code a Minimum Viable Product Line (MVPL) simple browser app

First here is how a prompt could be written to an AI tool to prompt it to generate code for a simple browser-based calculator app, according to Minimum Viable Product Line guidelines.

+++++++++++++++++++++++++++++++++++++++++++++++++++++

🚀 Master Prompt — MVPL Two-File Calculator Build

Build a browser-based calculator that demonstrates MVPL (Minimum Viable Product Line) architecture.

IMPORTANT OUTPUT REQUIREMENT:

Return EXACTLY two files:

1. index.html

2. percentage.js

Return them in two clearly labeled code blocks.

Do NOT include explanations or commentary outside the code blocks.

====================================================

ARCHITECTURE GOAL

====================================================

The calculator must be fully functional and usable daily on an iPad.

The system must demonstrate MVPL principles:

- A small, stable core

- Optional removable extensions

- Safe experimentation

- Long-term scalability

====================================================

FILE STRUCTURE REQUIREMENT

====================================================

index.html

→ Contains ALL core calculator logic inline

→ Contains NO extension logic

→ Must load extensions via script tag

percentage.js

→ Contains the ONLY extension

→ Must self-register using the extension registry

No other files are allowed.

====================================================

CORE CALCULATOR FUNCTIONAL REQUIREMENTS

====================================================

Must support:

- Addition

- Subtraction

- Multiplication

- Division

- Decimal numbers

- Clear / reset

- Equals

Must prevent:

- Multiple decimals in same number

- Divide by zero

- Invalid operator sequences

Must support:

- Touch-friendly large buttons

- Keyboard input

- Clean readable display

- Works well on Safari and Chrome on iPad

====================================================

MVPL CORE ARCHITECTURE REQUIREMENTS

====================================================

index.html must include these core modules (inline JavaScript):

1. Core State Management

2. Display Renderer

3. Expression Evaluation Engine

4. Input Controller

5. UI Layout / Button System

6. Extension Registry

The Extension Registry must allow extensions to:

- Register new buttons

- Access state safely

- Trigger display updates

- Access input helpers

The core must expose a structured API object to extensions.

====================================================

CORE PROTECTION REQUIREMENTS

====================================================

The core must be clearly labeled with comments explaining:

- Core must remain stable

- Extensions must not modify core code

- Extensions must use registry API only

- This demonstrates MVPL safety and sustainability

====================================================

EXTENSION REQUIREMENTS

====================================================

Create one extension file named percentage.js.

This extension must:

- Add a % button

- Convert current display value into percentage

- Be implemented ONLY using extension API

- Self-register via ExtensionRegistry.register()

- Include comments explaining it is a removable MVPL extension

====================================================

DESIGN REQUIREMENTS

====================================================

- Clean minimal calculator UI

- Large touch-friendly buttons

- Responsive layout for portrait and landscape

- Dark modern styling

====================================================

CODE QUALITY REQUIREMENTS

====================================================

- Clear readable structure

- Educational MVPL comments explaining boundaries

- Explicitly label:

  - Core code

  - Extension infrastructure

  - Extension implementation

====================================================

OUTPUT FORMAT REQUIREMENT

====================================================

Return output exactly like this:

--- index.html ---

[full code]

--- percentage.js ---

[full code]

No additional text.

+++++++++++++++++++++++++++++++++++++++++++++++++++++

Secondly, after the index.html core has been coded, here is a prompt to accompany this core code, to prompt for a further extension to be added, without changing the core, to add new functionality.

+++++++++++++++++++++++++++++++++++++++++++++++++++++

Now we are in the “repeatable extension generation” MVPL workflow. The goal is to write a prompt that assumes you already have index.html (the core) and only wants to create a new extension (inverse.js) without touching the core, just like the percentage extension.

Here’s a high-quality prompt for this exact purpose:

📝 AI Prompt — Generate inverse.js

You are generating a new MVPL calculator extension.

Assume the core calculator is fully implemented in index.html, including:

- Core state (CoreState)

- Display renderer (DisplayRenderer)

- Input controller (InputController)

- UI layout (UILayout)

- Extension registry (ExtensionRegistry)

RULES:

1. Do NOT modify any core code in index.html.

2. Implement the extension entirely in a separate file named inverse.js.

3. Use only the public extension API provided by ExtensionRegistry.

4. The extension must self-register via ExtensionRegistry.register().

5. Include clear comments explaining that this is a removable MVPL extension.

6. Add a single button labeled "1/x" that replaces the current display value with its numeric inverse (1 / current value).

7. Handle edge cases safely (e.g., if the current value is 0, display "Error").

8. Update both CoreState.displayValue and CoreState.expression as needed.

9. Keep code clean, readable, and consistent with the existing percentage.js extension style.

10. Output exactly one code block containing the full inverse.js content. Do NOT include index.html or any explanations outside the code block.

✅ How to Use It

1. Paste your existing index.html into the prompt as reference or instruction.
2. Append the above prompt.
3. Ask the AI to output the new extension.
4. Save it as inverse.js and load via <script src="inverse.js"></script> in your index.html.

This prompt works well because it:

• Preserves core isolation (MVPL principle)
• Explicitly defines extension API usage
• Handles edge cases
• Is AI-friendly: one extension file output, no extra text