Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

curiositech/css-in-js-architect

Name: css-in-js-architect
Author: curiositech

skills/css-in-js-architect/SKILL.md

npx skillsauth add curiositech/windags-skills css-in-js-architect

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

CSS-in-JS Architect

Build scalable, maintainable styling architectures with Tailwind v4, CSS Modules, design tokens, and modern CSS features like container queries and dynamic theming.

Decision Points

Architecture Choice Matrix

IF you need global utility classes + rapid prototyping:

THEN use Tailwind v4 with @theme directive
CRITERIA: High component reuse, atomic styling preferred, team familiar with utilities

IF you need component-scoped styles + CSS expertise:

THEN use CSS Modules with design token imports
CRITERIA: Complex component styling, name collision concerns, traditional CSS workflow

IF you have mixed requirements:

THEN use Tailwind for layout/spacing + CSS Modules for complex components
CRITERIA: Best of both worlds, different teams have different preferences

Token Implementation Decision Tree

Is this a multi-brand/white-label app?
├── YES → CSS custom properties with theme switching
│   ├── Static themes known at build? → @theme overrides
│   └── Dynamic themes from API? → Runtime CSS property updates
└── NO → Single theme
    ├── Need dark mode? → CSS custom properties with prefers-color-scheme
    └── Single theme only → Hardcoded values in @theme acceptable

Container vs Viewport Query Decision

IF component layout depends on its container size:

THEN use @container queries with container-type: inline-size
EXAMPLE: Card layouts, sidebar components, dashboard widgets

IF layout depends on device/viewport characteristics:

THEN use viewport media queries
EXAMPLE: App shell, navigation patterns, typography scaling

Failure Modes

1. Dark Mode Flash (FOUC)

Symptoms: White flash before dark theme loads, theme "jumps" on page load Detection Rule: If you see a brief light background before dark mode applies, you have FOUC Diagnosis: Theme detection/application happens after initial render Fix:

<script>
  // Inline script in <head> - runs before render
  const theme = localStorage.getItem('theme') || 'system';
  if (theme === 'dark' || (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
</script>

2. Token Cascade Conflict

Symptoms: Some components don't respect theme changes, inconsistent colors across components Detection Rule: If getComputedStyle shows different token values in different components, you have cascade issues Diagnosis: CSS specificity or custom property inheritance broken Fix: Ensure tokens defined at :root level, avoid overriding custom properties in component scopes

3. SSR Hydration Mismatch

Symptoms: Console warnings about hydration mismatches, flickering on client-side hydration Detection Rule: If React dev tools shows hydration warnings with theme-dependent content, you have mismatches Diagnosis: Server renders default theme, client renders user's saved theme Fix: Use suppressHydrationWarning on theme-dependent elements or defer theme application until after hydration

4. Container Query Cascade Hell

Symptoms: Container queries not triggering, unexpected breakpoint behavior Detection Rule: If container queries work in isolation but fail when nested, you have cascade issues Diagnosis: Missing container-type or conflicting container contexts Fix: Explicitly set container-type: inline-size on every container query parent

5. Bundle Size Bloat

Symptoms: Large CSS bundles, unused Tailwind utilities in production Detection Rule: If bundle analysis shows >100KB CSS or unused class warnings, you have bloat Diagnosis: Missing or incorrect PurgeCSS/content configuration Fix: Configure Tailwind v4 content detection properly, use CSS Modules for one-off styles

Worked Examples

Complete Theme Architecture Setup

Scenario: E-commerce app needs light/dark modes with brand customization

Step 1: Define token structure

/* tokens.css */
:root {
  /* Brand tokens - consistent across themes */
  --brand-primary: oklch(0.55 0.18 250);
  --brand-secondary: oklch(0.45 0.12 180);
  
  /* Semantic tokens - theme-dependent */
  --surface-primary: oklch(0.99 0 0);
  --surface-raised: oklch(0.96 0 0);
  --text-primary: oklch(0.15 0 0);
  --text-secondary: oklch(0.40 0 0);
  --border-subtle: oklch(0.88 0 0);
}

[data-theme='dark'] {
  --surface-primary: oklch(0.13 0.01 260);
  --surface-raised: oklch(0.18 0.01 260);
  --text-primary: oklch(0.93 0 0);
  --text-secondary: oklch(0.70 0 0);
  --border-subtle: oklch(0.25 0.01 260);
}

Decision Point Hit: Need both utilities and component styles Expert Catches: Using OKLCH for perceptual uniformity, semantic naming separates brand from surface colors Novice Misses: Would use RGB/hex values, mix semantic and brand tokens

Step 2: Configure Tailwind v4

/* app.css */
@import 'tailwindcss';

@theme {
  --color-surface-primary: var(--surface-primary);
  --color-surface-raised: var(--surface-raised);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-brand-primary: var(--brand-primary);
}

Decision Point Hit: Utility classes for layout, CSS Modules for complex styling Expert Catches: Referencing CSS custom properties in @theme, maintaining single source of truth Novice Misses: Would duplicate token values in @theme instead of referencing

Step 3: Component implementation

// ProductCard.tsx
import styles from './ProductCard.module.css';

export function ProductCard({ product }) {
  return (
    <article className={styles.container}>
      <div className="bg-surface-raised p-4 rounded-lg border border-border-subtle">
        <img className={styles.image} src={product.image} />
        <div className="space-y-2">
          <h3 className="text-text-primary font-semibold">{product.name}</h3>
          <p className="text-text-secondary">{product.description}</p>
          <button className="bg-brand-primary text-white px-4 py-2 rounded">
            Add to Cart
          </button>
        </div>
      </div>
    </article>
  );
}

Result: Theme switching works instantly, no runtime CSS generation, fully responsive with container queries

Quality Gates

[ ] All colors defined using OKLCH color space for perceptual uniformity
[ ] Theme switching completes in <16ms (one frame) with no FOUC
[ ] CSS bundle size under 50KB after compression for typical app
[ ] All interactive elements have 3:1 contrast ratio minimum in all themes
[ ] No hardcoded color/spacing values outside token definitions
[ ] Container queries used for component-intrinsic responsive behavior
[ ] Zero hydration mismatches in SSR environments
[ ] Token naming follows semantic/brand separation (not color names)
[ ] Dark mode respects prefers-color-scheme when no explicit preference set
[ ] All spacing uses consistent scale (no arbitrary px values in components)

Not-For Boundaries

Do NOT use this skill for:

Component library architecture → Use design-system-creator instead (handles API design, versioning, documentation)
Animation systems → Use animation-system-architect instead (motion design, performance optimization)
Layout grid systems → Use responsive-layout-master instead (complex grid arrangements, breakpoint strategy)
Performance optimization → Delegate CSS bundle analysis and optimization to performance specialists
Complex CSS animations → This skill handles static styling architecture, not motion design

Delegate to other skills when:

Building reusable component APIs → design-system-creator
Implementing complex animations → animation-system-architect
Designing responsive layouts → responsive-layout-master
Optimizing runtime performance → Performance optimization specialists

curiositech/css-in-js-architect

skills/css-in-js-architect/SKILL.md

Architect scalable styling systems with Tailwind v4, CSS Modules, design tokens, dynamic theming, and container queries. Activate on: design tokens, theming system, Tailwind config, CSS architecture, container queries, dark mode. NOT for: component library creation (use design-system-creator), animation systems (use animation-system-architect).

development

Updated Apr 4, 2026

$ install --global

skillsauth

npx skillsauth add curiositech/windags-skills css-in-js-architect

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 4, 2026, 2:00 PM45.9s1 file scanned

SKILL.md

license:: Apache-2.0
name:: css-in-js-architect
description:: Architect scalable styling systems with Tailwind v4, CSS Modules, design tokens, dynamic theming, and container queries. Activate on: design tokens, theming system, Tailwind config, CSS architecture, container queries, dark mode. NOT for: component library creation (use design-system-creator), animation systems (use animation-system-architect).
allowed-tools:: Read,Write,Edit,Bash(npm:*,npx:*)
category:: Frontend & UI
- skill:: responsive-layout-master
reason:: Layout and styling architecture must be coordinated

CSS-in-JS Architect

Build scalable, maintainable styling architectures with Tailwind v4, CSS Modules, design tokens, and modern CSS features like container queries and dynamic theming.

Decision Points

Architecture Choice Matrix

IF you need global utility classes + rapid prototyping:

THEN use Tailwind v4 with @theme directive
CRITERIA: High component reuse, atomic styling preferred, team familiar with utilities

IF you need component-scoped styles + CSS expertise:

THEN use CSS Modules with design token imports
CRITERIA: Complex component styling, name collision concerns, traditional CSS workflow

IF you have mixed requirements:

THEN use Tailwind for layout/spacing + CSS Modules for complex components
CRITERIA: Best of both worlds, different teams have different preferences

Token Implementation Decision Tree

Is this a multi-brand/white-label app?
├── YES → CSS custom properties with theme switching
│   ├── Static themes known at build? → @theme overrides
│   └── Dynamic themes from API? → Runtime CSS property updates
└── NO → Single theme
    ├── Need dark mode? → CSS custom properties with prefers-color-scheme
    └── Single theme only → Hardcoded values in @theme acceptable

Container vs Viewport Query Decision

IF component layout depends on its container size:

THEN use @container queries with container-type: inline-size
EXAMPLE: Card layouts, sidebar components, dashboard widgets

IF layout depends on device/viewport characteristics:

THEN use viewport media queries
EXAMPLE: App shell, navigation patterns, typography scaling

Failure Modes

1. Dark Mode Flash (FOUC)

<script>
  // Inline script in <head> - runs before render
  const theme = localStorage.getItem('theme') || 'system';
  if (theme === 'dark' || (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
</script>

2. Token Cascade Conflict

3. SSR Hydration Mismatch

4. Container Query Cascade Hell

5. Bundle Size Bloat

Worked Examples

Complete Theme Architecture Setup

Scenario: E-commerce app needs light/dark modes with brand customization

Step 1: Define token structure

/* tokens.css */
:root {
  /* Brand tokens - consistent across themes */
  --brand-primary: oklch(0.55 0.18 250);
  --brand-secondary: oklch(0.45 0.12 180);
  
  /* Semantic tokens - theme-dependent */
  --surface-primary: oklch(0.99 0 0);
  --surface-raised: oklch(0.96 0 0);
  --text-primary: oklch(0.15 0 0);
  --text-secondary: oklch(0.40 0 0);
  --border-subtle: oklch(0.88 0 0);
}

[data-theme='dark'] {
  --surface-primary: oklch(0.13 0.01 260);
  --surface-raised: oklch(0.18 0.01 260);
  --text-primary: oklch(0.93 0 0);
  --text-secondary: oklch(0.70 0 0);
  --border-subtle: oklch(0.25 0.01 260);
}

Step 2: Configure Tailwind v4

/* app.css */
@import 'tailwindcss';

@theme {
  --color-surface-primary: var(--surface-primary);
  --color-surface-raised: var(--surface-raised);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-brand-primary: var(--brand-primary);
}

Step 3: Component implementation

// ProductCard.tsx
import styles from './ProductCard.module.css';

export function ProductCard({ product }) {
  return (
    <article className={styles.container}>
      <div className="bg-surface-raised p-4 rounded-lg border border-border-subtle">
        <img className={styles.image} src={product.image} />
        <div className="space-y-2">
          <h3 className="text-text-primary font-semibold">{product.name}</h3>
          <p className="text-text-secondary">{product.description}</p>
          <button className="bg-brand-primary text-white px-4 py-2 rounded">
            Add to Cart
          </button>
        </div>
      </div>
    </article>
  );
}

Result: Theme switching works instantly, no runtime CSS generation, fully responsive with container queries

Quality Gates

[ ] All colors defined using OKLCH color space for perceptual uniformity
[ ] Theme switching completes in <16ms (one frame) with no FOUC
[ ] CSS bundle size under 50KB after compression for typical app
[ ] All interactive elements have 3:1 contrast ratio minimum in all themes
[ ] No hardcoded color/spacing values outside token definitions
[ ] Container queries used for component-intrinsic responsive behavior
[ ] Zero hydration mismatches in SSR environments
[ ] Token naming follows semantic/brand separation (not color names)
[ ] Dark mode respects prefers-color-scheme when no explicit preference set
[ ] All spacing uses consistent scale (no arbitrary px values in components)

Not-For Boundaries

Do NOT use this skill for:

Component library architecture → Use design-system-creator instead (handles API design, versioning, documentation)
Animation systems → Use animation-system-architect instead (motion design, performance optimization)
Layout grid systems → Use responsive-layout-master instead (complex grid arrangements, breakpoint strategy)
Performance optimization → Delegate CSS bundle analysis and optimization to performance specialists
Complex CSS animations → This skill handles static styling architecture, not motion design

Delegate to other skills when:

Building reusable component APIs → design-system-creator
Implementing complex animations → animation-system-architect
Designing responsive layouts → responsive-layout-master
Optimizing runtime performance → Performance optimization specialists

Related Skills

curiositech/circuit-breakers-and-retries

tools

VerifiedTrustedCommunity

Building resilient distributed systems with circuit breakers, retries with full-jitter exponential backoff, retry budgets (per-request 3-attempt + per-client 10% ratio per Google SRE), deadline propagation, and the cascading-failure math (4 layers × 3 retries = 64x amplification). Grounded in Resilience4j, Microsoft Cloud Patterns, AWS Architecture Blog (Marc Brooker), and Google SRE Book.

4SKILL.mdUpdated May 6, 2026

curiositech/circuit-breakers-and-retries

curiositech/cdn-cache-control-headers

testing

VerifiedTrustedCommunity

Designing HTTP cache headers that work correctly across browsers, CDNs, and shared proxies — `Cache-Control` directives per RFC 9111, `stale-while-revalidate` and `stale-if-error` per RFC 5861, the Vary header for varying responses, and surrogate keys for tag-based purging. Grounded in IETF RFCs and Cloudflare/Fastly docs.

4SKILL.mdUpdated May 5, 2026

curiositech/cdn-cache-control-headers

curiositech/content-security-policy-headers

development

VerifiedTrustedCommunity

Use when designing or fixing a Content Security Policy on a real site, choosing between nonce-based and hash-based CSP, adding strict-dynamic, debugging "Refused to execute inline script" errors, deploying CSP in report-only mode first, configuring report-to / report-uri, or auditing an existing policy for unsafe-inline / unsafe-eval / wildcards. Triggers: "CSP blocks legitimate inline script", strict-dynamic, nonce-{RANDOM}, sha256-{HASH}, object-src none, base-uri none, frame-ancestors, Trusted Types, X-Content-Security-Policy obsolete, report-only vs enforced. NOT for general HTTP security headers (HSTS, COOP/COEP), Trusted Types deep dive, CORS configuration, or building a WAF.

3SKILL.mdUpdated May 4, 2026

curiositech/content-security-policy-headers

curiositech/api-versioning-strategy

tools

VerifiedTrustedCommunity

Choosing and operating an HTTP API versioning strategy that doesn't break clients — Stripe's date-based pinned versions, the Deprecation/Sunset header pair (RFC 9745 + RFC 8594), URI vs header vs media-type approaches, and the version-transformer pattern. Grounded in Stripe's published architecture and IETF RFCs.

3SKILL.mdUpdated May 4, 2026

curiositech/api-versioning-strategy

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/curiositech/windags-skills.git

# Copy into Claude Code skills folder (global)
cp -r windags-skills/skills/css-in-js-architect ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

curiositech/windags-skills

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT