What is the difference between global and component-scoped styles?

Global styles apply across the entire app, while component-scoped styles only affect their own component. Prefer globals sparingly and use component-scoped styles by default.

Where should global styles be placed in Next.js?

Typically in _app.tsx or _document.tsx, or inside a top-level Layout, using a block to define tokens and base rules.

How do I add a one-off global selector safely?

Place the selector in a small, clearly commented block, keep the selector narrowly scoped, and explain its necessity to future maintainers.

styled-jsx-global

npx machina-cli add skill andireuter/skills-webapp/styled-jsx-global --openclaw

Files (1)

SKILL.md

1.1 KB

styled-jsx Global Styles Skill

Use styled-jsx global styling responsibly.

Rules

Prefer component-scoped styles. Use global styles only when truly global.
Prefer CSS variables for tokens (color, spacing, typography) over global tag styling.
Avoid heavy global resets unless the project already uses them.
If adding a one-off global selector, keep it narrow and well-commented.

Output expectations

Create/modify:
- src/pages/_app.tsx or src/pages/_document.tsx (Next.js) OR
- a top-level Layout component OR
- the requested file
Include a short explanation of what is global and why.

Patterns

Global tokens:

:root { --color-bg: ...; --space-2: ...; }

Global typography:
```
body { font-family: ...; }
```

One-off escape hatch:

<style jsx global>{`
  .third-party-class { ... }
`}</style>

Source

git clone https://github.com/andireuter/skills-webapp/blob/main/skills/styled-jsx-global/SKILL.mdView on GitHub

Overview

styled-jsx-global lets you apply truly global CSS with <style jsx global>. It’s useful for resets, typography defaults, and global tokens, but should be used sparingly in favor of component-scoped styles. Emphasize CSS variables for tokens and keep one-off global selectors narrowly scoped and well-commented.

How This Skill Works

Place a global style block in Next.js pages or a top-level Layout using <style jsx global>{`...`}</style>. Define tokens in :root as CSS variables, apply base typography to body, and add small, explicit one-off global selectors when necessary. Prioritize component-scoped styles and document why global styles are required.

When to Use It

When you need an app-wide reset or typography defaults to ensure consistency
When introducing CSS variables for global tokens (colors, spacing, typography)
When integrating a third-party component or library that requires a global selector
When adding global styles in Next.js via _app.tsx or a top-level Layout
When refactoring existing global CSS and migrating to scoped styles with cautious one-offs

Quick Start

Step 1: Identify what needs to be global (tokens, typography, one-off selectors)
Step 2: Add a :root block with CSS variables and set base typography in a global <style jsx global>
Step 3: Use narrowly-scoped one-off globals with clear comments when necessary

Best Practices

Prefer component-scoped styles; use global styles only for truly global concerns
Define tokens in :root using CSS variables and reference them throughout
Avoid heavy resets; apply only what’s necessary and document the rationale
Keep one-off global selectors narrow and well-commented
Organize global blocks in dedicated sections or files for maintainability

Example Use Cases

Define :root { --color-bg: #fff; --color-text: #333; --space-2: 8px; } and apply body { font-family: var(--font-sans); }
In _app.tsx, add <style jsx global>{` :root { ... } body { margin: 0; } `}</style> to establish app-wide tokens and resets
Use a one-off global for a third-party class: .third-party-class { box-sizing: border-box; } with a clear comment
Apply global typography defaults once: body { font-family: var(--font-sans); color: var(--color-text); }
Document a global override with a comment block explaining the purpose and scope

Frequently Asked Questions

Add this skill to your agents