{"course":{"slug":"building-apps-with-ai","title":"Building Apps with AI","url":"https://addaly.com/learn/building-apps-with-ai","level":"beginner","track":"build"},"lesson":{"slug":"slicing-a-feature-into-checkable-steps","title":"Slicing a feature so every step is checkable","url":"https://addaly.com/learn/building-apps-with-ai/slicing-a-feature-into-checkable-steps","position":12,"of":87,"minutes":8,"answer":"Cut vertically through every layer in slices you can check in two minutes, prove the plumbing with a trivial walking skeleton first, and commit at each working step.","keyIdea":"Cut vertically through every layer in slices you can check in two minutes, prove the plumbing with a trivial walking skeleton first, and commit at each working step."},"body":{"format":"markdown","text":"## The wrong cut and the right one\n\nThere are two ways to divide a feature, and one of them wastes a week.\n\nThe **horizontal** cut builds a layer at a time. All the database tables first. Then all the API routes. Then all the screens. It feels organised. It is also three days before anything works, and when something is wrong you have three days of unverified code to search through.\n\nThe **vertical** cut takes the thinnest possible path through every layer and makes it work end to end. One form, one route, one table, one screen showing the result. It is ugly, incomplete and running, and everything after it is an addition to something you have already seen work.\n\nWith generated code the vertical cut is not merely preferable. It is the only one where you have any idea what is happening.\n\n## The walking skeleton\n\nThe first slice of any project is deliberately trivial and complete:\n\n> A page at `/book` with one field. Type a name, press save, the name is written to the database, and the page below lists every name saved so far.\n\nNo validation, no styling, no rules. Fifteen minutes of work, and when it runs you have proved the whole chain: the browser reaches the server, the server reaches the database, the data comes back, the deployment works. Every bug after this is in a feature, not in the plumbing, and that distinction saves hours.\n\nMost people skip this and ask for the whole booking system. Then something does not work and they cannot tell whether the problem is the overlap rule or the database connection.\n\n## Slices for a real feature\n\nTake booking with overlap checking. Six slices, each testable in under two minutes:\n\n1. The form renders with the right fields. Nothing saves. *Check: open it on your phone.*\n2. Submitting writes a row. *Check: look in the database.*\n3. The list below shows saved bookings, newest first. *Check: submit two.*\n4. Submitting an overlapping slot is rejected with a specific message. *Check: try to double-book on purpose.*\n5. Submitting with an empty name is rejected before it reaches the database. *Check: submit nothing.*\n6. A booking can be cancelled, and a cancelled slot becomes bookable again. *Check: cancel one, rebook it.*\n\nSlice 4 is the one that carries your business. Notice it arrives fourth, on top of three things already known to work, which means when it misbehaves there is exactly one place to look.\n\n## The two-minute rule\n\nIf you cannot check a slice in two minutes, it is too big. Split it.\n\nThis is not a productivity trick. It is about where the bug can be hiding. A change you can verify in two minutes has a search space of one change. A change you verify at the end of an afternoon has a search space of an afternoon, and the model does not remember which part it was less sure about.\n\n## Commit at every green step\n\nEach slice that works gets a commit, with a message saying what is now true. Six slices, six commits, and if slice five goes badly you lose slice five.\n\nThis is where the git block earns itself. Slicing and committing are the same habit seen from two sides: small verified steps with a way back to each one.\n\n> Figure: Booking with overlap checking, in six slices. Timeline: Slice 1, The form renders with the right fields. Nothing saves. Check: open it on your phone.; Slice 2, Submitting writes a row. Check: look in the database.; Slice 3, The list below shows saved bookings, newest first. Check: submit two.; Slice 4, An overlapping slot is refused with a specific message. Check: double-book on purpose.; Slice 5, An empty name is refused before it reaches the database. Check: submit nothing.; Slice 6, A cancelled slot becomes bookable again. Check: cancel one, rebook it.. The rule that carries your business arrives fourth, on top of three things already known to work. When it misbehaves there is exactly one place to look.\n\n## Saying it to the tool\n\n```\nWe are building bookings in six steps. Do step 1 only.\n\nStep 1: a page at /book with a form — customer name, stylist\ndropdown (read stylists from the database), date, time.\nOn submit, do nothing yet. No validation, no styling beyond\nTailwind defaults.\n\nStop after this. Do not create API routes or database writes.\n```\n\nThe last line does the work. Left alone, an agent asked for a form will helpfully build the whole feature, and you are back to reviewing an afternoon of code in one lump.\n\n## When to break the rule\n\nSmall, self-contained, obviously-correct work does not need slicing. A static About page. A colour change across a component. Adding a field that nothing depends on.\n\nThe test is whether being wrong would be visible immediately. If yes, take the whole thing in one go. If a mistake could sit quietly for a week (anything touching money, permissions, or data that must survive) slice it, however tedious that feels on a Friday afternoon."},"check":{"question":"Why is a vertical slice better than building the database layer, then the API, then the interface?","options":[{"text":"It produces less code overall, so there is less to review.","correct":false,"tempting":"Assumes the total shrinks; the same code gets written either way, and the difference is when you find out it is wrong."},{"text":"It matches how the model generates code, so fewer files are touched per request.","correct":false,"tempting":"Describes a tooling convenience rather than the reason; agents happily generate layers, and file count is not the risk."},{"text":"Each slice proves the whole chain works, so a later failure has one new change to blame rather than three days of unverified work.","correct":true},{"text":"Layered building tends to produce a worse architecture.","correct":false,"tempting":"Confuses sequencing with structure; the same architecture can be reached either way, and the problem is diagnostic, not aesthetic."}]},"prev":{"slug":"the-data-model-before-the-screens","title":"The data model comes before the screens","url":"https://addaly.com/learn/building-apps-with-ai/the-data-model-before-the-screens"},"next":{"slug":"acceptance-checks-written-first","title":"Writing the acceptance checks before the code","url":"https://addaly.com/learn/building-apps-with-ai/acceptance-checks-written-first"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'Slicing a feature so every step is checkable', in Building Apps with AI. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/building-apps-with-ai/slicing-a-feature-into-checkable-steps (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Slicing a feature so every step is checkable","courseTitle":"Building Apps with AI","module":{"index":2,"slug":"saying-what-you-want","title":"Saying what you want, precisely enough"},"answer":null,"keyIdea":"Cut vertically through every layer in slices you can check in two minutes, prove the plumbing with a trivial walking skeleton first, and commit at each working step.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure","figure":{"type":"timeline","title":"Booking with overlap checking, in six slices","events":[{"when":"Slice 1","what":"The form renders with the right fields. Nothing saves. Check: open it on your phone."},{"when":"Slice 2","what":"Submitting writes a row. Check: look in the database."},{"when":"Slice 3","what":"The list below shows saved bookings, newest first. Check: submit two."},{"when":"Slice 4","what":"An overlapping slot is refused with a specific message. Check: double-book on purpose."},{"when":"Slice 5","what":"An empty name is refused before it reaches the database. Check: submit nothing."},{"when":"Slice 6","what":"A cancelled slot becomes bookable again. Check: cancel one, rebook it."}],"caption":"The rule that carries your business arrives fourth, on top of three things already known to work. When it misbehaves there is exactly one place to look."},"alt":"Figure: Booking with overlap checking, in six slices. Timeline: Slice 1, The form renders with the right fields. Nothing saves. Check: open it on your phone.; Slice 2, Submitting writes a row. Check: look in the database.; Slice 3, The list below shows saved bookings, newest first. Check: submit two.; Slice 4, An overlapping slot is refused with a specific message. Check: double-book on purpose.; Slice 5, An empty name is refused before it reaches the database. Check: submit nothing.; Slice 6, A cancelled slot becomes bookable again. Check: cancel one, rebook it.. The rule that carries your business arrives fourth, on top of three things already known to work. When it misbehaves there is exactly one place to look."}},"blocks":[{"t":"h2","id":"the-wrong-cut-and-the-right-one","runs":[{"text":"The wrong cut and the right one"}]},{"t":"p","runs":[{"text":"There are two ways to divide a feature, and one of them wastes a week."}]},{"t":"p","runs":[{"text":"The "},{"text":"horizontal","b":true},{"text":" cut builds a layer at a time. All the database tables first. Then all the API routes. Then all the screens. It feels organised. It is also three days before anything works, and when something is wrong you have three days of unverified code to search through."}]},{"t":"p","runs":[{"text":"The "},{"text":"vertical","b":true},{"text":" cut takes the thinnest possible path through every layer and makes it work end to end. One form, one route, one table, one screen showing the result. It is ugly, incomplete and running, and everything after it is an addition to something you have already seen work."}]},{"t":"p","runs":[{"text":"With generated code the vertical cut is not merely preferable. It is the only one where you have any idea what is happening."}]},{"t":"h2","id":"the-walking-skeleton","runs":[{"text":"The walking skeleton"}]},{"t":"p","runs":[{"text":"The first slice of any project is deliberately trivial and complete:"}]},{"t":"quote","runs":[{"text":"A page at "},{"text":"/book","code":true},{"text":" with one field. Type a name, press save, the name is written to the database, and the page below lists every name saved so far."}]},{"t":"p","runs":[{"text":"No validation, no styling, no rules. Fifteen minutes of work, and when it runs you have proved the whole chain: the browser reaches the server, the server reaches the database, the data comes back, the deployment works. Every bug after this is in a feature, not in the plumbing, and that distinction saves hours."}]},{"t":"p","runs":[{"text":"Most people skip this and ask for the whole booking system. Then something does not work and they cannot tell whether the problem is the overlap rule or the database connection."}]},{"t":"h2","id":"slices-for-a-real-feature","runs":[{"text":"Slices for a real feature"}]},{"t":"p","runs":[{"text":"Take booking with overlap checking. Six slices, each testable in under two minutes:"}]},{"t":"ol","start":1,"items":[[{"text":"The form renders with the right fields. Nothing saves. "},{"text":"Check: open it on your phone.","i":true}],[{"text":"Submitting writes a row. "},{"text":"Check: look in the database.","i":true}],[{"text":"The list below shows saved bookings, newest first. "},{"text":"Check: submit two.","i":true}],[{"text":"Submitting an overlapping slot is rejected with a specific message. "},{"text":"Check: try to double-book on purpose.","i":true}],[{"text":"Submitting with an empty name is rejected before it reaches the database. "},{"text":"Check: submit nothing.","i":true}],[{"text":"A booking can be cancelled, and a cancelled slot becomes bookable again. "},{"text":"Check: cancel one, rebook it.","i":true}]]},{"t":"p","runs":[{"text":"Slice 4 is the one that carries your business. Notice it arrives fourth, on top of three things already known to work, which means when it misbehaves there is exactly one place to look."}]},{"t":"h2","id":"the-two-minute-rule","runs":[{"text":"The two-minute rule"}]},{"t":"p","runs":[{"text":"If you cannot check a slice in two minutes, it is too big. Split it."}]},{"t":"p","runs":[{"text":"This is not a productivity trick. It is about where the bug can be hiding. A change you can verify in two minutes has a search space of one change. A change you verify at the end of an afternoon has a search space of an afternoon, and the model does not remember which part it was less sure about."}]},{"t":"h2","id":"commit-at-every-green-step","runs":[{"text":"Commit at every green step"}]},{"t":"p","runs":[{"text":"Each slice that works gets a commit, with a message saying what is now true. Six slices, six commits, and if slice five goes badly you lose slice five."}]},{"t":"p","runs":[{"text":"This is where the git block earns itself. Slicing and committing are the same habit seen from two sides: small verified steps with a way back to each one."}]},{"t":"h2","id":"saying-it-to-the-tool","runs":[{"text":"Saying it to the tool"}]},{"t":"code","lang":"","label":"Text","text":"We are building bookings in six steps. Do step 1 only.\n\nStep 1: a page at /book with a form — customer name, stylist\ndropdown (read stylists from the database), date, time.\nOn submit, do nothing yet. No validation, no styling beyond\nTailwind defaults.\n\nStop after this. Do not create API routes or database writes."},{"t":"p","runs":[{"text":"The last line does the work. Left alone, an agent asked for a form will helpfully build the whole feature, and you are back to reviewing an afternoon of code in one lump."}]},{"t":"h2","id":"when-to-break-the-rule","runs":[{"text":"When to break the rule"}]},{"t":"p","runs":[{"text":"Small, self-contained, obviously-correct work does not need slicing. A static About page. A colour change across a component. Adding a field that nothing depends on."}]},{"t":"p","runs":[{"text":"The test is whether being wrong would be visible immediately. If yes, take the whole thing in one go. If a mistake could sit quietly for a week (anything touching money, permissions, or data that must survive) slice it, however tedious that feels on a Friday afternoon."}]}],"check":{"question":[{"text":"Why is a vertical slice better than building the database layer, then the API, then the interface?"}],"options":[{"text":[{"text":"It produces less code overall, so there is less to review."}],"correct":false,"tempting":[{"text":"Assumes the total shrinks; the same code gets written either way, and the difference is when you find out it is wrong."}]},{"text":[{"text":"It matches how the model generates code, so fewer files are touched per request."}],"correct":false,"tempting":[{"text":"Describes a tooling convenience rather than the reason; agents happily generate layers, and file count is not the risk."}]},{"text":[{"text":"Each slice proves the whole chain works, so a later failure has one new change to blame rather than three days of unverified work."}],"correct":true,"tempting":null},{"text":[{"text":"Layered building tends to produce a worse architecture."}],"correct":false,"tempting":[{"text":"Confuses sequencing with structure; the same architecture can be reached either way, and the problem is diagnostic, not aesthetic."}]}],"order":[3,1,0,2],"why":null},"prev":{"slug":"the-data-model-before-the-screens","title":"The data model comes before the screens","minutes":9},"next":{"slug":"acceptance-checks-written-first","title":"Writing the acceptance checks before the code","minutes":8}}}