Craft, without another costume
Better interaction judgment. The same Thorbis grammar.
What changes in the way we work
References earn a place by answering a concrete question. What makes a payment's state truthful? What keeps a button steady while it saves? What happens when a tech returns to an interrupted task? The useful answer becomes an example under its existing owner, not another design system.
The strongest applications here are precise feedback, interruption-safe interaction, explicit component states, stable typography, and evidence-based review. Workbench remains press-only. Evidence remains motionless. Showcase may explain; it may not disguise.
Some advice is deliberately rejected: ornamental blur, shadow-only control rims, copied animation constants, disabled zoom, and wholesale component-kit adoption. An unavailable article contributes no technical rule, and a public syllabus is not a completed course.
All 26 sources
Each source has its own address, observation, Thorbis application, refusal, and review scope.
Applied to the eleven owning skills
Original Thorbis worked examples. These are not claims of implemented behavior or completed verification.
Make the task easier, not the screen busier
A feature can look complete while the dispatcher still has to reconstruct context or wait for unrelated content.
Start from one person, interruption, and completed task. Keep the current job and its next action usable while optional evidence arrives. Treat the real constraint as part of the brief, not something polished away afterward.
Thorbis example. For assigning a tech, show the job, relevant availability, and the consequence of the assignment. Do not make the dispatcher traverse a marketing-style sequence or a new shell to finish a routine task.
Verify. Walk through the task with representative long and missing records. Check that the essential action remains understandable when optional content is slow or unavailable. Record the result rather than claiming a performance improvement without measurement.
Do not import. No additional shell, feature hero, framework migration, or new dependency. Keep the approved surface role.
Open the product skill · Evidence: Design Engineer Principles; How we think about design; Component Architecture for React Server Components
Immediate acknowledgment is not confirmed success
A fast animation can falsely tell a person that money moved, a message arrived, or an assignment was saved.
Distinguish initiation, pending work, confirmed outcome, failure, and uncertain outcome. Show what is known. A repeated request needs a deliberate recovery path, not a second untracked business action.
Thorbis example. Collect payment keeps its label while the request is pending. A timeout says the result is not yet known and provides a way to check it; it does not invite an unconditional second charge. Confirmation names the actual result.
Verify. Review pending, explicit rejection, timeout after submission, reconnect, and repeat activation. Confirm that copy does not claim settlement from mere request acceptance and that a recoverable draft is preserved.
Do not import. No optimistic completion for consequential work, invented delivery guarantee, or success decoration that hides uncertainty.
Open the resilience skill · Evidence: 7 Principles of Rich Web Applications; Philosophy; Web Interface Guidelines
Preserve the place as the collection grows
Large customer, property, and inspiration collections become expensive to navigate when every inspection loses the current place.
Treat filters, selected records, scroll, and Back behavior as part of the task. Loading a child or optional panel should not reset the whole collection. A saved reference includes enough context to be useful when revisited.
Thorbis example. Open a property from a filtered customer list and return to the same filter and position. On the inspiration wall, reserve the media footprint and retain source credit even when the preview is unavailable.
Verify. Try refresh, Back and Forward, a direct record link, an empty result, a failed preview, and a long collection. Check that late data does not overwrite a draft or move the action under the pointer.
Do not import. No unbounded eager media, private information in shareable URLs, or a local-only storage promise borrowed from Copper.
Open the ecosystem skill · Evidence: 7 Principles of Rich Web Applications; Component Architecture for React Server Components; Philosophy; Copper
A control keeps its meaning through every state
A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise.
Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path.
Thorbis example. Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it.
Verify. Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion.
Do not import. No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017.
Open the ui skill · Evidence: Web Interface Guidelines; Invisible Details; components.build; Details that make interfaces feel better
Transfer the intent, not the desktop gesture
An interaction that works with a precise pointer or modifier key may be unusable for a tech holding a phone.
Preserve the record and task while adapting the visible action path to the device. Use the existing native owner for target sizing, safe areas, focus, and host behavior; no critical action relies only on hover or a hidden gesture.
Thorbis example. A field photo remains attached to the same job when the tech changes orientation or returns from another app. The visible capture action and retry path remain available without discovering a desktop shortcut.
Verify. Check one-handed use, software keyboard opening, text enlargement, orientation, focus visibility, and reduced motion on the relevant device. Keep permission refusal and return-from-interruption states in the review.
Do not import. No desktop hover contract on a phone, blocked zoom, silent clipboard access, or unverified claim that a web imitation is native behavior.
Open the native skill · Evidence: Web Interface Guidelines; Design Engineer Principles; Devouring Details
Motion explains the product; it does not become the product
An impressive effect can consume attention without helping a contractor understand what Thorbis does.
Name the product idea a Showcase scene explains. Use representative trade content, keep the next action clear, and compare against a static explanation. Make animation optional to comprehension and task completion.
Thorbis example. A single scene can explain how a completed job becomes an invoice. It should not hide the invoice behind a long sequence, invent product capabilities, or turn routine billing into a celebratory animation.
Verify. Check the initial viewport, static and reduced-motion alternatives, readable copy, reserved media geometry, and the real cost of any proposed asset. Record license and dependency review before reuse.
Do not import. No effect collection imported as a style system, no shaders in the workbench, and no made-up conversion or performance evidence.
Open the cinematic skill · Evidence: You Don't Need Animations; React Bits Pro; Design Engineering at Vercel; animations.dev
Frequent work stays immediate; allowed motion can be interrupted
A small delay repeated through a working day becomes friction, and a transition that restarts from the wrong position disconnects feedback from input.
Apply the existing profile first: Workbench is press-only, Evidence has no motion, and other profiles remain constrained by their owner. Where a transition is already permitted, preserve continuity and the state footprint when input interrupts it.
Thorbis example. Command-menu selection follows the key immediately. A permitted popover opens from its trigger and survives open-close-open without snapping, losing focus, or changing the action label.
Verify. Repeat the interaction rapidly, switch between input methods, and test reduced motion. Compare with the nonanimated version at ordinary task speed. Use existing tokens rather than copying durations or curves from an article.
Do not import. No row stagger in routine work, delayed keyboard highlights, ornamental blur, minimum success delay, or automatic spring-library adoption.
Open the motion skill · Evidence: You Don't Need Animations; 7 Practical Animation Tips; Train Your Judgement; Details that make interfaces feel better
Use color to clarify state, not replace it
A borrowed visual trick can weaken contrast or make a state readable only by its color.
Keep semantic roles and Thorbis tokens in charge. Inspect state words, marks, and control edges together in both themes. External suggestions for shadows, smoothing, and image outlines are evidence to evaluate, not a new palette.
Thorbis example. A failed invoice action has an understandable error and a recovery action; it is not merely a red icon. A rounded input retains the real rim required by D-017 rather than losing its boundary on a similar-toned surface.
Verify. Review focus, selected, disabled, pending, and error states in light, dark, and forced-colors conditions. Check contrast and meaning separately from whether the screenshot feels subtle.
Do not import. No second accent, literal source colors, missing control rim, or ornamental gradient and blur imported from a reference.
Open the color skill · Evidence: Web Interface Guidelines; Details that make interfaces feel better; components.build
Keep operational text steady and unambiguous
Changing digits, shifting labels, and brittle wrapping make money and status harder to inspect.
Evaluate numeric alignment where amounts are compared, stable action labels during requests, and wrapping with real content. Treat optical adjustments as controlled system decisions. Keep the existing font families and semantic type roles.
Thorbis example. An invoice comparison aligns changing amounts without hiding their currency or precision. A long property name wraps without displacing the next action. Save remains the action; the adjacent status explains what happened.
Verify. Try zero, negative and large amounts, long names, missing values, fallback fonts, text expansion, and browser zoom. Compare readability at actual size rather than approving a magnified specimen alone.
Do not import. No blanket balanced wrapping on data rows, copied display face, custom page-local type scale, or status copy that claims more than the system knows.
Open the type skill · Evidence: Details that make interfaces feel better; Web Interface Guidelines; Invisible Details
Make invalid combinations difficult to express
Independent loading, success, and error flags can contradict each other; presentation and business logic become tangled as a component grows.
Choose an explicit state model and a semantic composition API. Reuse the approved primitives, keep domain operations outside them, and locate loading boundaries according to the work they protect. Documentation names which variants actually ship.
Thorbis example. A payment dialog composes an approved trigger, content, fields, and actions around a domain-owned operation. The button receives one coherent request state, not several competing booleans and a private set of colors.
Verify. Exercise each valid state and transition, keyboard and focus behavior, controlled and uncontrolled contracts where supported, server-rendered output, and slow or missing data. Check provenance and license before source adoption.
Do not import. No arbitrary color escape hatch, duplicate component kit, unregistered dependency, or migration from Astro merely because a source uses RSC.
Open the composition skill · Evidence: React handbook; components.build; Component Architecture for React Server Components; shadcncraft
Close the loop with evidence, not the word polished
Vague design requests produce repeated subjective revisions and hide which parts of the result were actually checked.
A review records the person and task, the observed defect, the owning rule, the smallest correction, and its verification. Preserve source access limits. Turn repeated feedback into a better existing default rather than another detached instruction file.
Thorbis example. Instead of make the button premium, record that its pending state moves the label, identify the UI owner, compare the corrected state under the same content, and attach the relevant checks and remaining uncertainty.
Verify. Separate a source that was read from a demo that was exercised. Separate a passing content test from a browser check, and a committed branch from a deployed release. Report failed and skipped checks explicitly.
Do not import. No fabricated research, inferred paid lesson content, unmeasured uplift claim, or declaring work live because a commit exists.
Open the tracking skill · Evidence: Agents with Taste; Train Your Judgement; Developing Taste; How we think about design; Design Engineer Principles