Import and render document-level CSS in Rango apps using Vite ?url imports and precedence-managed stylesheet links.
npx skills add https://github.com/rangojs/rango --skill css-rangojs
Please help me install this Agent Skill. Skill: css Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/css Command: npx skills add https://github.com/rangojs/rango --skill css-rangojs
<head>, and unmanaged stylesheet links can cause flashes of unstyled content or dedup conflicts. This Skill explains the correct pattern for loading document-level CSS in a Rango app. ## Core Features & Use Cases - Document stylesheet pattern: Import CSS with Vite's ?url suffix and render it via a <link rel="stylesheet"> with a precedence attribute, opting into React 19's managed stylesheet model (deduped by href, ordered by precedence, loaded before paint). - Import strategy guidance: Explains when to use ?url + <link> versus bare side-effect imports, which suit component-local CSS loaded with client chunks. - Cross-app navigation behavior: Clarifies that host-router cross-app navigation is a full document load, so each app's document CSS is re-established independently with no coordination needed. - Use Case: When building the root document.tsx of a Rango app, use this Skill to wire your global stylesheet into the <head> correctly and avoid unstyled content flashes. ## Quick Start Ask the AI to add a global stylesheet to your Rango app's Document component using the ?url import and precedence-managed link pattern.High-intent search queries and answers about installing and using this skill.
Import the CSS file in your document.tsx with Vite's ?url suffix, then render a <link rel="stylesheet"> with the href set to that URL and a precedence attribute. This opts into React 19's managed stylesheet model, which loads the sheet before paint.
Use ?url plus an explicit <link precedence> for document-level CSS, since side-effect imports are not guaranteed to appear in the initial streamed <head> during SSR. Bare side-effect imports are fine for component-local CSS that loads with its client chunk.
The precedence attribute opts the link into React 19's managed stylesheet model. React deduplicates the stylesheet by href, orders it relative to other managed sheets by precedence value, and ensures it loads before paint to avoid unstyled content.
No. Cross-app navigation under a host router is a full document load, triggered by an X-RSC-Reload response on app switch. Each app's document, including its stylesheets, is re-established by its own load, so apps cannot interfere with each other's CSS.
A flash of unstyled content happens when the stylesheet is not loaded before paint, typically from unmanaged links or side-effect imports missing the initial streamed head. Rendering an explicit <link rel="stylesheet"> with a precedence attribute ensures React loads it before paint.
BasitShafiqExtract UI components from a main application into a sandbox environment.
whimzyLiveConfigure Tailwind CSS v4 themes with CSS variables and dark mode.
ChristopherAlphonseConfigures a Next.js proxy.ts with strict CSP and per-request nonce.
artmsilvaAudit Stitches RSC components for React Server Components compatibility issues.