A shopper chooses a journal cover, adds pages, then changes the cover. The pages stay selected. Do they still fit?
For a small stationery or craft shop, that question belongs before checkout. A useful kit builder explains which chosen parts agree, which conflict, and which need more information. It also lets the buyer correct a choice without losing the rest of the kit.
This is an optional recipe in Part 2: Plan your app’s workflow. Overskill can be the place you describe and build that selection flow. Your output here is a clear set of kit rules, an explained draft selection, and a brief for the first version. The journal example is fictional: Pocket, Desk, Loop4 and Loop6 are invented labels, not measurements or proof that real products fit.
Try one change that should break the kit
Choose components
Changing a cover keeps the refill and divider you already chose. Conflicting and unknown selections stay visible until you change or remove them.
Use the complete static catalog and worked examples below if JavaScript is unavailable.
Missing required choices
- Interactive results will appear here.
Known conflicts
- Interactive results will appear here.
Unknown fields
- Interactive results will appear here.
Your current selection
| Slot | Selected component | Format | Binding |
|---|---|---|---|
| The static catalog below contains every component. | |||
Every declared comparison
A match in one column cannot cancel a conflict or unknown value in another. An unselected divider has no applicable divider comparisons.
| Rule | First value | Second value | Result and reason |
|---|---|---|---|
| The static rules below explain every comparison. | |||
Keep the exact draft
The JSON includes the selected IDs, catalog and rule versions, one unit of each chosen component, and all reasons. An incomplete or conflicting draft can be exported; it is not permission to buy or a compatibility guarantee.
Copy or select the visible text if saving a file is unavailable. No selection is sent anywhere. Leaving or reloading clears this local example; moving between its contents links keeps your work.
Rules and worked examples, with or without JavaScript
A complete selection needs a cover and refill. If a divider is chosen, compare cover/refill, cover/divider and refill/divider. Each pair needs equal format and equal binding. A blank required slot is missing; a selected component’s missing attribute is unknown. Keep each known conflict visible even when something else is missing or unknown. Decoration never changes those comparisons.
| Selection | Expected result | Reason |
|---|---|---|
| C-P6 + R-P6, no divider | Compatible under these rules | Pocket and Loop6 both match. |
| C-D4 + R-D6, no divider | Conflict | Desk matches; Loop4 and Loop6 do not. |
| C-D6 + R-DU, no divider | Unresolved | Both required IDs exist, but the refill’s binding is not supplied. |
| No cover + R-P6 + D-U4 | Conflict, missing and unknown together | The cover is missing; the divider’s format is unknown; Loop6 and Loop4 conflict. |
| Change C-P6 to C-D6 while R-P6 and D-P6 remain selected | Two format conflicts | Keep both Pocket selections visible. Changing the cover does not replace them. |
Inspect all 14 fictional components
| ID | Slot | Label | Format | Binding |
|---|---|---|---|---|
| C-P6 | cover | Pocket cover | Loop6 | |
| C-D4 | cover | Desk cover | Desk | Loop4 |
| C-D6 | cover | Desk cover | Desk | Loop6 |
| R-P6 | refill | Pocket pages | Loop6 | |
| R-D4 | refill | Desk pages — Loop4 | Desk | Loop4 |
| R-D6 | refill | Desk pages — Loop6 | Desk | Loop6 |
| R-DU | refill | Desk pages — binding not supplied | Desk | Not supplied |
| R-U6 | refill | Loop6 pages — format not supplied | Not supplied | Loop6 |
| D-P6 | divider | Pocket dividers | Loop6 | |
| D-D4 | divider | Desk dividers — Loop4 | Desk | Loop4 |
| D-D6 | divider | Desk dividers — Loop6 | Desk | Loop6 |
| D-U4 | divider | Loop4 dividers — format not supplied | Not supplied | Loop4 |
| X-CORAL | decoration | Coral decoration | Not used | Not used |
| X-TEXT | decoration | <b>Night</b> & "Stars" | Not used | Not used |
A small tool for a better first prompt
Make your app brief.
Name the person, the job, and the information. Leave with a prompt that includes permissions and a definition of done.
Write and copy your brief without an account. Start build saves it in Overskill and continues through sign-in if needed. Your account's usual access and credit requirements apply when building. Avoid adding private information.
Start with cover C-P6, refill R-P6, and divider D-P6. All three use Pocket and Loop6, so they agree under the example’s rules. Now change only the cover to C-D6, which uses Desk and Loop6.
The Pocket refill and divider should remain selected. Both now conflict with the cover’s format; the binding still matches. An explanation such as “Cover uses Desk; refill uses Pocket” tells the buyer what to correct. Quietly replacing the pages would hide what happened to their choice.
Remove the divider explicitly. That removes its conflict, but the Pocket refill still conflicts with the Desk cover. Change the refill to R-D6 and the two required parts agree again. Add D-D6 if you want a matching divider. Changing the decoration should leave every fit result unchanged.
This sequence is more useful than testing only the first successful combination. It checks whether the buyer can recover after changing their mind.
Decide what makes a complete, compatible kit
This example has four slots. A cover and refill are required; a divider and decoration are optional. Each chosen structural pair must match on both format and binding: cover with refill, cover with divider, and refill with divider. Decoration has no structural rules.
A chosen divider matters even though it is optional. Once included, it must fit. A required slot being filled does not mean the kit passes, and a shared display name does not identify the component. The two Desk covers deliberately have different IDs and bindings.
Scroll horizontally to compare all columns.
| Selection | Expected explanation | Useful next action |
|---|---|---|
| C-P6 + R-P6, no divider | Pocket and Loop6 both match | Inspect the draft selection |
| C-D4 + R-D6 | Desk matches; Loop4 and Loop6 conflict | Change an explicitly chosen part |
| C-D6 + R-P6 | Loop6 matches; Desk and Pocket conflict | Choose the intended format |
| C-D6 + R-DU | Refill binding is not supplied | Obtain the missing specification |
| No cover + R-P6 + D-U4 | Cover missing; divider format unknown; refill/divider bindings conflict | Resolve all three reasons |
The last row is deliberately untidy. Showing only “Choose a cover” would conceal the binding conflict already present between the refill and divider. Showing only “Conflict” would conceal the missing cover and unknown format. Keep those reasons visible together.
The summary uses conflict before unresolved information, then incomplete selection, then compatible. That label is a shortcut; the details remain the answer. An unknown attribute is not a wildcard or a match.
Give the buyer a draft they can inspect
The draft selection should show exact component IDs, their labels and attributes, the catalog and rule versions, and each comparison. Include one unit of every selected component. Leave a blank slot blank and retain an unknown attribute as unknown.
You can inspect or copy a draft even when it is incomplete or conflicting. That is useful when someone needs to answer “Which binding is this refill?” before choosing again. A downloaded draft is not an order, stock hold, reservation, or statement that the kit is purchasable.
Use the visible JSON when you need to compare the saved file with the selection on screen. If a download is unavailable, select or copy the visible draft text. A changed selection needs a changed draft; an old successful result must not remain beside new choices.
A real store may need dimensions, attachment spacing, tolerances, quantities, or supplier evidence that this invented example does not contain. Define those rules with someone who knows the products. Passing the two example attributes alone cannot establish physical fit.
Describe the first version in Overskill
Start with a public selection page that ends at an explained draft. Let shoppers read the intended component catalog and change their own local choices. Let only authorized staff change the shared catalog and compatibility rules. Keep private supplier information out of the public catalog.
The e-commerce starting page is a broader place to plan a storefront. For this workflow, use a brief that names the four slots, both matching rules, retained choices, unknown information and staff-only rule changes. A template description alone does not establish that a particular kit check works.
Use the kit-specific brief to prepare these instructions.
Review the generated brief and edit its input fields for your products, then choose Start build. Copy brief is a secondary way to keep the same instructions. Supply your component catalog and the expected examples separately; opening a brief link does not import a file or the draft selection automatically.
Keep checkout outside the first version. If you later add a cart, independently check the current catalog, rules, quantities, availability and price at the point that accepts the order. A result displayed in a visitor’s browser is not authority to create an order. Use the catalog-filter example for finding an individual matching variant; use this kit flow when several chosen components must agree.
Check the choices that a happy-path demo misses
Before sharing your app, repeat the cover-change sequence and the five table rows. Try the two same-named Desk covers, a blank required slot, an unknown attribute and an incompatible optional divider. The selected IDs and all reasons should stay visible. Clearing one slot must not clear another; reset should deliberately clear all four.
Use the page with a keyboard and on a phone. Check that the conflict and recovery are readable without relying on color, and that moving between article sections retains the current work. Leaving or reloading this example starts a new empty selection. Verify the actual saved draft against the current visible text, including an unresolved case.
Finally, test the access rules in the app you build: a shopper can use the intended public selection flow but cannot edit the shared catalog or rules. If you later save private customer drafts, test a second customer’s direct link, list and export access. Private-record checks cover that separate task. Keep any failed or untested case on the launch checklist until you have an observed result.