Prompt Examples

Create a page at /about with a heading, a short paragraph about the company, and a link back to the home page.

A static page spec with route, meta, and a view returning the HTML.

Create a blog post page at /posts/:slug. It should fetch the post from the database by slug and display the title, published date, and body content. If no post is found, return a 404.

A spec with a parameterised route, a server.data fetcher using ctx.params.slug, and a 404 raw response if the post is missing.

Create a paginated list of articles at /articles. Read the ?page query parameter to fetch the right slice. Show 10 articles per page with previous and next links.

A spec with server.data reading ctx.query.page, pagination state, and prev/next links rendered in the view.

Add a search input to the /products page that filters the visible product list as the user types. Keep the full product list in server data and filter it in the view.

A mutation bound to data-event="input:setQuery" that updates a query state field, with the view filtering server.data.products against it.

Add a show/hide toggle to the FAQ page. Each question should expand its answer when clicked and collapse when clicked again.

An openId state field and a toggle mutation. The view renders answers conditionally based on whether their id matches openId.

The /dashboard page has three tabs: Overview, Activity, and Settings. Clicking a tab should show its panel and hide the others without a page reload.

An activeTab state field, a setTab mutation, and tab panels rendered conditionally in the view.

Add a contact form at /contact with name, email, and message fields. All three are required. Email must be a valid format. Show inline errors on failure. Show a success message on submission.

A spec with validation rules, an actions.submit with validate: true, and onSuccess/onError state transitions.

Create a multi-step signup form at /signup with three steps: account details, personal info, and confirmation. Show a step indicator at the top. Only advance when the current step is valid.

A step state field, step-specific validation, a next action that validates before advancing, and a view that renders the active step panel.

The quantity input on the /cart page should never go below 1 or above 99. Enforce this on the server — not just in the UI.

A constraints block with quantity: { min: 1, max: 99 } that the framework enforces after every mutation, regardless of what the client sends.

The /dashboard page should show the logged-in user's name and their last 5 orders. Fetch both in parallel.

A server.data fetcher that runs two queries concurrently with Promise.all and passes the results to the view as server.data.user and server.data.orders.

Add a Delete button to each row in the /users table. It should send a DELETE request to the API, remove the row on success, and show an error message on failure.

An action with onStart setting a loading flag, run making the API call, onSuccess removing the item from state, and onError setting an error message.

Add an avatar upload form to /settings. The user picks a file, it uploads to storage, and the page shows the new avatar on success.

An action whose run reads the file from FormData, converts it to an ArrayBuffer, and uploads it to storage. onSuccess updates the avatar URL in state.

Create a login page at /login with email and password fields. On success, set an httpOnly session cookie and redirect to /dashboard. Show an error message if credentials are wrong.

A raw response action that verifies credentials, sets Set-Cookie headers with httpOnly; SameSite=Strict, and redirects. Failed logins return the form with an error state.

Protect the /dashboard page so only logged-in users can access it. Redirect anyone without a valid session to /login.

A guard function that reads the session cookie, verifies it, and returns a redirect response if invalid.

Add a logout button to the nav. It should clear the session and redirect to /login.

A page spec at /logout using the raw response spec (contentType + render) that sets the session cookie to maxAge: 0 and issues a 302 redirect.

The /feed page is slow because it waits for the activity feed before painting anything. Make it stream — show the page chrome instantly and load the feed in the background.

A stream block with shell: ['header'] and deferred: ['feed']. The view becomes a keyed object of named segment functions.

The /home page has a hero, a trending section, and a recommendations section. The hero should appear instantly. The other two can load as data resolves.

Three view segments — hero in the shell, trending and recommendations deferred. Each fetches its own data independently.

Run a Lighthouse audit across all pages and show me the results.

The agent runs /pulse-report, which audits every registered route and opens the results dashboard.

Make the audit fail if any page scores below 90 for performance or below 95 for accessibility.

A lighthouse block in pulse.config.js with performance: 90 and accessibility: 95.

Load test the /api/data endpoint with 50 concurrent connections for 30 seconds and tell me the p99 latency.

The agent runs /pulse-load against that route with the specified parameters and reports the results.

Set up a staging environment so I can run audits against https://staging.myapp.com instead of localhost.

An environments.staging block in pulse.config.js with the remote URL. The agent uses it when running /pulse-report or /pulse-load.

The /profile page should load the current user's row from the Supabase users table. It should only return data the logged-in user owns.

A server.data fetcher using the Supabase public client initialised with the user's access token, so Row Level Security applies automatically.

Use Supabase for authentication. The login form should call Supabase's signInWithPassword and store the tokens in httpOnly cookies.

A login action that calls supabase.auth.signInWithPassword, reads the session tokens from the response, and sets them as httpOnly; SameSite=Strict cookies.

Add a checkout button to the /pricing page for the Pro plan. Clicking it should create a Stripe Checkout Session and redirect the user to the Stripe-hosted page.

An action whose run calls the Stripe API to create a session and returns the checkout URL. onSuccess triggers a redirect via state.