AI Engineer NYC 2026 Online Talks

Please… Enough with the Sloppy, One-Shot SaaS Replacements — Mahmoud Abdelwahab, Railway

Slide chapters

20 slide and demo groups · Timestamps are approximate.

Website and blog editor

Railway’s internal marketing tool brings a launch post’s content and publication fields into one editor. The example post describes coordinating tasks, assets and dates on a single board.

Text in image
Website, changelog & blog

Category *
None
No options are available.

Description *
The checklist we use for every launch, from the first task to the last social post.

Featured
Featured image
spring-launch-hero.png
Social image
Search media
Published at *
Oct 8, 2026, 7:29 AM
SEO title
SEO description

52 words · 1 min read

How we plan a launch

Every launch starts with a single board: the tasks, the assets and the dates live in one place. Every task links back to its launch.

We write the post, the email and the social copy side by side, so the story stays consistent.

On launch day, everything goes out together.

Interface text:
CMS
Content > Blog > Posts > How we plan a launch
MA
Draft
Not requested
Request review
Publish
Share access
Preview
Growth estimate

Planning
Problems
Launches
Tasks
Task templates

Content
Blog
Posts
Authors
Categories
Videos
Social posts
Emails
Changelog
Media
Scheduled

Ecosystem
Profiles
Engagements
Activities
Tools
Website

MA
[redacted]
Admin

0:33Demo milestone

Mini CRM

Railway uses the mini CRM to track work with external creators. The engagement board groups records by status, with two spring launch videos shown as Active.

Text in image
Mini CRM

Prospecting 0
No engagements in this stage.

Contacted 0
No engagements in this stage.

Negotiating 0
No engagements in this stage.

Active 2
Alex Rivera · spring launch video
Alex Rivera
Active
Send the launch [illegible]

Jordan Lee · spring launch video
Jordan Lee
Active
Send the launch brief

On hold 0
No engagements in this stage.

Interface text:
CMS
Ecosystem > Engagements
Group by: Status

Planning
Problems
Launches
Tasks
Task templates

Content
Blog
Posts
Authors
Categories
Videos
Social posts
Emails
Changelog
Media
Scheduled

Ecosystem
Profiles
Engagements
Activities
Tools
Website
[redacted]
Admin

Stage updated to Active.

0:45Demo milestone

Tasks and launch planning

The task board groups launch work by status, from backlog to done, with dates on each card. The speaker describes using it to coordinate launch tasks and when they go out.

Text in image
Tasks & launch planning

Backlog 1
Record product demo
Launch · Oct 16
Created 34 minutes ago

Todo 2
Draft launch announcement
Launch · Oct 12
Created 34 minutes ago

Schedule social posts
Launch · Oct 13
Created 34 minutes ago

In progress 1
Design launch artwork
Launch · Oct 11
Created 34 minutes ago

Done 2
Book creator walkthroughs
Launch · Oct 7
Created 34 minutes ago

Write changelog entry
Launch · Oct 10
Created 34 minutes ago

Canceled 0
Add a task or move one here.

Interface text:
CMS
Planning > Tasks
Planning
Problems
Launches
Tasks
Task templates
Content
Blog
Posts
Authors
Categories
Videos
Social posts
Emails
Changelog
Media
Scheduled
Ecosystem
Profiles
Engagements
Activities
Tools
Website
[redacted]
Admin

0:50Demo milestone

Comments and real-time editing

A blog post shows Priya Nair editing while a comment asks to link the calendar, illustrating comments and real-time collaboration in the CMS.

Text in image
Comments & real-time editing

Featured image: spring-launch-hero.png
Social image: Search media
Published at *: Oct 8, 2026, 7:29 AM
SEO title
SEO description

Priya Nair editing
55 words · 1 min read

How we plan a launch

Every launch starts with a single board: the tasks, the assets and the dates live in one place.

We write the post, the email and the social copy side by side, so the story stays consistent.

On launch day, everything goes out together. We review everything together the day before.

Comment
Love this. Can we link the calendar here too?

Interface text:
CMS
Content > Blog > Posts > How we plan a launch
PN MA
Draft
Not requested
Request review
Publish
Share access
Preview
Growth estimate

Planning
Problems
Launches
Tasks
Task templates

Content
Blog
Posts
Authors
Categories
Videos
Social posts
Emails
Changelog
Media
Scheduled

Ecosystem
Profiles
Engagements
Activities
Tools
Website

MA
[redacted]
Admin

0:58Demo milestone

CMS deployment on Railway

The CMS runs on Railway and auto-deploys. Its deployment diagram connects the app and worker to storage, an image proxy, and Postgres.

Text in image
CMS

cms-realtime
Online

cms-files
128.0 MB

cms-media
5.9 GB

cms
Online

cms-imgproxy
Online

cms-worker
Online

cms-postgres
Online
postgres-volume

cms-postgres-PITR
765.7 MB

Interface text:
Marketing
production
Agent
+ Add

1:08Demo milestone

Payload CMS

Mahmoud recommends Payload for content-related projects after comparing CMSs; he prefers using an existing CMS to building one from scratch.

Text in image
The backend to build the modern web.

$ npx create-payload-app
Get a Demo

Payload · payloadcms.com
Open-source TypeScript CMS and app framework.

Interface text:
Payload
Product  Why Payload  Developers  Enterprise  Docs
45.2k  Login  Get Started

Posts / Payload: The best way to build something you truly own
Payload: The best way to build something you truly own
Status: Published — Unpublish
Modified: July 13th 2024, 9:55 AM
Created: October 17th 2023, 2:47 PM
Content  Appearance  SEO
Post Title
Payload: The best way to build something you truly own
Banner Image
banner-image.webp
31KB - 1600x800 - image/webp
Content
Flexibility and Advanced Features
[illegible]
Open Source and Community-Driven
[illegible]

my-payload-app
node_modules
src
app
(frontend)
(payload)
admin
api
custom.scss
layout.tsx
collections
components
globals
payload.config.ts
.env
.env.example
.eslintrc.cjs
.gitignore
.prettierrc.json
.yarnrc
docker-compose.yml
Dockerfile
next.config.mjs
package.json
pnpm-lock.yaml
README.md
tsconfig.json

3:37Demo milestone

Autosave

Autosave lets the editor save in the background while the user keeps typing, instead of locking the editor during a manual save.

Text in image
Autosave

Left editor:
Launch notes
Editing locked
Saving...
TITLE
Summer launch
DESCRIPTION
We're launching

Without it, you click Save and wait while the editor locks.

Right editor:
Launch notes
Saved
TITLE
Summer launch
DESCRIPTION
Launch is ready for review.

Keep typing. Saving happens in the background.

Optimistic updates

A task moves to Ready immediately while the server syncs. If the operation fails, the change is rolled back and the user is told.

Text in image
Optimistic updates

Without it, the card waits on the server before it moves.

Move immediately, then reconcile with the server.

Interface text:
Tasks
Saving...
DRAFT 1
READY 0
Prepare launch email
Waiting for the server...

Tasks
Saved
DRAFT 0
READY 1
Prepare launch email

Undo delete

Remove the record from the UI immediately and offer a short undo window. If the user does nothing, delete it; if they undo, bring it back.

Text in image
Undo delete

Without it, a confirmation dialog interrupts and the delete is final.

Remove immediately. Offer a short window to undo.

Interface text:
Launches
Launches
3 records
01 Summer [illegible]
02 API upda[illegible]
03 Product t[illegible]
Delete “API update”?
Are you sure? This can't be undone.
Cancel
Delete

Launches
Launches
3 records
01 Summer launch
02 API update
03 Product tour

7:46Completed build

Show 2 builds
  1. 7:36

    The initial undo-delete slide shows a confirmation dialog and explains that the deletion is final.

    Text in image
    Undo delete
    
    Without it, a confirmation dialog interrupts and the delete is final.
    
    Interface text:
    Launches
    Launches
    3 records
    01 Summer [illegible]
    02 API upda[illegible]
    03 Product t[illegible]
    Delete “API update”?
    Are you sure? This can't be undone.
    Cancel
    Delete
  2. 7:46

    A confirmation dialog is compared with immediate removal and a short undo window; the selected record is highlighted.

    Text in image
    Undo delete
    
    Without it, a confirmation dialog interrupts and the delete is final.
    
    Remove immediately. Offer a short window to undo.
    
    Interface text:
    Launches
    Launches
    3 records
    01 Summer [illegible]
    02 API upda[illegible]
    03 Product t[illegible]
    Delete “API update”?
    Are you sure? This can't be undone.
    Cancel
    Delete
    
    Launches
    Launches
    3 records
    01 Summer launch
    02 API update
    03 Product tour

Archiving

Archiving lets users hide records from the UI or search and bring them back later, instead of deleting them permanently.

Text in image
Archiving

Without it, finished work is deleted and can't come back.

Archive, find it later, and bring it back.

Interface text:
Posts
Posts
2 posts
01 Summer launch
03 Product tour
API update
No posts found. Deleted posts can't be restored.

Posts
Posts
Active
Archived 1
02 API update
Unarchive ↗
Archived records stay recoverable.

Persist state in the URL

Putting the board view and its owner, status, and sort settings in the URL lets a shared link reopen the same filtered view for a teammate.

Text in image
Persist state in the URL

Without it, the link opens the default view and the filters are lost.

The view lives in the URL, so the link opens the exact same view.

Interface text:
Left view:
cms/launches
cms/launches
All owners
All statuses
Oldest first
Board
List
01 Summer launch
02 Product tour
03 API update

Right view:
cms/launches?view=board&owner=me&status=draft&sort=-updated
Copied
cms/launches?view=board&owner=me&status=draft&sort=-updated
Owner: Me
Status: Draft
Newest first
Board
List
This week
API update
Next week
Docs refresh
Launch email
Later
Partner briefing

Infinite scroll

Instead of clicking Load more for each batch, scrolling near the bottom loads more rows while keeping existing rows in place. An end-of-list indicator shows when all 12 items are loaded.

Text in image
Infinite scroll

Without it, you click to load every next batch.
Load near the bottom. Keep existing rows in place.

Interface text:
Launches
9 of 12 loaded
07 Video assets
08 Website copy
09 Launch checklist
Load more ↓

Launches
12 of 12 loaded
09 Launch checklist
10 Team review
11 Final preview
12 Publish
End of list

Tasks and launches boards

The tasks and launches boards share a layout for managing records. Abdelwahab recommends using an existing page as a reference to make related parts of an app more consistent.

Text in image
Tasks board:
Backlog 1
Record product demo
Launch · Oct 16
Created 34 minutes ago

Todo 2
Draft launch announcement
Launch · Oct 12
Created 34 minutes ago
Schedule social posts
Launch · Oct 13
Created 34 minutes ago

In progress 2
Write changelog entry
Launch · Oct 10
Created 34 minutes ago
Design launch artwork
Launch · Oct 11
Created 34 minutes ago

Launches board:
Not started 1
Docs refresh
Tier 2 · Oct 24

In progress 1
Spring launch
Tier 1 · Oct 14

Review 0
Add a launch [illegible]

3 of 3 loaded
End of list

Interface text:
CMS
Planning
Problems
Launches
Tasks
Task templates
Content
Blog
Posts
Authors
Categories
Videos
Social posts
Emails
Changelog

Planning > Tasks
Planning > Launches

Interface skills repository

Abdelwahab recommends packaging opinions as agent skills so agents follow them. This repository collects skills for accessibility, layout, typography, color, writing, and interface review.

Text in image
jakubkrehel/skills
Interface skills: accessibility, layout, type, color, writing, and a full review.

About
A collection of agent skills that help you build great interfaces.
jakub.kr/skills

Interface text:
jakubkrehel / skills
Code · Issues 2 · Pull requests 3 · Actions · Projects · Security and quality · Insights
skills · Public
Notifications · Fork 284 · Star 7.6k
main · 1 Branch · 0 Tags · Go to file · Code
jakubkrehel: Merge pull request #41 from jakubkrehel/fix/issue-40-correctness
113 Commits
.claude-plugin — Merge remote-tracking branch 'origin/main' into fix/issue-... — 3 days ago
skills — refactor: update accessibility documentation for motion an... — 3 days ago
.gitattributes — feat: gitattributes — 2 months ago
AGENTS.md — chore: refine documentation for state-machine and variant... — 3 days ago
CLAUDE.md — refactor: clean up /explain-interface — 2 months ago
LICENSE — Initial commit — 3 months ago
README.md — chore: update state-machine skill description and docume... — 3 days ago
opencode.json — feat: add opencode — 2 months ago
Readme · MIT license · Activity
7.6k stars · 31 watching · 284 forks
Report repository
Releases
No releases published
Contributors 2
jakubkrehel Jakub Krehel
claude Claude
Languages

11:00Demo milestone

Interface skills directory

Jakub Krehel’s skills directory packages interface guidance by topic, including accessibility, layout, typography, color, writing, and review. Abdelwahab uses it to guide agents building internal tools.

Text in image
jakubkrehel/skills
Interface skills: accessibility, layout, type, color, writing, and a full review.

Interface text:
jakubkrehel / skills
Code
Issues 2
Pull requests 3
Actions
Projects
Security and quality
Insights
Files
main
Go to file
.claude-plugin
skills
better-accessibility
better-colors
better-interface
better-layout
better-typography
better-ui
better-writing
break
build-design
explain-interface
interface-review
.gitattributes
AGENTS.md

skills / skills /
jakubkrehel  refactor: update accessibility documentation for motion and zoom, rem...  4650b9c · 3 days ago  History
Name  Last commit message  Last commit date
..
better-accessibility  refactor: update accessibility documentation for motion and zoom, rem...  3 days ago
better-colors  Merge remote-tracking branch 'origin/main' into fix/issue-40-correctness  3 days ago
better-interface  chore: update accessibility skills and documentation  4 days ago
better-layout  chore: update accessibility skills and documentation  4 days ago
better-typography  refactor: update accessibility documentation for motion and zoom, rem...  3 days ago
better-ui  chore: update accessibility skills and documentation  4 days ago
better-writing  chore: update accessibility skills and documentation  4 days ago
break  chore: refine documentation for state-machine and variant skills, rem...  3 days ago
build-design  chore: update accessibility skills and documentation  4 days ago
[illegible]  chore: update accessibility skills and documentation  4 days ago
[illegible]  chore: update accessibility skills and documentation  4 days ago
state-machine  chore: refine documentation for state-machine and variant skills, rem...  3 days ago

11:04Demo milestone

Design engineering skills repository

Emil Kowalski’s skills repository packages design engineering and animation guidance. The speaker used it while building internal tools to improve animations.

Text in image
emilkowalski/skills
Design engineering and animation: when to animate, easing, and motion review.

skills  Public

About
Skills for Designers and Engineers.
emilkowal.ski/skill
Readme
MIT license
Activity
44.5k stars
170 watching
2.5k forks
Report repository

Releases
No releases published

Contributors 4
emilkowalski Emil Kowalski
claude Claude
cr2007 CSK
CommanderClaude

Repository files:
skills — Add break ui skill — last week
.gitattributes — chore: add .gitattributes for linguist detection (#10) — 2 months ago
.gitignore — init — 7 months ago
.pl — Add /mobile-native skill — 3 weeks ago
LICENSE — Fix nits — 3 months ago
README.md — Add break ui skill — last week
performance-cheatsheet.md — Add /mobile-native skill — 3 weeks ago

Interface text:
emilkowalski / skills
Code
Issues 3
Pull requests
Actions
Projects
Security and quality
Insights
Notifications
Fork 2.5k
Star 44.5k
main
5 Branches
0 Tags
Go to file
Code
emilkowalski — Add break ui skill
e8a175d · last week
55 Commits
README
MIT license

11:10Demo milestone

Design engineering skills directory

The directory collects skills for animation, design, and prototyping. Abdelwahab used this set to improve animations in his internal tools.

Text in image
emilkowalski/skills
Design engineering and animation: when to animate, easing, and motion review.

skills / skills /
Name | Last commit message | Last commit date
..
animate-expo | Remove course mention | 3 weeks ago
animate | Remove course mention | 3 weeks ago
animation-vocabulary | Remove course mention | 3 weeks ago
apple-design | Remove course mention | 3 weeks ago
ask-sonner | Remove course mention | 3 weeks ago
break-ui | Add break ui skill | last week
emil-design-eng | Remove course mention | 3 weeks ago
find-animation-opportunities | Remove course mention | 3 weeks ago
improve-animations | Remove course mention | 3 weeks ago
[illegible] | Remove course mention | 3 weeks ago
[illegible] | Remove course mention | 3 weeks ago
prototype | Remove course mention | 3 weeks ago

Interface text:
emilkowalski / skills
Code
Issues 3
Pull requests
Actions
Projects
Security and quality
Insights
Files
main
Go to file
skills
animate-expo
animate
animation-vocabulary
apple-design
ask-sonner
break-ui
emil-design-eng
find-animation-opportunities
improve-animations
mobile-native
pick-ui-library
prototype
.gitattributes
.gitignore
emilkowalski  Add break ui skill
e8a175d · last week
History

11:14Demo milestone

Railway agent skills

Abdelwahab gives the agent Railway skills to deploy his internal apps and infrastructure. The repository organizes references for databases, configuration, deployment, and operations.

Text in image
railwayapp/railway-skills
Lets the agent deploy, add databases, check metrics, and debug on its own.

railway-skills / plugins / railway / skills / use-railway / references /

Name | Last commit message | Last commit date
analyze-db-mongo.md | feat: collect SLOWLOG GET and --bigkeys in Redis analysis | 7 months ago
analyze-db-mysql.md | feat: collect SLOWLOG GET and --bigkeys in Redis analysis | 7 months ago
analyze-db-postgres.md | fix: correct connection age bucket description to match script output | 7 months ago
analyze-db-redis.md | fix: never suggest running redis-cli locally when introspection fails | 7 months ago
analyze-db.md | docs(railway): update skills for CLI v5.49.1 | last month
cloud-agents.md | use-railway: the railway CLI is unauthenticated in cloud agent chat s... | 2 weeks ago
configure.md | use-railway: document project webhooks and their custom headers (#95) | last week
databases.md | docs(railway): address review on CLI v5.49.1 skill update | last month
deploy.md | docs(railway): update skills for CLI v5.49.1 | last month
[filename obscured] | docs(railway): address review on CLI v5.49.1 skill update | last month
[filename obscured] | use-railway: set tracing in IaC config (#97) | 2 days ago
operate.md | use-railway: add a tracing reference (#82) | 3 weeks ago

Interface text:
railwayapp / railway-skills
Code  Issues 24  Pull requests 9  Actions  Projects  Security and quality  Insights
Files  main  Go to file
.claude-plugin
.cursor-plugin
.github
plugins/railway
.claude-plugin
.codex-plugin
.cursor-plugin
.grok-plugin
hooks
skills/use-railway
references
analyze-db-mongo.md
analyze-db-mysql.md
cloud-agents.md
configure.md
lucacasonato  use-railway: set tracing in IaC config (#97)  dab1c2a · 2 days ago  History

11:21Demo milestone · Completed build

Show 2 builds
  1. 11:18

    GitHub overview of the Railway skills repository with a caption describing deployment, databases, metrics, and debugging.

    Text in image
    railwayapp/railway-skills
    Lets the agent deploy, add databases, check metrics, and debug on its own.
    
    railway-skills — Public
    
    .agents/plugins — Update marketplace.json — 4 months ago
    .claude-plugin — Use hosted MCP for all Railway plugins — 3 months ago
    .cursor-plugin — Use hosted MCP for all Railway plugins — 3 months ago
    .github/workflows — chore(railway): release 1.3.7 — 2 months ago
    plugins/railway — use-railway: set tracing in IaC config (#97) — 2 days ago
    .gitignore — refactor: remove redundant database skill, keep analysis in... — 7 months ago
    AGENTS.md — use-railway: document project webhooks and their custom... — last week
    CLAUDE.md — restructure repo to follow agent-skills marketplace format — 9 months ago
    LICENSE — add MIT license — 9 months ago
    
    About
    Agent skills for interacting with Railway
    railway.com/skills.sh
    agents  infrastructure  railway
    Readme
    MIT license
    Activity
    Custom properties
    326 stars
    4 watching
    45 forks
    Report repository
    
    Releases
    No releases published
    
    Contributors 13
    
    Interface text:
    railwayapp / railway-skills
    Code  Issues 24  Pull requests 9  Actions  Projects  Security and quality  Insights
    Notifications  Fork 45  Star 326
    main  55 Branches  0 Tags  Go to file  Code
    lucacasonato  use-railway: set tracing in IaC config (#97)  dab1c2a · 2 days ago  210 Commits
    README  MIT license
  2. 11:21

    GitHub view of the Railway skill references directory, including database, configuration, and deployment files.

    Text in image
    railwayapp/railway-skills
    Lets the agent deploy, add databases, check metrics, and debug on its own.
    
    railway-skills / plugins / railway / skills / use-railway / references /
    
    Name | Last commit message | Last commit date
    analyze-db-mongo.md | feat: collect SLOWLOG GET and --bigkeys in Redis analysis | 7 months ago
    analyze-db-mysql.md | feat: collect SLOWLOG GET and --bigkeys in Redis analysis | 7 months ago
    analyze-db-postgres.md | fix: correct connection age bucket description to match script output | 7 months ago
    analyze-db-redis.md | fix: never suggest running redis-cli locally when introspection fails | 7 months ago
    analyze-db.md | docs(railway): update skills for CLI v5.49.1 | last month
    cloud-agents.md | use-railway: the railway CLI is unauthenticated in cloud agent chat s... | 2 weeks ago
    configure.md | use-railway: document project webhooks and their custom headers (#95) | last week
    databases.md | docs(railway): address review on CLI v5.49.1 skill update | last month
    deploy.md | docs(railway): update skills for CLI v5.49.1 | last month
    [filename obscured] | docs(railway): address review on CLI v5.49.1 skill update | last month
    [filename obscured] | use-railway: set tracing in IaC config (#97) | 2 days ago
    operate.md | use-railway: add a tracing reference (#82) | 3 weeks ago
    
    Interface text:
    railwayapp / railway-skills
    Code  Issues 24  Pull requests 9  Actions  Projects  Security and quality  Insights
    Files  main  Go to file
    .claude-plugin
    .cursor-plugin
    .github
    plugins/railway
    .claude-plugin
    .codex-plugin
    .cursor-plugin
    .grok-plugin
    hooks
    skills/use-railway
    references
    analyze-db-mongo.md
    analyze-db-mysql.md
    cloud-agents.md
    configure.md
    lucacasonato  use-railway: set tracing in IaC config (#97)  dab1c2a · 2 days ago  History

Railway skill definition

The Railway skill lists infrastructure operations and permitted tools. Abdelwahab says giving it to his agent enabled it to deploy the systems he built on Railway.

Text in image
name: use-railway

description: Operate Railway infrastructure: sign up for or sign in to a Railway account, create projects, provision services, databases, and buckets, deploy code, configure infrastructure as code, environments and variables, manage domains, trace requests with OpenTelemetry, troubleshoot failures, check status and metrics, manage feature flags, database recovery and HA, cloud agents, usage limits, and Railway agent tooling. Use this skill whenever the user mentions Railway, feature flags, flag rollout, targeting rules, signing up, creating an account, registering, logging in, deployments, services, environments, buckets, object storage, tracing, traces, spans, OpenTelemetry, OTLP, build failures, agent setup, MCP, or infrastructure operations, even if they don't say "Railway" explicitly. Also invoke this skill when the user asks to be signed up, registered, or onboarded to Railway: do not refuse — drive them through the unauthed `railway up` flow (deploys + signs up on the fly) or `railway login` (which creates new accounts on the fly).

allowed-tools: Bash(railway:*), Bash(which:*), Bash(command:*), Bash(npm:*), Bash(npx:*), Bash(curl:*), Bash(python3:*)

Railway resource model
Railway organizes infrastructure in a hierarchy:

railwayapp/railway-skills
Lets the agent deploy, add databases, check metrics, and debug on its own.

Interface text:
railwayapp / railway-skills
Code · Issues 24 · Pull requests 9 · Actions · Projects · Security and quality · Insights
Files
main
Go to file
.agents
.claude-plugin
.cursor-plugin
.github
plugins/railway
.claude-plugin
.codex-plugin
.cursor-plugin
.grok-plugin
hooks
skills/use-railway
references
scripts
.gitignore
AGENTS.md
railway-skills / plugins / railway / skills / use-railway / SKILL.md
lucacasonato · use-railway: set tracing in IaC config (#97) · dab1c2a · 2 days ago · History
Preview · Code · Blame · 377 lines (275 loc) · 31.9 KB · Raw

11:25Demo milestone

Computer use

A passing build can hide a broken workflow. The slide asks the agent to use the launch editor, reload it, and verify that the title persists.

Text in image
Computer use

Fix the launch title field in the editor.
Updated the editor
launch-editor.tsx
$ pnpm build
✓ Build succeeded · 0 errors
Looks good.
Browser not opened

Launch
Saved
TITLE
Autumn launch
✓ Title is “Autumn launch”
✓ Still “Autumn launch” after reload
✓ Verified: the title survives a reload

A successful build doesn't prove the workflow works.
Have the agent use the UI,
reload, and check the result.

Interface text:
Agent
localhost/launches/12
Agent

Read the talk

Please… Enough with the Sloppy, One-Shot SaaS Replacements

Mahmoud Abdelwahab’s internal marketing app at Railway shows how much work begins after a feature runs: preserving edits, making actions reversible, sharing useful views, reusing good patterns and testing the experience against running infrastructure.

From a talk by Mahmoud Abdelwahab

At a glance

Ideas worth remembering

  • A structured codebase and explicit reference pages give agents existing patterns to reuse across features.

  • Specify product behavior alongside functionality: non-blocking autosave, unsaved-change protection and optimistic updates with rollback.

  • Delayed deletion creates an undo window; archiving supports reversible removal from everyday views.

  • Package recurring preferences as skills, then verify the feature end to end against running infrastructure.

A working replacement still has to earn daily use

Sending an email or publishing a post is only part of replacing a marketing tool. The replacement also has to feel good when someone opens it every day. Mahmoud Abdelwahab opens with that gap: agents can produce working software in one shot, while the software people want to use depends on care that a feature request may never specify.

At Railway, his replacement is an all-in-one internal marketing app. It manages website content, the changelog and blog; sends email; posts across social platforms; and manages website media. A small CRM tracks external creators. Task tracking, launch planning and a calendar coordinate what goes out and when. Comments and real-time editing support the people doing that work together. Agents built the app, and Railway runs it with automatic deployments.

Recorded from an outdoor bench in Edinburgh in October 2026—a “ten out of ten bench”—this is a set of opinions earned while building that tool. Abdelwahab explicitly leaves room for those opinions to change as agents improve. The useful question is immediate: what must you ask for to turn a functioning internal app into a consistent, polished place to work?

0:004:03
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

0:00 · section reference included

Give the agent patterns worth repeating

“Tech stacks don’t matter” needs a qualification. An agent may be able to work in many languages and frameworks, but the structure of the codebase still affects what it produces. Solid abstractions give a new feature an existing way to fetch data, organize code and present behavior. Without those patterns, each feature gives the agent another opportunity to invent a different solution to the same problem.

Abdelwahab’s preferences are TanStack libraries for web development and Payload for content-related work. The reason for choosing a CMS is practical: being able to build one from scratch does not make that the best use of effort. Established abstractions provide a starting point the agent can reuse. His broader recommendation is a properly structured codebase, rather than a claim that these particular libraries are mandatory.

The same distinction appears in the product. A server-rendered page with a submitted form can send an email or publish content. It satisfies the basic operation. Recreating a favorite SaaS product exposes the smaller decisions that make repeated use pleasant, and Abdelwahab finds that agents often leave those decisions out unless they are requested explicitly.

2:302:59
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

2:30 · section reference included

Save progress without interrupting the writer

A document editor makes the first missing behavior obvious. Requiring a Save click puts responsibility for preserving progress on the writer. Autosave moves that work into the background, but it also needs an interaction requirement: saving must be non-blocking. The writer should keep typing while the app saves, rather than waiting for each operation to finish.

A second layer guards against closing the browser tab while changes remain unsaved. These mechanisms address different moments: background saving preserves progress during work, while the close guard intervenes when the user tries to leave before saving finishes. They reduce opportunities to lose edits; the talk does not establish a guarantee against every browser, network or storage failure.

Real-time collaboration extends the editor to concurrent edits. In Abdelwahab’s experience, the agent could add it after a discussion and review of how it would work. His joke about “seven hundred million tokens later” preserves some of the effort behind that success. The recording does not explain a conflict-resolution algorithm or synchronization protocol, so the transferable lesson here is to specify collaborative behavior explicitly, rather than to copy an implementation.

4:335:03
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

4:33 · section reference included

Make suitable actions feel immediate—and recover from failure

Optimistic updates change when the interface acknowledges an action. Instead of showing a loading spinner until the operation completes, the app immediately displays the expected success state and synchronizes the change in the background. If synchronization fails, it rolls the interface back and tells the user the operation did not work. The fast path and the recovery path belong to the same feature.

That makes an action feel faster without claiming that the underlying operation finishes faster. It also requires judgment. Some actions should retain a loading state until success is confirmed. Abdelwahab recommends asking the agent to plan where optimistic updates make sense, rather than applying them indiscriminately. Knowing to request the behavior is part of building the product.

6:036:32
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

6:03 · section reference included

Separate removing an item from destroying it

A request to delete records often produces a Delete button, perhaps a confirmation dialog, and then deletion. Undo changes the experience. Clicking Delete immediately removes the record from the interface, while a short window lets the user change their mind. If they choose Undo, the record returns. If they do nothing, the app performs the deletion after the window expires.

When does deletion actually happen? The branch below separates the immediate visual response from the delayed operation. Both outcomes begin with the item disappearing, but only the expired undo window leads to deletion. This is a specific timing decision: the implementation described delays the operation, so Undo can restore the item before that operation occurs.

Archiving handles a different intent: someone wants an item out of the interface or search results without losing the ability to bring it back later. Archive and Unarchive give that intent its own operations. A short undo window helps with an immediate change of mind; archiving provides a reversible way to keep a record out of everyday view.

Immediate removal, delayed deletion

Click DeleteThe user asks to remove a record.
Hide item; offer UndoRemove the item from the UI and allow a short time to change course.
Restore itemUndo brings the item back.
Perform deletionRun the delayed operation when the user leaves the action unchanged.
The undo window branches into restoration or deletion. Hiding the item is immediate; deleting the record waits.
Read the diagram as text
  • Click Delete. The user asks to remove a record.
  • Hide item; offer Undo. Remove the item from the UI and allow a short time to change course.
  • Restore item. Undo brings the item back.
  • Perform deletion. Run the delayed operation when the user leaves the action unchanged.
  • Click Delete → Hide item; offer Undo: Immediate UI response.
  • Hide item; offer Undo → Restore item: User chooses Undo.
  • Hide item; offer Undo → Perform deletion: Window expires without Undo.
7:027:32
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

7:02 · section reference included

Make a useful view easy to share and continue

Lists acquire useful context through filters, sort order and other conditions. Keeping that state in the URL lets someone share the configured view with a teammate. The recipient can open the intended selection directly, rather than reconstructing the sender’s filtering and sorting choices. The URL carries the view’s settings.

Infinite scroll removes another repeated interaction. As the user scrolls, the app loads more records instead of requiring another Load More or Next Page click. At the end, it indicates that there is no more data. This is Abdelwahab’s preference for a tool used every day: remove the small navigation task that otherwise repeats throughout the work.

8:339:03
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

8:33 · section reference included

Reuse an existing page, then package recurring preferences

Once a page works well, it can become a concrete reference for the next feature. Ask the agent to follow its UI, data fetching and overall structure. Two areas that both list, create, update and delete records should offer a consistent experience. A reference page gives the agent a local example of what that means, extending the earlier idea of reusable code patterns into reusable product decisions.

References improve consistency in Abdelwahab’s experience, but they do not ensure compliance: sometimes the agent ignores the named page. Recurring opinions can also be packaged as agent skills, so the agent has guidance to apply across features. Reference pages supply examples; skills carry reusable instructions.

His internal tooling draws on three kinds of guidance:

  • UI and written feedback. One skill covers interface quality, typography, layouts and better error messages.
  • Motion. Another set of design engineering skills guides animations and related interaction details.
  • Deployment. Railway agent skills help the agent work with and deploy the infrastructure running the tool: buckets, databases, the application and the real-time server.
9:3310:03
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

9:33 · section reference included

The final check is using the running feature

A passing build and passing tests can still accompany a broken experience. That is why verification is the final—and, for Abdelwahab, most important—step. The agent needs to try the feature, observe what fails and fix it. Computer use made that form of verification substantially more useful in his workflow because the agent could exercise the application rather than stop at an implementation report.

The instruction includes the environment: run the infrastructure and verify the feature end to end. This asks the agent to test the feature in operation, where its pieces must work together. It is the practical check on all the earlier requests: the desired interaction has to survive actual use, not merely exist somewhere in the code.

The destination is an internal tool that works consistently and feels good enough to reach for. Abdelwahab closes by inviting builders to become their company’s “SaaS layer.” In this account, that role includes choosing the small behaviors, carrying them across the app and checking the running result—the work that turns generated features into something colleagues want to use.

11:3312:03
Suggest correction

This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.

11:33 · section reference included

Resources

Read the complete timestamped transcript

8 slide groups · 12 demo milestones. Extracted from the recording; expand builds to follow changes. Timestamps are approximate.

  1. 0:00

    People have been saying that SaaS is dead for a while now. It's not even a hot take at this point. Why pay someone to build and maintain the tools you use when you could just do it yourself? Just ask your agent to do it. And for me, there's one missing piece that rarely gets mentioned, and it's the fact that there's a gap, a big gap between working software that got one-shotted and software I would actually use, software that sparks joy, that is polished, that feels good. And I actually went on a journey to replace a bunch of SaaS providers we were

  2. 0:30

    using internally at Railway for marketing purposes, and I just built an all-in-one tool that we use. The tool allows us to manage content for the Railway website, changelog, blog. We can use it to send emails, post on all of our social platforms at the same time, manage the website's media. There's even a mini CRM so that when we're working with, like, external creators, we can keep track of that. There is task tracking, launch planning, because, you know, you want to coordinate multiple things and when they'll go out. There's a calendar. And at the same time, there's,

  3. Website and blog editor

    Railway’s internal marketing tool brings a launch post’s content and publication fields into one editor. The example post describes coordinating tasks, assets and dates on a single board.

    Text in image
    Website, changelog & blog
    
    Category *
    None
    No options are available.
    
    Description *
    The checklist we use for every launch, from the first task to the last social post.
    
    Featured
    Featured image
    spring-launch-hero.png
    Social image
    Search media
    Published at *
    Oct 8, 2026, 7:29 AM
    SEO title
    SEO description
    
    52 words · 1 min read
    
    How we plan a launch
    
    Every launch starts with a single board: the tasks, the assets and the dates live in one place. Every task links back to its launch.
    
    We write the post, the email and the social copy side by side, so the story stays consistent.
    
    On launch day, everything goes out together.
    
    Interface text:
    CMS
    Content > Blog > Posts > How we plan a launch
    MA
    Draft
    Not requested
    Request review
    Publish
    Share access
    Preview
    Growth estimate
    
    Planning
    Problems
    Launches
    Tasks
    Task templates
    
    Content
    Blog
    Posts
    Authors
    Categories
    Videos
    Social posts
    Emails
    Changelog
    Media
    Scheduled
    
    Ecosystem
    Profiles
    Engagements
    Activities
    Tools
    Website
    
    MA
    [redacted]
    Admin

    0:33Demo milestone

  4. Mini CRM

    Railway uses the mini CRM to track work with external creators. The engagement board groups records by status, with two spring launch videos shown as Active.

    Text in image
    Mini CRM
    
    Prospecting 0
    No engagements in this stage.
    
    Contacted 0
    No engagements in this stage.
    
    Negotiating 0
    No engagements in this stage.
    
    Active 2
    Alex Rivera · spring launch video
    Alex Rivera
    Active
    Send the launch [illegible]
    
    Jordan Lee · spring launch video
    Jordan Lee
    Active
    Send the launch brief
    
    On hold 0
    No engagements in this stage.
    
    Interface text:
    CMS
    Ecosystem > Engagements
    Group by: Status
    
    Planning
    Problems
    Launches
    Tasks
    Task templates
    
    Content
    Blog
    Posts
    Authors
    Categories
    Videos
    Social posts
    Emails
    Changelog
    Media
    Scheduled
    
    Ecosystem
    Profiles
    Engagements
    Activities
    Tools
    Website
    [redacted]
    Admin
    
    Stage updated to Active.

    0:45Demo milestone

  5. Tasks and launch planning

    The task board groups launch work by status, from backlog to done, with dates on each card. The speaker describes using it to coordinate launch tasks and when they go out.

    Text in image
    Tasks & launch planning
    
    Backlog 1
    Record product demo
    Launch · Oct 16
    Created 34 minutes ago
    
    Todo 2
    Draft launch announcement
    Launch · Oct 12
    Created 34 minutes ago
    
    Schedule social posts
    Launch · Oct 13
    Created 34 minutes ago
    
    In progress 1
    Design launch artwork
    Launch · Oct 11
    Created 34 minutes ago
    
    Done 2
    Book creator walkthroughs
    Launch · Oct 7
    Created 34 minutes ago
    
    Write changelog entry
    Launch · Oct 10
    Created 34 minutes ago
    
    Canceled 0
    Add a task or move one here.
    
    Interface text:
    CMS
    Planning > Tasks
    Planning
    Problems
    Launches
    Tasks
    Task templates
    Content
    Blog
    Posts
    Authors
    Categories
    Videos
    Social posts
    Emails
    Changelog
    Media
    Scheduled
    Ecosystem
    Profiles
    Engagements
    Activities
    Tools
    Website
    [redacted]
    Admin

    0:50Demo milestone

  6. Comments and real-time editing

    A blog post shows Priya Nair editing while a comment asks to link the calendar, illustrating comments and real-time collaboration in the CMS.

    Text in image
    Comments & real-time editing
    
    Featured image: spring-launch-hero.png
    Social image: Search media
    Published at *: Oct 8, 2026, 7:29 AM
    SEO title
    SEO description
    
    Priya Nair editing
    55 words · 1 min read
    
    How we plan a launch
    
    Every launch starts with a single board: the tasks, the assets and the dates live in one place.
    
    We write the post, the email and the social copy side by side, so the story stays consistent.
    
    On launch day, everything goes out together. We review everything together the day before.
    
    Comment
    Love this. Can we link the calendar here too?
    
    Interface text:
    CMS
    Content > Blog > Posts > How we plan a launch
    PN MA
    Draft
    Not requested
    Request review
    Publish
    Share access
    Preview
    Growth estimate
    
    Planning
    Problems
    Launches
    Tasks
    Task templates
    
    Content
    Blog
    Posts
    Authors
    Categories
    Videos
    Social posts
    Emails
    Changelog
    Media
    Scheduled
    
    Ecosystem
    Profiles
    Engagements
    Activities
    Tools
    Website
    
    MA
    [redacted]
    Admin

    0:58Demo milestone

  7. 1:00

    like, comments, real-time editing, and it's all built using agents. I would say I felt the breakthrough when GPT-6 came out, and all of this is running on Railway. Everything just auto deploys. And let me essentially now walk you through the principles I use to actually make sure that when I want to add a feature, it's, you know, actually polished and matches the rest of the app, and at the same time, the principles that you can pull

  8. CMS deployment on Railway

    The CMS runs on Railway and auto-deploys. Its deployment diagram connects the app and worker to storage, an image proxy, and Postgres.

    Text in image
    CMS
    
    cms-realtime
    Online
    
    cms-files
    128.0 MB
    
    cms-media
    5.9 GB
    
    cms
    Online
    
    cms-imgproxy
    Online
    
    cms-worker
    Online
    
    cms-postgres
    Online
    postgres-volume
    
    cms-postgres-PITR
    765.7 MB
    
    Interface text:
    Marketing
    production
    Agent
    + Add

    1:08Demo milestone

  9. 1:30

    from and apply when building tools of your own. So instead of doing my talk from my boring office, I decided to switch things up and do it outside. It is absolutely beautiful. Right now, I'm in Edinburgh, Scotland, and it's just unreal. Like, I'm on a bench outside, and this is my view. Definitely a ten out of ten bench. Now, this type of talk for me feels a little bit different than what I'm used to, because I essentially will walk you through the journey of me

  10. 2:00

    building our own internal tools and the opinions I've developed. But I also understand that the landscape changes very, very quickly. So, like, anything I say might change completely in, like, the span of months. Who knows? So I don't know. Consider this my disclaimer. Like, by the time of recording is fall 2026. It's October. And yeah. So anyway, w-with that out of the way, uh, let's talk about the first point,

  11. 2:30

    which is tech stacks don't matter. Now, a lot of people say that it doesn't matter what programming language you use, what framework you use, you can just ask your agent to go do anything, and it will just be able to do it. And while I agree to some extent, what I found is when you're building a tool that you will actually use, w-when you give the agent a proper code base with solid abstractions, what ends up happening is whenever you're working, let's say, on a new feature, you end up with a much more consistent

  12. 2:59

    result that is similar to what you've already built before. And the reason is, like, it's very simple. The agent doesn't need to reinvent the same, like, wheel every time it tries to add a new feature, or it doesn't need to introduce new patterns. It will just essentially follow existing patterns. And when it comes to, like, what you choose, I feel like it kind of doesn't really matter as long as you have a code base that is properly structured. But, like, my go-to choice today

  13. 3:30

    is, one, TanStack libraries for anything when building on the web. And if you're building anything content related, I would say definitely go with Payload. Solid experience, great abstraction. I went down, like, a big rabbit hole of, like, comparing CMSs at some point because I don't believe that I should, uh, build it from scratch, even though I can. But again, who knows? Maybe the future will change. But yeah. And that's kind of, like, the main first item that I kind of ran into.

  14. Payload CMS

    Mahmoud recommends Payload for content-related projects after comparing CMSs; he prefers using an existing CMS to building one from scratch.

    Text in image
    The backend to build the modern web.
    
    $ npx create-payload-app
    Get a Demo
    
    Payload · payloadcms.com
    Open-source TypeScript CMS and app framework.
    
    Interface text:
    Payload
    Product  Why Payload  Developers  Enterprise  Docs
    45.2k  Login  Get Started
    
    Posts / Payload: The best way to build something you truly own
    Payload: The best way to build something you truly own
    Status: Published — Unpublish
    Modified: July 13th 2024, 9:55 AM
    Created: October 17th 2023, 2:47 PM
    Content  Appearance  SEO
    Post Title
    Payload: The best way to build something you truly own
    Banner Image
    banner-image.webp
    31KB - 1600x800 - image/webp
    Content
    Flexibility and Advanced Features
    [illegible]
    Open Source and Community-Driven
    [illegible]
    
    my-payload-app
    node_modules
    src
    app
    (frontend)
    (payload)
    admin
    api
    custom.scss
    layout.tsx
    collections
    components
    globals
    payload.config.ts
    .env
    .env.example
    .eslintrc.cjs
    .gitignore
    .prettierrc.json
    .yarnrc
    docker-compose.yml
    Dockerfile
    next.config.mjs
    package.json
    pnpm-lock.yaml
    README.md
    tsconfig.json

    3:37Demo milestone

  15. 4:03

    When you use, like, a lot of SaaS products out there that you actually love, that you use every day, when you're a user, there's, like, a lot of things you don't notice. But when you actually try to, like, replicate an experience, you quickly find out how much care and thought goes into different flows. So, like, something as simple as, oh, I want to be able to send an email or to publish something, you can easily do it by having, like, a good old, you know,

  16. 4:33

    just like, server-side rendered app with, like, forms that you submit. But if you try to build something that is gonna be used every day, that you will reach for a lot, you're like, "Oh, it shouldn't feel that way." And there are kind of, like, a bunch of patterns that I found that agents don't typically do unless you explicitly ask them to, and this is my list. So we'll go through them one by one. And the first one is, like, autosave. I, I found that if, like, let's say I'm building some

  17. 5:03

    form of document editor, autosave is kind of like a table stakes feature. So rather than manually clicking save to save things, you just ask it to automatically save progress in the background and to make sure that it's, like, a non-blocking action so that you can... Let's say if as you're typing, you're able to type, and then it just automatically saves. And one other kind of, like, step further that you could do is to

  18. Autosave

    Autosave lets the editor save in the background while the user keeps typing, instead of locking the editor during a manual save.

    Text in image
    Autosave
    
    Left editor:
    Launch notes
    Editing locked
    Saving...
    TITLE
    Summer launch
    DESCRIPTION
    We're launching
    
    Without it, you click Save and wait while the editor locks.
    
    Right editor:
    Launch notes
    Saved
    TITLE
    Summer launch
    DESCRIPTION
    Launch is ready for review.
    
    Keep typing. Saving happens in the background.
  19. 5:33

    also prevent the browser tab from closing if there are unsaved changes. So it's kind of like these, these two layers that kind of guarantee that whatever it is that you're working on is just not gonna be lost. Now, you can also go a step further and to add, like, real-time collaboration so that you can have, like, concurrent edits. And again, my agent didn't struggle at all with adding the feature. It was like I don't know, asking about it,

  20. Comments and real-time editing

    A blog post shows Priya Nair editing while a comment asks to link the calendar, illustrating comments and real-time collaboration in the CMS.

    Text in image
    Comments & real-time editing
    
    Featured image: spring-launch-hero.png
    Social image: Search media
    Published at *: Oct 8, 2026, 7:29 AM
    SEO title
    SEO description
    
    Priya Nair editing
    55 words · 1 min read
    
    How we plan a launch
    
    Every launch starts with a single board: the tasks, the assets and the dates live in one place.
    
    We write the post, the email and the social copy side by side, so the story stays consistent.
    
    On launch day, everything goes out together. We review everything together the day before.
    
    Comment
    Love this. Can we link the calendar here too?
    
    Interface text:
    CMS
    Content > Blog > Posts > How we plan a launch
    PN MA
    Draft
    Not requested
    Request review
    Publish
    Share access
    Preview
    Growth estimate
    
    Planning
    Problems
    Launches
    Tasks
    Task templates
    
    Content
    Blog
    Posts
    Authors
    Categories
    Videos
    Social posts
    Emails
    Changelog
    Media
    Scheduled
    
    Ecosystem
    Profiles
    Engagements
    Activities
    Tools
    Website
    
    MA
    [redacted]
    Admin

    5:46Demo milestone

  21. 6:03

    reviewing how it would work, and then once that's done, just seven hundred million tokens later, then I had real time. So I would say in general, this is the first thing that I find agents just don't do well from a product experience perspective. Another pattern I found that agents completely forget to implement is optimistic updates. So rather than showing your users a bunch of loading spinner whenever they're taking any action, you essentially show them the success state, you know, optimistically, and in the background, you're going to

  22. Optimistic updates

    A task moves to Ready immediately while the server syncs. If the operation fails, the change is rolled back and the user is told.

    Text in image
    Optimistic updates
    
    Without it, the card waits on the server before it moves.
    
    Move immediately, then reconcile with the server.
    
    Interface text:
    Tasks
    Saving...
    DRAFT 1
    READY 0
    Prepare launch email
    Waiting for the server...
    
    Tasks
    Saved
    DRAFT 0
    READY 1
    Prepare launch email
  23. 6:32

    sync whatever change they made. Now, if the sync or the operation fails for whatever reason, you just roll it back and then tell them, like, "Oh, the operation didn't work." Now, of course, you shouldn't blindly have optimistic updates for everything. There are some scenarios where you want to show the user a loading spinner, and you're going to wait to check that everything worked properly. But in general, having optimistic updates makes the overall experience feel significantly faster, much snappier,

  24. 7:02

    and it will just feel much more instant. So pretty sure you can just ask your agent like, "Hey, I would like to implement optimistic updates where it makes sense. Let's come up with a plan," and it will tell you all the areas where it makes sense to do. Again, it's like it's not difficult for the agent to build it. You just need to ask and know exactly what to ask for. Now, an extension of optimistic updates, in my opinion, is giving users the ability to undo certain actions. Now, for example, if you ask your agent to implement the ability to delete

  25. 7:32

    records, what it will typically do is it will give you a delete button. You click it, might show a confirmation dialog, you hit Confirm, and then it will actually do the deletion. But a much nicer experience is actually allowing the user to undo that action. So they hit Delete, you immediately remove the item they wanna delete from the UI, but you tell them like, "Hey, you have like a couple of seconds where you could change your mind." And if they don't do anything, that means you actually want to delete the thing,

  26. Undo delete

    Remove the record from the UI immediately and offer a short undo window. If the user does nothing, delete it; if they undo, bring it back.

    Text in image
    Undo delete
    
    Without it, a confirmation dialog interrupts and the delete is final.
    
    Interface text:
    Launches
    Launches
    3 records
    01 Summer [illegible]
    02 API upda[illegible]
    03 Product t[illegible]
    Delete “API update”?
    Are you sure? This can't be undone.
    Cancel
    Delete
  27. Undo delete

    Remove the record from the UI immediately and offer a short undo window. If the user does nothing, delete it; if they undo, bring it back.

    Text in image
    Undo delete
    
    Without it, a confirmation dialog interrupts and the delete is final.
    
    Remove immediately. Offer a short window to undo.
    
    Interface text:
    Launches
    Launches
    3 records
    01 Summer [illegible]
    02 API upda[illegible]
    03 Product t[illegible]
    Delete “API update”?
    Are you sure? This can't be undone.
    Cancel
    Delete
    
    Launches
    Launches
    3 records
    01 Summer launch
    02 API update
    03 Product tour
  28. 8:03

    then you actually implement the operation. Otherwise, if they hit Undo, you just bring back the change. So it's kind of like you do the operation in the background as well. It's just kind of a delayed action, which kind of ties into the next point, which is archiving. You should tell your agent you want the ability to archive records and be able to unarchive them, because sometimes you want to hide something from the UI completely, or let's say from search results, and archiving will be the way to do it.

  29. Archiving

    Archiving lets users hide records from the UI or search and bring them back later, instead of deleting them permanently.

    Text in image
    Archiving
    
    Without it, finished work is deleted and can't come back.
    
    Archive, find it later, and bring it back.
    
    Interface text:
    Posts
    Posts
    2 posts
    01 Summer launch
    03 Product tour
    API update
    No posts found. Deleted posts can't be restored.
    
    Posts
    Posts
    Active
    Archived 1
    02 API update
    Unarchive ↗
    Archived records stay recoverable.
  30. 8:33

    And you shouldn't force your user to be like, "Well, if you don't want to see this, you have to delete it." And a much better experience is just the ability to archive records. So I think it is a pattern that should definitely exist. Another big one for me is URL state. You should ask your agent to persist state in the URL whenever it makes sense, of course. And it's so useful because whenever you have, let's say, a list of records and you want the ability to filter or sort them and you just have a bunch of like conditions, maintaining these

  31. 9:03

    things in the URL makes it trivial for you to give them to someone else. And then let's say another team member is just gonna be able to see exactly what you want them to see. Now, another small detail that agents don't implement out of the box is infinite scroll. I don't want to be clicking on Load More over and over and over, or like a Next Page button. As I scroll, I should just get the data. I shouldn't need to click Next Page. And then in the end, I'll just see that, oh, I've reached the end. It's a very minor thing, but also when you use something every day,

  32. Persist state in the URL

    Putting the board view and its owner, status, and sort settings in the URL lets a shared link reopen the same filtered view for a teammate.

    Text in image
    Persist state in the URL
    
    Without it, the link opens the default view and the filters are lost.
    
    The view lives in the URL, so the link opens the exact same view.
    
    Interface text:
    Left view:
    cms/launches
    cms/launches
    All owners
    All statuses
    Oldest first
    Board
    List
    01 Summer launch
    02 Product tour
    03 API update
    
    Right view:
    cms/launches?view=board&owner=me&status=draft&sort=-updated
    Copied
    cms/launches?view=board&owner=me&status=draft&sort=-updated
    Owner: Me
    Status: Draft
    Newest first
    Board
    List
    This week
    API update
    Next week
    Docs refresh
    Launch email
    Later
    Partner briefing
  33. Infinite scroll

    Instead of clicking Load more for each batch, scrolling near the bottom loads more rows while keeping existing rows in place. An end-of-list indicator shows when all 12 items are loaded.

    Text in image
    Infinite scroll
    
    Without it, you click to load every next batch.
    Load near the bottom. Keep existing rows in place.
    
    Interface text:
    Launches
    9 of 12 loaded
    07 Video assets
    08 Website copy
    09 Launch checklist
    Load more ↓
    
    Launches
    12 of 12 loaded
    09 Launch checklist
    10 Team review
    11 Final preview
    12 Publish
    End of list
  34. 9:33

    I think it makes a huge difference. Now, another pattern I found that made the output significantly better is telling the agent explicitly to use existing pages as references when it comes to the UI, the data fetching and how it works, and how the thing is overall structured. And that made it possible for me to essentially define what good looks like once and then just reuse it for more features. Now, to be completely honest, sometimes even when you tell the agent like,

  35. 10:03

    "Hey, use page X as a reference," sometimes it just doesn't follow it. I don't know if models like get dumber sometimes, but sometimes it does happen. But overall, I would say that my success rate is higher whenever I tell the agent to like, well, use an existing page as a reference, because you also just end up with a more consistent experience. So like, as you're using your app, you're like, "Oh, this just matches the other part of the app," if they both share like the same concept. So like if two parts of the

  36. Tasks and launches boards

    The tasks and launches boards share a layout for managing records. Abdelwahab recommends using an existing page as a reference to make related parts of an app more consistent.

    Text in image
    Tasks board:
    Backlog 1
    Record product demo
    Launch · Oct 16
    Created 34 minutes ago
    
    Todo 2
    Draft launch announcement
    Launch · Oct 12
    Created 34 minutes ago
    Schedule social posts
    Launch · Oct 13
    Created 34 minutes ago
    
    In progress 2
    Write changelog entry
    Launch · Oct 10
    Created 34 minutes ago
    Design launch artwork
    Launch · Oct 11
    Created 34 minutes ago
    
    Launches board:
    Not started 1
    Docs refresh
    Tier 2 · Oct 24
    
    In progress 1
    Spring launch
    Tier 1 · Oct 14
    
    Review 0
    Add a launch [illegible]
    
    3 of 3 loaded
    End of list
    
    Interface text:
    CMS
    Planning
    Problems
    Launches
    Tasks
    Task templates
    Content
    Blog
    Posts
    Authors
    Categories
    Videos
    Social posts
    Emails
    Changelog
    
    Planning > Tasks
    Planning > Launches
  37. 10:33

    app are essentially lists of records that you can create, update, and delete and like list, well, both of these parts should be pretty much identical. This list kind of brings me to my next point, which is whenever you have opinions about something, they should be packaged as agent skills. And then this way, your agent, whenever it's building something, it will actually follow those skills pretty closely. And as I was building all of our internal tooling, I found myself reaching for three agent skills. Uh, two of them are related to design

  38. Interface skills repository

    Abdelwahab recommends packaging opinions as agent skills so agents follow them. This repository collects skills for accessibility, layout, typography, color, writing, and interface review.

    Text in image
    jakubkrehel/skills
    Interface skills: accessibility, layout, type, color, writing, and a full review.
    
    About
    A collection of agent skills that help you build great interfaces.
    jakub.kr/skills
    
    Interface text:
    jakubkrehel / skills
    Code · Issues 2 · Pull requests 3 · Actions · Projects · Security and quality · Insights
    skills · Public
    Notifications · Fork 284 · Star 7.6k
    main · 1 Branch · 0 Tags · Go to file · Code
    jakubkrehel: Merge pull request #41 from jakubkrehel/fix/issue-40-correctness
    113 Commits
    .claude-plugin — Merge remote-tracking branch 'origin/main' into fix/issue-... — 3 days ago
    skills — refactor: update accessibility documentation for motion an... — 3 days ago
    .gitattributes — feat: gitattributes — 2 months ago
    AGENTS.md — chore: refine documentation for state-machine and variant... — 3 days ago
    CLAUDE.md — refactor: clean up /explain-interface — 2 months ago
    LICENSE — Initial commit — 3 months ago
    README.md — chore: update state-machine skill description and docume... — 3 days ago
    opencode.json — feat: add opencode — 2 months ago
    Readme · MIT license · Activity
    7.6k stars · 31 watching · 284 forks
    Report repository
    Releases
    No releases published
    Contributors 2
    jakubkrehel Jakub Krehel
    claude Claude
    Languages

    11:00Demo milestone

  39. 11:02

    engineering. So one made it easier to have better UI, better typography, better layouts, as well as like better error messages in general. And the second one was a set of design engineering skills that made it easier to just have better animations and other things like that. And then last but not least is the Railway agent skills, of course. So like everything that I built for us internally at Railway runs on Railway, of course. Like everything. So like buckets, databases, the app itself, the real-time server,

  40. Interface skills directory

    Jakub Krehel’s skills directory packages interface guidance by topic, including accessibility, layout, typography, color, writing, and review. Abdelwahab uses it to guide agents building internal tools.

    Text in image
    jakubkrehel/skills
    Interface skills: accessibility, layout, type, color, writing, and a full review.
    
    Interface text:
    jakubkrehel / skills
    Code
    Issues 2
    Pull requests 3
    Actions
    Projects
    Security and quality
    Insights
    Files
    main
    Go to file
    .claude-plugin
    skills
    better-accessibility
    better-colors
    better-interface
    better-layout
    better-typography
    better-ui
    better-writing
    break
    build-design
    explain-interface
    interface-review
    .gitattributes
    AGENTS.md
    
    skills / skills /
    jakubkrehel  refactor: update accessibility documentation for motion and zoom, rem...  4650b9c · 3 days ago  History
    Name  Last commit message  Last commit date
    ..
    better-accessibility  refactor: update accessibility documentation for motion and zoom, rem...  3 days ago
    better-colors  Merge remote-tracking branch 'origin/main' into fix/issue-40-correctness  3 days ago
    better-interface  chore: update accessibility skills and documentation  4 days ago
    better-layout  chore: update accessibility skills and documentation  4 days ago
    better-typography  refactor: update accessibility documentation for motion and zoom, rem...  3 days ago
    better-ui  chore: update accessibility skills and documentation  4 days ago
    better-writing  chore: update accessibility skills and documentation  4 days ago
    break  chore: refine documentation for state-machine and variant skills, rem...  3 days ago
    build-design  chore: update accessibility skills and documentation  4 days ago
    [illegible]  chore: update accessibility skills and documentation  4 days ago
    [illegible]  chore: update accessibility skills and documentation  4 days ago
    state-machine  chore: refine documentation for state-machine and variant skills, rem...  3 days ago

    11:04Demo milestone

  41. Design engineering skills repository

    Emil Kowalski’s skills repository packages design engineering and animation guidance. The speaker used it while building internal tools to improve animations.

    Text in image
    emilkowalski/skills
    Design engineering and animation: when to animate, easing, and motion review.
    
    skills  Public
    
    About
    Skills for Designers and Engineers.
    emilkowal.ski/skill
    Readme
    MIT license
    Activity
    44.5k stars
    170 watching
    2.5k forks
    Report repository
    
    Releases
    No releases published
    
    Contributors 4
    emilkowalski Emil Kowalski
    claude Claude
    cr2007 CSK
    CommanderClaude
    
    Repository files:
    skills — Add break ui skill — last week
    .gitattributes — chore: add .gitattributes for linguist detection (#10) — 2 months ago
    .gitignore — init — 7 months ago
    .pl — Add /mobile-native skill — 3 weeks ago
    LICENSE — Fix nits — 3 months ago
    README.md — Add break ui skill — last week
    performance-cheatsheet.md — Add /mobile-native skill — 3 weeks ago
    
    Interface text:
    emilkowalski / skills
    Code
    Issues 3
    Pull requests
    Actions
    Projects
    Security and quality
    Insights
    Notifications
    Fork 2.5k
    Star 44.5k
    main
    5 Branches
    0 Tags
    Go to file
    Code
    emilkowalski — Add break ui skill
    e8a175d · last week
    55 Commits
    README
    MIT license

    11:10Demo milestone

  42. Design engineering skills directory

    The directory collects skills for animation, design, and prototyping. Abdelwahab used this set to improve animations in his internal tools.

    Text in image
    emilkowalski/skills
    Design engineering and animation: when to animate, easing, and motion review.
    
    skills / skills /
    Name | Last commit message | Last commit date
    ..
    animate-expo | Remove course mention | 3 weeks ago
    animate | Remove course mention | 3 weeks ago
    animation-vocabulary | Remove course mention | 3 weeks ago
    apple-design | Remove course mention | 3 weeks ago
    ask-sonner | Remove course mention | 3 weeks ago
    break-ui | Add break ui skill | last week
    emil-design-eng | Remove course mention | 3 weeks ago
    find-animation-opportunities | Remove course mention | 3 weeks ago
    improve-animations | Remove course mention | 3 weeks ago
    [illegible] | Remove course mention | 3 weeks ago
    [illegible] | Remove course mention | 3 weeks ago
    prototype | Remove course mention | 3 weeks ago
    
    Interface text:
    emilkowalski / skills
    Code
    Issues 3
    Pull requests
    Actions
    Projects
    Security and quality
    Insights
    Files
    main
    Go to file
    skills
    animate-expo
    animate
    animation-vocabulary
    apple-design
    ask-sonner
    break-ui
    emil-design-eng
    find-animation-opportunities
    improve-animations
    mobile-native
    pick-ui-library
    prototype
    .gitattributes
    .gitignore
    emilkowalski  Add break ui skill
    e8a175d · last week
    History

    11:14Demo milestone

  43. Railway agent skills

    Abdelwahab gives the agent Railway skills to deploy his internal apps and infrastructure. The repository organizes references for databases, configuration, deployment, and operations.

    Text in image
    railwayapp/railway-skills
    Lets the agent deploy, add databases, check metrics, and debug on its own.
    
    railway-skills — Public
    
    .agents/plugins — Update marketplace.json — 4 months ago
    .claude-plugin — Use hosted MCP for all Railway plugins — 3 months ago
    .cursor-plugin — Use hosted MCP for all Railway plugins — 3 months ago
    .github/workflows — chore(railway): release 1.3.7 — 2 months ago
    plugins/railway — use-railway: set tracing in IaC config (#97) — 2 days ago
    .gitignore — refactor: remove redundant database skill, keep analysis in... — 7 months ago
    AGENTS.md — use-railway: document project webhooks and their custom... — last week
    CLAUDE.md — restructure repo to follow agent-skills marketplace format — 9 months ago
    LICENSE — add MIT license — 9 months ago
    
    About
    Agent skills for interacting with Railway
    railway.com/skills.sh
    agents  infrastructure  railway
    Readme
    MIT license
    Activity
    Custom properties
    326 stars
    4 watching
    45 forks
    Report repository
    
    Releases
    No releases published
    
    Contributors 13
    
    Interface text:
    railwayapp / railway-skills
    Code  Issues 24  Pull requests 9  Actions  Projects  Security and quality  Insights
    Notifications  Fork 45  Star 326
    main  55 Branches  0 Tags  Go to file  Code
    lucacasonato  use-railway: set tracing in IaC config (#97)  dab1c2a · 2 days ago  210 Commits
    README  MIT license

    11:18Demo milestone

    Show 2 builds
    1. 11:18

      GitHub overview of the Railway skills repository with a caption describing deployment, databases, metrics, and debugging.

      Text in image
      railwayapp/railway-skills
      Lets the agent deploy, add databases, check metrics, and debug on its own.
      
      railway-skills — Public
      
      .agents/plugins — Update marketplace.json — 4 months ago
      .claude-plugin — Use hosted MCP for all Railway plugins — 3 months ago
      .cursor-plugin — Use hosted MCP for all Railway plugins — 3 months ago
      .github/workflows — chore(railway): release 1.3.7 — 2 months ago
      plugins/railway — use-railway: set tracing in IaC config (#97) — 2 days ago
      .gitignore — refactor: remove redundant database skill, keep analysis in... — 7 months ago
      AGENTS.md — use-railway: document project webhooks and their custom... — last week
      CLAUDE.md — restructure repo to follow agent-skills marketplace format — 9 months ago
      LICENSE — add MIT license — 9 months ago
      
      About
      Agent skills for interacting with Railway
      railway.com/skills.sh
      agents  infrastructure  railway
      Readme
      MIT license
      Activity
      Custom properties
      326 stars
      4 watching
      45 forks
      Report repository
      
      Releases
      No releases published
      
      Contributors 13
      
      Interface text:
      railwayapp / railway-skills
      Code  Issues 24  Pull requests 9  Actions  Projects  Security and quality  Insights
      Notifications  Fork 45  Star 326
      main  55 Branches  0 Tags  Go to file  Code
      lucacasonato  use-railway: set tracing in IaC config (#97)  dab1c2a · 2 days ago  210 Commits
      README  MIT license
    2. 11:21

      GitHub view of the Railway skill references directory, including database, configuration, and deployment files.

      Text in image
      railwayapp/railway-skills
      Lets the agent deploy, add databases, check metrics, and debug on its own.
      
      railway-skills / plugins / railway / skills / use-railway / references /
      
      Name | Last commit message | Last commit date
      analyze-db-mongo.md | feat: collect SLOWLOG GET and --bigkeys in Redis analysis | 7 months ago
      analyze-db-mysql.md | feat: collect SLOWLOG GET and --bigkeys in Redis analysis | 7 months ago
      analyze-db-postgres.md | fix: correct connection age bucket description to match script output | 7 months ago
      analyze-db-redis.md | fix: never suggest running redis-cli locally when introspection fails | 7 months ago
      analyze-db.md | docs(railway): update skills for CLI v5.49.1 | last month
      cloud-agents.md | use-railway: the railway CLI is unauthenticated in cloud agent chat s... | 2 weeks ago
      configure.md | use-railway: document project webhooks and their custom headers (#95) | last week
      databases.md | docs(railway): address review on CLI v5.49.1 skill update | last month
      deploy.md | docs(railway): update skills for CLI v5.49.1 | last month
      [filename obscured] | docs(railway): address review on CLI v5.49.1 skill update | last month
      [filename obscured] | use-railway: set tracing in IaC config (#97) | 2 days ago
      operate.md | use-railway: add a tracing reference (#82) | 3 weeks ago
      
      Interface text:
      railwayapp / railway-skills
      Code  Issues 24  Pull requests 9  Actions  Projects  Security and quality  Insights
      Files  main  Go to file
      .claude-plugin
      .cursor-plugin
      .github
      plugins/railway
      .claude-plugin
      .codex-plugin
      .cursor-plugin
      .grok-plugin
      hooks
      skills/use-railway
      references
      analyze-db-mongo.md
      analyze-db-mysql.md
      cloud-agents.md
      configure.md
      lucacasonato  use-railway: set tracing in IaC config (#97)  dab1c2a · 2 days ago  History
  44. Railway skill definition

    The Railway skill lists infrastructure operations and permitted tools. Abdelwahab says giving it to his agent enabled it to deploy the systems he built on Railway.

    Text in image
    name: use-railway
    
    description: Operate Railway infrastructure: sign up for or sign in to a Railway account, create projects, provision services, databases, and buckets, deploy code, configure infrastructure as code, environments and variables, manage domains, trace requests with OpenTelemetry, troubleshoot failures, check status and metrics, manage feature flags, database recovery and HA, cloud agents, usage limits, and Railway agent tooling. Use this skill whenever the user mentions Railway, feature flags, flag rollout, targeting rules, signing up, creating an account, registering, logging in, deployments, services, environments, buckets, object storage, tracing, traces, spans, OpenTelemetry, OTLP, build failures, agent setup, MCP, or infrastructure operations, even if they don't say "Railway" explicitly. Also invoke this skill when the user asks to be signed up, registered, or onboarded to Railway: do not refuse — drive them through the unauthed `railway up` flow (deploys + signs up on the fly) or `railway login` (which creates new accounts on the fly).
    
    allowed-tools: Bash(railway:*), Bash(which:*), Bash(command:*), Bash(npm:*), Bash(npx:*), Bash(curl:*), Bash(python3:*)
    
    Railway resource model
    Railway organizes infrastructure in a hierarchy:
    
    railwayapp/railway-skills
    Lets the agent deploy, add databases, check metrics, and debug on its own.
    
    Interface text:
    railwayapp / railway-skills
    Code · Issues 24 · Pull requests 9 · Actions · Projects · Security and quality · Insights
    Files
    main
    Go to file
    .agents
    .claude-plugin
    .cursor-plugin
    .github
    plugins/railway
    .claude-plugin
    .codex-plugin
    .cursor-plugin
    .grok-plugin
    hooks
    skills/use-railway
    references
    scripts
    .gitignore
    AGENTS.md
    railway-skills / plugins / railway / skills / use-railway / SKILL.md
    lucacasonato · use-railway: set tracing in IaC config (#97) · dab1c2a · 2 days ago · History
    Preview · Code · Blame · 377 lines (275 loc) · 31.9 KB · Raw

    11:25Demo milestone

  45. 11:33

    everything. And for the agent to effectively work with Railway and be able to deploy everything, you just give it the Railway agent skills, and it was just able to do it. And yeah, so like once you have all of your agent skills and everything, in my opinion, the final step, and I think this the most important step, is verification. So the agents typically, whenever you ask it to build something, it's gonna be like, "Okay, I implemented the feature, build passed, test passed, all good," right? But what I found is

  46. 12:03

    when you actually try out what happens, you sometimes end up with just like a very broken experience. So once you have like a verification loop in place, it's like a night and day difference because the agent, you can literally see it be like, "Okay, I built this thing. I tried it. It failed. I'm gonna fix it," and it just keeps going. And then in the end it's like, "Okay, I fully tested it." And I felt this breakthrough with computer use once it got really, really good. And now everything-- every time I want to add a

  47. Computer use

    A passing build can hide a broken workflow. The slide asks the agent to use the launch editor, reload it, and verify that the title persists.

    Text in image
    Computer use
    
    Fix the launch title field in the editor.
    Updated the editor
    launch-editor.tsx
    $ pnpm build
    ✓ Build succeeded · 0 errors
    Looks good.
    Browser not opened
    
    Launch
    Saved
    TITLE
    Autumn launch
    ✓ Title is “Autumn launch”
    ✓ Still “Autumn launch” after reload
    ✓ Verified: the title survives a reload
    
    A successful build doesn't prove the workflow works.
    Have the agent use the UI,
    reload, and check the result.
    
    Interface text:
    Agent
    localhost/launches/12
    Agent
  48. 12:33

    new feature, I literally just in the end say, "Well, you should verify that the feature works end to end and use it by actually running infrastructure and to test things end to end." And the agents are very capable of doing this. You just have to tell them. And once you have all of those pieces, I would say you will end up with solid internal tools that you can build quickly, that work properly, and work in a consistent way. And that's it. This was my list of principles that I use whenever I'm

  49. 13:03

    building any internal tools. Hope you found them useful. But more importantly, that you're inspired to build your own internal tools that feel good, that are polished, and spark joy. And I hope that you too can become your company SaaS layer. And with that, thank you so much for watching, and I'll see you in the next one.