RuleRow

An instruction rule with a switch for "always apply", when it applies, its file pattern and description. Pick it for agent or editor rules.

RuleRow

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, RuleRow

Commit styleAlwaysWrite commit messages in English with Conventional Commits and no trailers.

TypeScriptFor matching filessrc/**/*.{ts,tsx}Strict types, no any, imports with the .js extension.

TestsWhen relevantNo description

Dark theme, RuleRow

Commit styleAlwaysWrite commit messages in English with Conventional Commits and no trailers.

TypeScriptFor matching filessrc/**/*.{ts,tsx}Strict types, no any, imports with the .js extension.

TestsWhen relevantNo description

High contrast theme, RuleRow

Commit styleAlwaysWrite commit messages in English with Conventional Commits and no trailers.

TypeScriptFor matching filessrc/**/*.{ts,tsx}Strict types, no any, imports with the .js extension.

TestsWhen relevantNo description

UsageLink to the section Usage

tsx

import { RuleRow } from '@skribly/ui/ops'

tsx

<RuleRow id={rule.file} title={rule.name} mode={t(`rules.mode.${mode}`)} pattern={rule.globs}
  description={rule.description} emptyDescription={t('rules.noDescription')}
  isActive={rule.alwaysApply} onActiveChange={(on) => toggle(rule, on)} switchLabel={t('rules.always', { name: rule.name })} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The switch is named after the rule.
The mode is a word in a badge, accented while active.
A missing description shows as italic words, not an empty gap.
Patterns wrap anywhere so the row never scrolls sideways.

This demo runs through axe in all three themes on every test run. See what the tests check.