CARBON — Engineering ConfidenceUser Guide
CHAPTER 12 / 60 Pro

/carbon-ui

Run focused CARBON UI testing and generate a branded ui report.

Mia · UsabilityExperience & accessibility

When to use it

You suspect clipping, overlap, visual inconsistency or broken responsive states.

Before you start

Specify widths, content extremes and states such as loading, empty and error. Capture comparable before/after screenshots; a desktop pass does not establish phone behavior.

Try this in your coding agent.

/carbon-ui Inspect the dashboard at phone widths for clipped text and overlapping controls.

Replace sample paths with your project. Slash names are shorthand; your host may use a plugin prefix or a skill picker. Invocation help →

ILLUSTRATIVE WALKTHROUGH

TestBucks mobile dashboard

An expanded teaching example, not a recorded or live execution. The report stays visible while the replay explains how to read it.

  1. 01Read context
  2. 02Investigate
  3. 03Show evidence
  4. 04Report

Coding-agent conversation

Read context

I’m reviewing testbucks mobile dashboard. I’ll keep the scope and permissions explicit.

Investigate

Follow the weakest evidence link and record what remains blocked.

Show evidence

Here is the evidence trail to inspect: Before: nowrap row clips the action. After the course fix: wrapping keeps the action visible.

Report

The course fixture’s single-line navigation pushes Sign in beyond the 390px viewport. Other breakpoints and actual-device rendering remain to be checked.

CARBON

Example report

Illustration
Clipped action → responsive layout
Clipped action → responsive layout — TestBucks teaching screen

Captured TestBucks teaching fixture: deliberate overflow, then its responsive-layout fix. Not a production-app finding.

  1. 390px viewport
  2. Action clips
  3. Wrap restores action

Illustrated outcome

The course fixture’s single-line navigation pushes Sign in beyond the 390px viewport.

Evidence to inspect

Before: nowrap row clips the action. After the course fix: wrapping keeps the action visible.

Still untested / not established

Other breakpoints and actual-device rendering remain to be checked.

Ready. Read the full example or play its steps.

What a useful result contains

A bounded claim

For testbucks mobile dashboard, state the target, revision, environment and actual work performed. Keep planned, executed, blocked and untested work separate.

An inspectable trail

Before: nowrap row clips the action. After the course fix: wrapping keeps the action visible. In a real run, retain the source, trace, screenshot or fixture behind the conclusion.

The qualification

Other breakpoints and actual-device rendering remain to be checked.

The next decision

Decide whether the evidence calls for a focused check, a reviewed fix or more context. Do not convert a plausible example into a verified finding.

Adapt the example to your project

  1. Replace testbucks mobile dashboard with a real feature, path or decision in your project.
  2. State the expected rule and its source. Include safe fixtures, constraints and a budget where appropriate.
  3. Ask for exact evidence and remaining gaps. Approve consequential actions separately.
/jay Review the /carbon-ui result. Separate observed evidence, assumptions and untested scope, then recommend the next useful check.

Where to go next

/carbon-compatibility →/carbon-accessibility →

Content checked against the local command definition: skills/carbon-ui/SKILL.md. Examples adapted from the homepage’s TestBucks walkthroughs. Availability is edition- and host-dependent.