Home / AI Rules Builder

Studio tool

Compose AI coding rules
for your stack

Original REACTAPP.TOP guidance for assistants working in React, TypeScript, Express and operator-domain systems, plus a library of UI layout prompts. Select, preview markdown, export to your editor.

Rule builder

Quick starts
Heuristic auto-select from dependencies

Selected rules (0)

Select rules on the left to build a markdown pack.

Preview & export

Path: .cursor/rules/
# AI rules for project

Generated by REACTAPP.TOP AI Rules Builder. Original studio guidance for assistants working in this repository.

_No rules selected yet._
UI prompt library

Layout prompts for vibe coding

Pick a structure, copy the prompt and paste it into Cursor, v0, Lovable or Bolt together with a screenshot of the look you want. Add prompts to the pack to export them next to your coding rules.

92 layout prompts in 15 categories

Auth forms6

Split-screen with visual

Form on one side, product visual or brand panel on the other

Build a sign-in screen as a split layout: a form column with logo, heading, email, password with show/hide toggle, remember-me checkbox, forgot-password link, primary CTA and a sign-up link; and a visual column with a product screenshot or brand graphic plus a one-line customer quote. Collapse the visual column below 768 px and keep inline validation messages under each field. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Centered card on background

Floating card with heading, fields, CTA and sign-up link

Build a sign-in form as a floating card centred on a full-page background with a soft gradient or subtle pattern. Inside the card: heading, email, password, primary CTA and a link to switch to sign-up. Show field-level validation inline and a disabled pending state on the button while submitting. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Minimal single-column

No card — logo, heading, fields and CTA stacked cleanly

Build a sign-in page as a single narrow column (max 360 px) without a card container: logo, heading, email, password, primary CTA and a secondary link, stacked with generous vertical rhythm. Put legal links in a quiet footer and keep the whole form visible without scrolling on a phone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Social-first stack

Social login buttons first, email and password under a divider

Build a sign-in form where social providers (Google, GitHub, Apple) are the primary group of full-width buttons at the top, followed by an "or continue with email" divider and a secondary email/password form below. Each social button has the provider icon, consistent height and a visible focus ring. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Magic link only

One email input and one CTA — passwordless flow

Build a passwordless sign-in: a heading, a single email input and one CTA that sends a magic link. After submit, replace the form with a "check your inbox" state showing the masked email, a resend button with a 30-second countdown and a link to use a different address. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Multi-step wizard

Progress indicator on top, sign-up split into 2–3 steps

Build a sign-up wizard with a step indicator at the top and three steps: account (email, password), profile (name, role) and workspace (name, team size). Provide back and next buttons, keep entered values when navigating between steps, and show a summary before the final submit. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Pricing8

Classic 3-tier cards

Three cards side by side with the middle one recommended

Build a pricing section with three tier cards side by side; the middle card is elevated, uses the accent border and carries a "Recommended" badge. Each card shows the plan name, price with billing period, a short positioning line, a feature list with check icons and a CTA. Stack the cards on mobile with the recommended one first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Monthly / annual toggle

Billing switch with a “save X%” badge and live prices

Build a pricing section with a monthly/annual switch above the plan cards and a "save 20%" badge next to the annual option. Prices update instantly when the switch changes, with a short crossfade; expose the switch with role="switch" and keyboard support. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Comparison table

Plans as columns, features as rows with checks and dashes

Build a feature comparison table: plans as columns with a sticky header row containing name, price and CTA; features grouped into sections as rows with check icons, dashes or short values. On screens under 768 px collapse it into one accordion per plan instead of horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Single-tier hero

One large centred card with price, full feature list and CTA

Build a single-plan pricing hero: one large centred card with the price and period, a two-column list of everything included, a prominent CTA and a money-back or cancel-anytime note underneath. Keep it readable at a glance; no toggles or comparisons. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Usage slider

Interactive slider that updates the displayed price live

Build a usage-based pricing block: a range slider for seats or monthly requests that updates the displayed price live, shows the unit price and highlights tier breakpoints along the track. The slider is keyboard operable with visible value labels; show a "contact sales" state past the last tier. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Credit pack grid

Tiles with credit amount, price, per-unit cost and badges

Build a credit pack picker as a grid of selectable tiles; each tile shows the credit amount, price, cost per credit and an optional "Best value" or "Popular" badge. Selecting a tile updates a summary and CTA below; support keyboard selection with radio semantics. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Free vs Pro split

Two columns with strong visual contrast between the plans

Build a two-plan pricing layout: Free on the left with a muted surface and Pro on the right on an accent or dark surface, features aligned row by row so the difference is obvious. Each column has its own CTA; on mobile stack Pro first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Stacked mobile-first cards

Full-width cards, one per tier, each with its full feature list

Build a mobile-first pricing list: full-width stacked cards, one per tier, each with name, price, complete feature list and a CTA at the bottom. Add a sticky "compare plans" button that scrolls to a compact comparison table; on desktop limit the cards to a 640 px column. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Features & bento8

3-column icon grid

Icon, feature title and short description in three columns

Build a features section as a three-column grid of six items; each has an icon in a soft tinted square, a title and one or two sentences. Equalise card heights, collapse to two columns at 768 px and one at 480 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Bento grid

Asymmetric tiles of different sizes, key features larger

Build a bento-style features grid: two large tiles for the headline capabilities and four small tiles for supporting ones, all with the same corner radius and gap. Each tile has a visual (screenshot crop, chart or icon) and a short caption; reflow to a single column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Alternating rows

Text on one side, visual on the other, alternating per row

Build a features section as alternating rows: text block (eyebrow, heading, paragraph, link) on one side and a visual on the other, switching sides each row. Stack text above visual on mobile and keep the visuals the same aspect ratio. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Tabbed features

Tabs where each one reveals a feature with its visual

Build a tabbed features block: a horizontal tab list on top (vertical on the left at desktop widths if there are more than four), and a panel showing the visual and description of the active feature. Tabs follow the WAI-ARIA tabs pattern with arrow-key navigation; no auto-rotation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Accordion list

Collapsible rows that expand to a full description

Build a features accordion: vertical list of collapsible rows with the feature name, an expanded description and an optional visual on the side that changes with the open row. Only one row is open at a time; keep collapsed content in the DOM and hide it with CSS. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Scroll-triggered reveal

Sticky visual on one side, descriptions scroll on the other

Build a scroll-driven features section: a sticky visual on one side and a column of feature descriptions on the other; as each description reaches the middle of the viewport the visual updates to match. Use IntersectionObserver, and fall back to a plain stacked list when prefers-reduced-motion is set or on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Icon wall

Dense grid of small icon tiles with short labels

Build an icon wall: a dense grid of 16 to 24 small tiles, each with an icon and a two-word label (integrations, formats or capabilities). Tiles lift slightly on hover, wrap from six columns down to three, and keep labels visible without truncation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Before / after comparison

Two columns showing life without and with the product

Build a before/after comparison: two side-by-side columns, "Without" with muted styling and cross icons and "With" with the accent surface and check icons, item by item. Communicate the contrast with icons and labels, not colour alone; stack the columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero sections8

Centred text + screenshot

Heading, subheading and CTAs on top, large product screenshot below

Build a hero with centred eyebrow, heading, subheading and two CTAs, followed by a large product screenshot in a browser frame with a soft shadow that slightly overlaps the next section. Preload the screenshot, set explicit dimensions and use fluid type for the heading. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Split hero

Heading and CTAs on one side, product mockup on the other

Build a split hero: heading, subheading and two CTAs on the left, a product mockup (device frame or floating cards) on the right. Below 768 px stack the text above the visual and reduce the visual height. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Video background

Looping muted video behind heading and CTAs

Build a hero with a looping, muted, autoplaying background video under a dark overlay, with heading and CTAs on top. Provide a poster image, load the video lazily and show the static poster when prefers-reduced-motion is set or on slow connections. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Animated gradient mesh

Slowly moving gradient mesh background under the text

Build a hero with a slowly animating gradient mesh background (three or four blurred colour blobs) and heading, subheading and CTAs on top. Animate only transform and opacity, pause the animation when prefers-reduced-motion is set, and keep text contrast at WCAG AA over every frame. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Terminal / code hero

Terminal window with animated typing as the central visual

Build a developer-focused hero: heading and one-line pitch above a terminal window that types an install command and prints its output, with a copy button for the command. Use a monospace font, realistic prompt and colours, and render the final text immediately when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Floating UI elements

Product cards floating around the central heading

Build a hero where four to six small product UI cards (notifications, charts, list items) float around a centred heading and CTA with slight parallax on pointer movement. Hide all but two cards under 768 px, and disable the parallax when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Big bold typography

Oversized heading as the focal point with minimal support

Build a typography-led hero: an oversized, tightly set heading occupying most of the viewport, a single short sentence and one CTA. Use clamp() for fluid type between 40 and 120 px, balanced line wrapping and no imagery. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero with inline form

Email capture directly under the heading

Build a hero with heading, subheading and an inline email capture form directly beneath: input and button on one row, a privacy note under it. Validate the email inline, show a success state replacing the form and stack input and button on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

CTA banners7

Full-bleed gradient banner

Full-width gradient section with centred heading and CTA

Build a full-bleed call-to-action section with a gradient background, centred heading, one supporting sentence and a single high-contrast CTA. Keep vertical padding generous and the text readable at AA contrast over the gradient. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Split CTA card

Contained card with heading on the left and button on the right

Build a contained call-to-action card: heading and one sentence on the left, primary button on the right, aligned on one row with a border and subtle surface. Stack the content and make the button full width under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Sticky bottom bar

Bar fixed to the viewport bottom with message, CTA and dismiss

Build a sticky bottom bar fixed to the viewport: short message, one CTA and a dismiss button; remember the dismissal in localStorage. Respect the safe-area inset on mobile, do not cover page content by adding bottom padding to the body while visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Patterned background

Subtle dot or grid pattern behind a centred message and button

Build a call-to-action section with a subtle dot or grid pattern background, a centred heading, one sentence and a button. Fade the pattern towards the edges with a radial mask and keep it purely decorative for assistive technology. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Dual CTA

Primary and secondary actions side by side

Build a call-to-action block with a heading, one sentence and two buttons side by side: a filled primary action and an outlined secondary one, each with a short helper text underneath. Stack the buttons full width on narrow screens with the primary first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Inline email capture

Email input and submit button inline under the heading

Build an email capture call to action: heading, subheading and an inline form with email input and submit button on one row, plus a note about frequency and unsubscribe. Show inline validation and a success message in place of the form. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Testimonial + CTA combo

Customer quote above the heading and button for social proof

Build a call-to-action block that opens with a short customer quote, avatar, name and company, followed by the heading and a single CTA. Keep the quote to two lines and align everything centrally. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Stats bars7

Horizontal 4-column numbers

Four large numbers in a row with labels underneath

Build a stats bar with four large numbers in a row and a short label under each, separated by thin vertical dividers. Use tabular figures, wrap to two columns on tablets and one on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Animated count-up

Numbers count up when scrolled into view

Build a stats row whose numbers animate from zero to their final value when scrolled into view, once, over about a second with easing. Render the final values in the server HTML and skip the animation when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Icon + stat pairs

An icon paired with each number and label

Build a stats block where each metric is a pair of a rounded icon tile on the left and the number with its label on the right, three or four pairs in a row. Icons are decorative; the label carries the meaning. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Logo bar + stats combo

Customer logos next to key figures like “10k+ users”

Build a social-proof strip combining a row of monochrome customer logos with two or three key figures such as users, uptime and countries. Give logos equal optical size, and place the figures above the logos on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Vertical stacked stats

Stack of metrics for a narrow column or sidebar

Build a vertical stats stack for a narrow column or sidebar: each metric shows a number, a label and an optional delta, separated by hairlines. Keep numbers right-aligned with tabular figures. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Stats over full-bleed image

Numbers overlaid on a full-width image or gradient

Build a full-bleed section with a background image or gradient and a dark overlay, with three or four stats laid over it in white. Ensure AA contrast for numbers and labels and load the image with explicit dimensions. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Card-based stats

A row of bordered cards, one stat per card

Build a stats row as individual bordered cards, each with a label, a large number and a small trend indicator (arrow and percentage) with an accessible text equivalent. Cards wrap to a 2×2 grid on tablets. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Navigation8

Minimal logo + links + CTA

Logo left, links in the middle or right, CTA on the far right

Build a top navigation bar: logo on the left, four or five text links in the centre or right, and a primary CTA button on the far right. Under 768 px collapse the links into a menu button that opens an accessible drawer with focus trapping and Escape to close. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Centred logo split nav

Logo in the centre with links split evenly on both sides

Build a navigation bar with the logo centred and links split evenly on both sides, all vertically aligned on one row. On mobile show the logo on the left and a menu button on the right. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Mega menu

Full-width dropdown with categorised sub-links

Build a navigation bar with a full-width mega menu: hovering or clicking a top-level item opens a panel with three or four columns of categorised links, each with an icon and a one-line description, plus a featured card on the right. Open on click and Enter, close on Escape and outside click, and render the panel as an accordion inside the mobile drawer. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Sidebar nav

Vertical sidebar with logo, stacked links and a user block

Build a vertical sidebar navigation: logo at the top, grouped links with icons and an active state in the middle, and a user block with avatar, name and menu at the bottom. Collapse to an icon-only rail on tablets and to a slide-in drawer on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Floating pill nav

Rounded pill detached from the top edge with a shadow

Build a floating pill navigation: a rounded bar detached from the top edge, centred, with logo, links and a small CTA, a soft shadow and a translucent blurred background. Shrink it slightly on scroll and fall back to a full-width bar under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Transparent over hero

Transparent on top of the hero, solid after scrolling

Build a navigation bar that is transparent with light text while over the hero and becomes a solid surface with a bottom border and dark text after scrolling 40 px. Animate only background and colour, and keep a visible focus style in both states. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Command-palette nav

A prominent ⌘K search input as the central element

Build a navigation bar centred on a command palette trigger: a wide search-like button showing "Search or jump to…" and the ⌘K shortcut; it opens a modal with fuzzy results grouped by pages, actions and recent items. Support arrow keys, Enter and Escape, and trap focus inside the modal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Bottom mobile nav

App-style bottom tab bar with icons and labels

Build a mobile bottom tab bar with four or five items, each an icon with a label, a clear active state and an optional badge. Respect the safe-area inset, keep touch targets at least 44 px and hide it at desktop widths in favour of the top navigation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Testimonials8

3-column quote cards

Three cards with photo, name, role and quote

Build a testimonials section with three quote cards side by side; each has the quote, a photo, name, role and company, with the quote first for scannability. Collapse to one column on mobile and keep card heights aligned. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Marquee scroll

Infinitely scrolling row of testimonial tiles

Build a testimonials marquee: a row of compact quote tiles scrolling horizontally and looping seamlessly, pausing on hover and focus. Duplicate the list for the loop, animate with transform only, and show a static two-row grid when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Masonry grid

Pinterest-style grid of testimonials with varied heights

Build a masonry grid of testimonial cards with varying quote lengths, three columns on desktop, two on tablet and one on phones. Use CSS columns or grid with dense packing so cards keep their natural height; include a "show more" button after the first twelve. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Single featured testimonial

One large quote with photo, name, role and company logo

Build a single featured testimonial: a large quote in display type, a portrait photo, the name, role and company logo, arranged as a two-column layout with the photo on one side. Stack on mobile and keep the quote under 40 words. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Video testimonial grid

Clickable video thumbnails with play icon, name and company

Build a grid of video testimonials: thumbnails with a centred play button, duration badge, and the customer name and company underneath; clicking opens an accessible modal player. Use poster images with explicit dimensions and load the player only on click. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Tweet wall

Cards styled like social posts with avatar, handle and timestamp

Build a wall of social-post style testimonial cards: avatar, display name, handle, timestamp and post text, in a three-column grid. Link each card to the original post, keep the platform logo small and stack to one column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Logo cloud

Grid or row of customer and partner logos with a heading

Build a logo cloud: a short heading such as "Trusted by teams at" and a grid of eight to twelve monochrome customer logos with equal optical weight. Give each logo an accessible name, and wrap to three columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Carousel with dots

One testimonial at a time with dots or arrows

Build a single-testimonial carousel showing one quote with photo, name and role at a time, with previous/next arrows and dot indicators. Support keyboard arrows and touch swipe, announce slide changes politely, and do not autoplay. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Footers5

Multi-column sitemap

Grouped links, logo, tagline, social icons and copyright

Build a site footer with the logo and a one-line tagline on the left, three or four columns of grouped links (Product, Company, Resources, Legal) and a bottom row with copyright, language selector and social icons. Collapse the columns into accordions on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Minimal single row

Logo, a few links and copyright in one line

Build a minimal footer: logo on the left, three or four key links in the centre and the copyright on the right, all in a single row with a top border. Wrap to two rows on mobile and keep the tap targets at least 44 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Giant logo footer

Huge wordmark as the centrepiece with links around it

Build a footer with the brand wordmark set in huge type across the full width as the centrepiece, with link groups above it and a thin row of legal links and copyright below. Clip the wordmark so it never causes horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Newsletter-first footer

Newsletter signup as the main element, links secondary

Build a footer where the newsletter signup is the dominant element: heading, one sentence, an inline email form and a consent note, with the navigation links in smaller type below. Show inline validation and a success state, and put the copyright on the last row. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Status indicator footer

Live system status dot alongside the usual links and logo

Build a footer with the usual logo and link columns plus a live system status pill ("All systems operational") with a coloured dot that links to the status page. Fetch the status client-side after hydration and fall back to a neutral state on error. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

FAQ5

Accordion single column

One column; each question expands its answer

Build an FAQ as a single-column accordion: each question is a button with a chevron, and the answer expands beneath it. Use aria-expanded and aria-controls, keep the answers in the DOM and hide them with CSS so search engines can read them, and allow several items to be open at once. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Two-column accordion

Questions split across two accordion columns

Build an FAQ with questions split evenly across two accordion columns to save vertical space, collapsing to one column under 768 px. Order the questions by importance top to bottom, left to right, and keep answers in the DOM. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Chat-bubble Q&A

Questions and answers as alternating chat bubbles

Build an FAQ styled as a conversation: questions as right-aligned bubbles from a user avatar and answers as left-aligned bubbles from the brand avatar, alternating down the page. Keep it a plain list semantically (a definition list or headings and paragraphs), not a live chat widget. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Searchable FAQ

Search bar that filters the question list as you type

Build an FAQ with a search input at the top that filters the list of questions as the user types, highlighting matched words and showing an empty state with a contact link when nothing matches. Filter client-side, keep the full list in the server HTML and announce the result count to screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Categorised tabs

Category tabs that switch between filtered sets of questions

Build an FAQ with category tabs at the top (Billing, Security, Getting started, Integrations) that switch between filtered sets of questions, each set an accordion. Follow the tabs ARIA pattern, sync the active tab with a URL hash and render all sets in the HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Dashboards6

Sidebar + main content

Vertical sidebar with navigation and a main content area

Build an application shell with a collapsible left sidebar (logo, grouped navigation, user block) and a main area with a top bar containing breadcrumbs, search and account menu, then the page content. Persist the collapsed state and turn the sidebar into a drawer under 1024 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Top nav + content

Horizontal top navigation with full-width content below

Build an application shell with a horizontal top navigation (logo, primary sections, search, notifications, avatar) and full-width content beneath with no sidebar. Show the active section with an underline and collapse the sections into a menu on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Three-pane layout

Sidebar, a list or feed pane and a detail panel

Build a three-pane layout: a narrow navigation sidebar, a middle pane with a scrollable list or feed and a right detail panel that shows the selected item. Make the middle/detail split resizable, and on tablets and phones show one pane at a time with a back button. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kanban board

Stage columns with draggable cards

Build a kanban board with columns for each stage, a WIP count in every column header and cards that can be dragged between columns with a drop indicator. Provide a keyboard alternative for moving cards (menu or shortcuts), announce moves to screen readers and scroll columns horizontally on small screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Metric cards + chart

KPI cards on top with a larger chart below

Build a dashboard overview: a row of four KPI cards (label, value, delta versus the previous period, sparkline) above a large time-series chart with a date-range picker and series toggles. Design loading, empty and error states for every card and chart, and show units and time zone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Empty state

Centred illustration, heading and a call to action

Build an empty state for a dashboard page: a centred illustration or icon, a short heading, one sentence explaining what will appear here and a primary CTA to create the first item, plus a secondary link to documentation. Keep the layout inside the normal content area so navigation stays visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Onboarding4

Checklist onboarding

Setup tasks with progress and expandable steps

Build an onboarding checklist card: a progress bar with "2 of 5 completed", a list of setup tasks each with a checkbox state, a short description and an expandable panel with the action button. Persist completion, let users dismiss the card when done and keep it keyboard accessible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Tour tooltips

Guided tour with callouts pointing at UI elements

Build a guided product tour: a sequence of tooltip callouts anchored to real UI elements, each with a title, one sentence, step counter, next/back buttons and a skip link, with a dimmed backdrop around the highlighted element. Manage focus inside the tooltip, close on Escape and remember completion. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Video walkthrough modal

Modal with an embedded walkthrough video and a get-started CTA

Build a welcome modal that appears on first login with a short heading, an embedded walkthrough video with a poster, and a "Get started" CTA plus a "Skip for now" link. Load the video only when the modal opens, trap focus, close on Escape and never show it again after dismissal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Illustrated empty state

Custom illustration, heading, one sentence and a CTA

Build an illustrated empty state for a first-run screen: a custom illustration, a short heading, one supporting sentence and a primary CTA, optionally with a secondary "import" action. Size the illustration with explicit dimensions and hide it from screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Blog & content4

Magazine grid

Large featured post on top, smaller cards in a grid below

Build a blog index in magazine style: one large featured post with cover image, category, title, excerpt and author on top, then a three-column grid of smaller post cards. Use consistent image aspect ratios, and collapse the grid to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Single-column reading view

Clean single column with a comfortable measure and line height

Build an article page as a single reading column of 65 to 75 characters with generous line height, a title block (category, title, author, date, reading time), a lead image and styled typography for headings, lists, quotes, code and figures. Add share links and a "next article" card at the end. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Sidebar table of contents

Sticky table of contents highlighting the current section

Build a long-form documentation or article layout with the content in the centre and a sticky table of contents in the right sidebar that highlights the current section while scrolling. Generate the TOC from h2/h3 headings, use IntersectionObserver and collapse the TOC into a details element above the content on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Card grid with filters

Post cards with category filter tags above

Build a blog index with a row of category filter chips (All plus categories) above a three-column grid of post cards with image, category, title, excerpt and date. Sync the active filter with the URL query, show a result count and an empty state, and render the full list in the server HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Contact3

Split form + details

Contact form on one side, company details on the other

Build a contact page as two columns: a form with name, email, company, message and consent checkbox on one side, and contact details (email, phone, address, office hours) with a small map or office photo on the other. Validate inline, show a success state and stack the columns on mobile with the form first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Support channel cards

Cards for chat, email, documentation and community

Build a support page as a grid of channel cards: live chat, email, documentation and community, each with an icon, title, one sentence, expected response time and a CTA. Show availability (online, business hours) where relevant and stack to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Full-page minimal form

Centred form with a heading, few fields and one button

Build a minimal full-page contact form: a centred column with a heading, one sentence, name, email and message fields and one submit button, with a note on response time. Keep the fields large, validate inline and show a clear success state. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Utility screens5

Comparison table (us vs competitors)

Your product against competitors with checks and dashes

Build a competitor comparison table: your product as the highlighted first column, two or three competitors as further columns, and feature rows with checks, dashes or short notes. Add a sticky header, footnotes for claims and switch to per-product cards under 768 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Feature announcement banner

Slim top bar with a “New” tag, message, link and dismiss

Build a slim announcement bar above the navigation: a "New" tag, a one-line message, a "Learn more" link and a dismiss button, with the dismissal persisted per announcement id. Do not shift layout on load — reserve its height server-side — and keep AA contrast on the accent background. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Cookie banner

Bottom-corner card with accept, reject and settings

Build a cookie consent card anchored to the bottom corner: a short message with a privacy link and three actions — accept all, reject non-essential and settings, where settings opens a modal with per-category toggles. Do not block the page, keep equal visual weight for accept and reject, and store the choice with a version. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

404 page

“Page not found” with an explanation and helpful links

Build a 404 page: a large "404", a friendly heading, one sentence, a search box or list of popular links, and CTAs back to home and support. Keep the site header and footer, return a real 404 status and emit noindex. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Loading state

Skeleton layout mirroring the final content with shimmer

Build a loading state as a skeleton that mirrors the final layout (header, cards, table rows) with a subtle shimmer animation and no layout shift when the real content arrives. Use aria-busy on the region, disable the shimmer when prefers-reduced-motion is set and show an error state after a timeout. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

How to use

  1. Choose the structure you need and copy the prompt.
  2. Paste it into your AI tool with a screenshot or your design tokens so the result matches your aesthetic.
  3. Add prompts to the pack to ship them as .mdc files next to your coding rules.
FAQ

About the AI Rules Builder

A free browser tool that composes original coding rules for Cursor, GitHub Copilot, Claude Code and Windsurf, plus a library of UI layout prompts. You preview markdown, copy it or download files — nothing is uploaded to our servers.
Cursor (.mdc / rules), GitHub Copilot instructions, Claude Code and Windsurf. Pick an export environment and the builder formats the selected rules for that tool.
Yes, it is free. Rule selection and markdown preview run in your browser. We do not store your pack on a server; use copy or download to keep the files locally.
UI prompts are ready-made vibe-coding briefs for common layouts. You can add them to the same pack as engineering rules, then export everything together as markdown or Cursor files.
Yes. Copy the preview, download a markdown file, or export Cursor-ready rule files from the builder. For production AI features in your product, see our AI and LLM expertise page.

Request a 24h estimate

Original REACTAPP.TOP guidance for assistants working in React, TypeScript, Express and operator-domain systems, plus a library of UI layout prompts. Select, preview markdown, export to your editor.

Send the briefAI & LLM Integration