skills.rest
quan0715
quan0715COMMUNITY
Explore all skills by this author →
GitHub

qjudge-ui-carbon-owner

Enforce Carbon-first styling and resolve overflow layout issues in React components.

31|1|Updated Nov 30, 2025
Search Tags:#ui#frontend#storybook#design-system#style-guidelines#carbon#overflow-layout
One-click install
npx skills add https://github.com/quan0715/QJudge --skill qjudge-ui-carbon-owner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qjudge-ui-carbon-owner
Source: https://github.com/quan0715/QJudge/tree/main/.codex/skills/qjudge-ui-carbon-owner
Command: npx skills add https://github.com/quan0715/QJudge --skill qjudge-ui-carbon-owner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The QJudge UI Carbon Owner centralizes Carbon-first styling rules, Storybook synchronization, and overflow/layout stability to prevent inconsistent component visuals, broken stories, and unexpected dual-scroll or clipping behavior across the frontend.

Core Features & Use Cases

  • Carbon-first enforcement: mandate token-driven spacing, typography, and colors while preventing direct overrides of Carbon internals.
  • Storybook & registry ownership: require colocated stories, minimal meaningful story sets, and registry updates alongside component changes.
  • Overflow and layout stability: provide proven patterns (full-bleed admin shell, split pane, header/body) and acceptance criteria to ensure a single vertical scroll owner and stable clipping across themes.
  • Checks and handoffs: reference a style-check command and define clear cross-skill handoffs for architecture and CI/release responsibilities.

Quick Start

Review the Carbon policy and overflow playbook, update the component stories and registry in the same change, and run the style check before creating a pull request.

Frequently Asked Questions about qjudge-ui-carbon-owner

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

FAQPage Schema
How do I fix dual-scroll and overflow clipping issues in React frontend components?▼

To fix dual-scroll and overflow clipping issues in React components, apply proven layout patterns like full-bleed admin shell or split pane to ensure a single vertical scroll owner and stable clipping across themes.

How do I enforce Carbon design system consistency in a React repository?▼

Enforce Carbon design system consistency by mandating token-driven spacing, typography, and colors, while prohibiting direct overrides of Carbon internals or using !important in your component styling.

What are the Storybook story requirements for adding new UI components?▼

Storybook story requirements mandate colocating minimal meaningful story sets with your components and synchronizing registry updates alongside component changes to prevent broken stories.

Can I use custom CSS to override Carbon internals for specific layout needs?▼

No, overriding Carbon internals or using !important is prohibited; you must apply token-based styling to maintain Carbon-first UI consistency and prevent unexpected visual behavior.

How do I check frontend styling compliance before creating a pull request?▼

Check frontend styling compliance before a pull request by executing the referenced style-check command to validate token usage, overflow stability, and Storybook synchronization.

When do I need to update the component registry in a React frontend project?▼

You need to update the component registry whenever you change components, ensuring registry synchronization alongside component modifications to maintain frontend repository consistency.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

react

Create token-driven React components with TypeScript and ARIA compliance.

Community
Intermediate
quan0715quan0715
31

qjudge-architecture-owner

Define and enforce QJudge layer boundaries, import direction, and file naming conventions.

Community
Intermediate
vinhnxvvinhnxv
6

storybook

Guide agents through Storybook MCP tools and CSF3 conventions for component verification.

Community
Intermediate
tarrragontarrragon
1

style-guardian

Detect hardcoded UI styles and text in Flutter/Dart projects.

Community
Basic