Components: Boundaries, CSS, TypeScript, and Theming

Bascik isolates every component at build time: it renames what a component declares and rewrites the strings that refer to it. Write a component as if it were the only one on the page, and follow the rules below so the rewrite can see everything. Requires the bascik skill.

What becomes a component

Code should look like tag names, not big blocks of HTML. A page that reads <site-header />, <home-hero />, <pricing-section>, <faq-list />, <site-footer /> tells a person or an agent what it is in five lines, and each tag opens a small file with its own CSS, IDs, and script. It is a balance: too few components give giant pages; too many give tiny files and values threaded through layers.

Split when:

1. The section has a job you can name. If you would call it "the pricing section" or "the signup form", it is <pricing-section> or <signup-form> in its own folder.
2. The markup repeats. Two or more cards, plans, or quotes with the same structure become one component with props.
3. The page or component is no longer readable at a glance. About 80 lines of page markup, or 120 in a component, is the limit audit-components.mjs uses.
4. It owns behavior. A script that controls some elements belongs in the component that holds them, next to its .ts.

Keep it whole when: