Product surfaces
SaaS and operations
Prioritize repeatable workflows, scan speed, stable navigation, predictable controls, and dense but organized information. Preserve a product spine of user input or context, the real working state, a visible result or transformation, and the next action. On a marketing front door, show authentic interface or output proof early instead of relying only on benefit copy. Use restrained styling, aligned data, and explicit states. Avoid marketing-scale type and decorative card walls inside the tool.
Commerce and product detail
Make the actual product inspectable in the first viewport or first natural scroll. Preserve an early merchandising spine: product name, price or plan, meaningful variants or flavor details, availability, fulfillment, returns, and primary purchase or subscription action. An expressive image-led hero may create appetite, but it must lead into concrete products rather than an extended brand narrative. Do not let atmospheric or generated imagery replace SKU evidence, product comparison, or buying states.
Editorial
Prioritize content rhythm, reading measure, authorship, date or issue context, authored image treatment, and distinctive but navigable composition. Expressiveness may be higher, but semantics and responsive reading order remain fixed constraints.
Portfolio and studio
Preserve identity, role or capability, selected work, the creator's real contribution, process or outcome evidence, and a contact or commissioning path. Let projects use varied media rhythm instead of equal cards. Do not invent client names, results, awards, or responsibilities, and do not let a manifesto postpone the work beyond the first natural scroll.
Data and analytics
Start from the user question and decision, not the chart type. Preserve comparison, units, filters, data freshness, and drill-down context. Use visual density deliberately and provide table or text alternatives.
Mobile application
Follow platform navigation and input conventions, account for safe areas and keyboards, and keep primary actions reachable. Do not transplant desktop hover behavior or wide dashboard structure.
Event and conference
Preserve the event name, date, location or remote format, audience, program or tracks, and registration path. Show schedule, speakers, sponsors, prize figures, and capacity only when supplied or clearly marked as sample content. Use motion and media to express the event character without hiding practical attendance information.
Hospitality, food, and place
Preserve the real place, menu, room, service, or experience; location; meaningful options; availability or hours when supplied; and a booking, reservation, or ordering path. Atmosphere should make the subject desirable while photography, pricing, and logistics remain inspectable. Never generate venue imagery and present it as the actual property without disclosure.
Campaign and brand
Use the real brand, offer, place, person, object, or product as a first-viewport signal. A hero can be expressive but must leave evidence of the next section. Avoid split card heroes and generic abstract decoration.
Stack rules
- Reuse the repository's framework, router, state system, CSS strategy, component library, and icon library.
- Prefer framework-supported image, font, metadata, routing, and error primitives.
- Keep Server and Client Component boundaries narrow in Next.js.
- Preserve SSR and hydration safety; access browser APIs only in client effects or event handlers.
- Use semantic HTML and CSS before adding JavaScript for layout or disclosure.
- Add a dependency only when it solves a material domain problem or matches an existing project convention.
Consult catalog.stack-guides.json for focused implementation checks. Stack guides never authorize package installation or command execution.