skills.rest
omerakben
omerakbenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

brightness-system

Implement eight brightness modes with CSS custom properties in Next.js React projects.

1|Updated Oct 9, 2025
Search Tags:#theming#ui#accessibility#frontend#react#css-tokens#brightness
One-click install
npx skills add https://github.com/omerakben/omer-akben --skill brightness-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brightness-system
Source: https://github.com/omerakben/omer-akben/tree/main/.claude/skills/brightness-system-skill
Command: npx skills add https://github.com/omerakben/omer-akben --skill brightness-system

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? The Brightness System Skill standardizes how themes adapt across eight brightness modes, ensuring consistent color tokens and accessible UI across all UI changes.

## Core Features & Use Cases

  • Ensures 8 distinct brightness modes (-3 to +3 and auto) are consistently implemented across components using CSS custom properties.
  • Provides a token-driven approach to surfaces, text, borders, and brand colors to maintain WCAG-compliant contrast.
  • Use Case: When implementing a new theme or UI component, apply the brightness system to guarantee accessible styling across all modes.

### Quick Start To enable the brightness system, integrate the CSS tokens and brightness context, then control the mode via the root data-brightness attribute.

Frequently Asked Questions about brightness-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a multi-mode brightness system using CSS tokens in React?▼

You can implement an eight-mode brightness system by defining CSS custom properties in globals.css, setting a root data-brightness attribute, and wrapping components in a brightness-context provider.

What is the best way to manage eight brightness levels for accessible UI theming?▼

The best way to manage eight brightness levels is through a token-driven approach for surfaces, text, borders, and brand colors to maintain WCAG-compliant contrast across all UI components.

Does this brightness system approach work with Next.js projects?▼

Yes, the brightness system targets UI components across Next.js React projects by integrating CSS token definitions and a brightness context to ensure consistent behavior.

How do I apply CSS custom properties for dark mode and brightness adjustments?▼

You apply CSS custom properties for brightness adjustments by enforcing a root HTML data-brightness attribute and defining corresponding tokens in your global stylesheet.

Can I ensure WCAG-compliant contrast across multiple brightness modes?▼

Yes, you can ensure WCAG-compliant contrast by using a token-driven approach to surfaces, text, borders, and brand colors that adapts consistently across all eight brightness modes.

Why does my brightness context not apply consistently across UI components?▼

Your brightness context may not apply consistently if the root HTML data-brightness attribute or CSS token definitions in globals.css are missing or improperly configured.

Related Skills

Explore More Software Engineering Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
Higashi-KotaHigashi-Kota

accessibility-review

Audit design system tokens and components for WCAG compliance.

Community
Intermediate
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced
Camilo8902Camilo8902

dark-mode-implementer

Implement dark and light mode theming with CSS variables, Tailwind CSS, and React context.

Community
Advanced