01
A component owns one job
Use components to make page regions understandable: headers, cards, resource rows, or focused controls. Do not create files for every wrapper element.
- Give props precise readonly interfaces.
- Keep data validation at the route or server boundary.
- Use a and button elements according to their native role.
02
Keep interaction local
When a small control needs client behavior, extract it from the static layout. A focused resumable control keeps the rest of the route static.
- Put the $ suffix only on the event that needs it.
- Capture only serializable values, Signals, stores, or Actions.
- Never capture database clients, secrets, or DOM nodes.
03
Design for accessibility in the initial output
Server rendering is not an accessibility substitute. Use headings in order, associated labels, visible focus, descriptive links, and aria-live only for changing status.
- Test keyboard navigation without JavaScript.
- Do not communicate state only through color.
- Make errors visible near the relevant control.
Static component · framework-nativeTypeScript
interface ResourceCardProps {
readonly title: string
readonly summary: string
readonly href: string
}
export function ResourceCard({ title, summary, href }: ResourceCardProps) {
return (
<article>
<h2><a href={href}>{title}</a></h2>
<p>{summary}</p>
</article>
)
}PRACTICE LAB
Prove the behavior.
Refactor one page into three semantic components. Confirm the route still has no client JavaScript.