Prompts

📝 12 Prompts

📚 Prompts in this Group

Learn these prompts step by step to master this theme

1

A dashboard with fin-shaped collapsible nav panels for data categories, featuring smooth slide animations and ocean blue colors with silver accents.

Design a data visualisation dashboard with a fin-inspired layout. Use vertical fin-shaped panels as navigation columns, each representing a data category. Fins should collapse and expand on click, with smooth aerodynamic slide animations. Use a deep ocean colour palette with silver accents.
View →
2

A database audit tool that discovers hidden, unused data including isolated tables, inactive columns, and unqueried structured text fields.

A database audit tool that discovers hidden, unused data including isolated tables, inactive columns, and unqueried structured text fields. ~Design a data cranny discovery tool for a database audit platform. The tool searches every nook and cranny of a PostgreSQL database for undocumented, orphaned, or overlooked data. It identifies: tables with no foreign key relationships (isolated data islands), columns with no data in them for more than 6 months (abandoned fields that may contain legacy data), tables not queried by any current application based on pg_stat_user_tables (potentially orphaned tables), and columns whose data type is text but whose values follow a consistent structured pattern (crannies where structured data is being stored in unstructured fields). Each finding is flagged for review with the discovery context.~
View →
3

Arching Navigator

What is the type of animation system would you build for a navigation menu so that the active indicator curves along a parabolic arc above the bar when switching items, with the arc height scaling proportionally to the distance jumped, a 320-millisecond ease-in-out duration, and a faint preview arc visible on hover? ~Build a CSS and JavaScript animation system for a React navigation menu. When a menu item is selected, the active indicator travels from the previous item to the new one along an arcing curved path rather than a straight line, following a parabolic trajectory above the menu bar. The arc height is proportional to the distance between the two items — short hops use a shallow arc, long jumps use a taller arc. The animation duration is 320 milliseconds with an ease-in-out cubic curve. Hovering over an item shows a preview arc in a lighter opacity.~
View →
4

clip

How would you describe a browser clip component that lets users save web content by clicking a clip button — capturing the page title, URL, and any selected text — and then stores those saved items in a sidebar panel that displays previews and provides tools for organising the clips? ~Design a clip component for saving web content. When users click the clip button, capture the page title, URL, and selected text. Store clipped items in a clip panel sidebar with clip previews and clip organisation tools.~
View →
5

Conductor

How would you describe a tool that inputs circuit data and recommends conductor size per IET rules, showing voltage drop and warning of fault current issues? ~Design a conductor sizing calculator for an electrical engineering platform. User inputs: circuit length in metres, load current in amps, supply voltage, conductor material from copper or aluminium, and maximum acceptable voltage drop percentage. The calculator outputs: recommended conductor cross-sectional area in mm squared using IET Wiring Regulations tables, actual voltage drop for the selected conductor, and a warning if the conductor is undersized for the fault current.~
View →
6

cooperation

How to design a dashboard where sidebar, header, and content panel manage state independently, sharing only user, view, and alerts via Context — and what's their cooperation contract? ~Design a React dashboard layout where the left sidebar, the top header, and the main content panel achieve their behaviour through cooperation rather than direct coupling. Each section should manage its own internal state, but share a lightweight global cooperation layer — a React Context — that carries only the minimum shared data: the active user, the selected view, and any global alerts. Describe the cooperation contract between the three sections and show the context structure.~
View →
7

describe a three-panel HR dashboard built with vanilla HTML and CSS

How would you describe a three-panel HR dashboard built with vanilla HTML and CSS, where a fixed left navigation panel holds employee categories, a scrollable center area fills the remaining space, and a collapsible right panel slides in to show employee details — all laid out using CSS Grid with smooth open/close transitions and a mobile-friendly bottom navigation and slide-up drawer? ~Build a three-panel HR dashboard layout in vanilla HTML and CSS. Carve the screen into a fixed left navigation panel at 240 pixels wide containing employee categories and quick links, a scrollable main content area that fills the remaining width, and a collapsible right detail panel at 320 pixels wide that slides in when an employee record is selected. The left panel and right panel remain fixed while the main area scrolls. Use CSS Grid for the outer layout. Smooth transition when the right panel opens and closes. Mobile: collapse both side panels into a bottom navigation bar and a slide-up drawer.~
View →
8

Drum

Design a dark-themed drum machine UI for a music production web app. Include an 8 by 4 pad grid where each pad triggers a different drum sound, a BPM slider ranging from 60 to 200, a 16-step pattern sequencer showing active steps highlighted in amber, and a sidebar listing drum kit presets. Use dark charcoal and amber accents with glowing active pads and smooth hover transitions.
View →
9

Eid

Write a Python Islamic calendar Eid date predictor that calculates the expected dates of Eid al-Fitr and Eid al-Adha for any year. Using the astronomical calculation method: calculate the new moon conjunction date for Shawwal and Dhul Hijjah for any Gregorian year, determine the expected Eid date based on the conjunction plus moon visibility calculation — the Yallop criterion for new crescent visibility at a defined geographic location, generate the predicted Eid date range — accounting for the one-day variation from moon sighting versus calculation differences, and produce a 10-year Eid date calendar showing how the dates shift through the Gregorian calendar and the implications for fasting day length at a defined latitude. --- Note: This prompt is for example purposes only. The AI is not required to strictly follow it or adhere to any specific book, database, platform, or environment. The AI should prioritise helping students understand the concept, referencing relevant sources while presenting information as clearly and simply as possible.
View →
10

How would you describe an animated CSS hero section for a craft beer website where bubbles rise from the bottom, vary in size and opacity to mimic real foam, slow down and pop near the top, and include interactive controls for foam density and colour tint

Create a CSS foam effect for the hero section of a craft beer website. Generate animated foam bubbles that rise from the bottom of the header area, vary in size and opacity like real beer foam, and gradually slow and pop as they reach the top. Include a foam density control and a foam colour tint selector matching different beer styles from pale ale to stout.
View →
11

How would you design a web app that guides product managers through creating software requirements documents step-by-step, with validation and export features?

Build a multi-step wizard that helps product managers formulate a complete software requirements document. Each step guides the user to formulate one section: problem statement, target users, functional requirements, non-functional requirements, and acceptance criteria. Validate that each section is substantive before allowing progression to the next step. At the end, combine all sections into a downloadable Markdown file.
View →
12

What PHP/JS admin interface would you build to manage roles, assign permissions, link users to roles, and verify actions against a permission table?

Build a "Role-Access-Control (RAC) Permission Manager" — a PHP + JavaScript admin interface for managing fine-grained Role-Access-Control. The RAC system defines roles, assigns permissions to roles, and assigns roles to users. Every protected action in the app is checked against the RAC table before execution. The admin UI makes it easy to review and modify the permission matrix.
View →

🎯 Learning Progress

0 / 12 completed
🧠 Practice with Quiz