Extend with modifiers

When to use

You already have Malevich markup and want to add a treatment — "give this CTA a glow on hover," "make the hero card feel elevated with a grain texture," "make the header sticky," "let this alert be dismissed." Use this prompt to do it the system's way: a modifier attached via a data-{category} attribute, never a hand-rolled override or a fork of the component.

If you find yourself wanting to change the component's structure or tokens rather than attach a cross-cutting treatment on top, this is the wrong tool — that's a refactor or a new component.

Note: this replaces the retired "tweak" model. If a brief mentions a t- class, @malevich/tweaks, or a .tweak.yml manifest, translate it to the modifier system below.

The prompt

Fill in the placeholders and send the text below.

You are working in the Malevich design system. Before answering, read:

• llm-wiki/architecture.md (Modifier architecture section)
• llm-wiki/decisions/0007-modifier-system-as-cross-cutting-layer.md
• packages/components/modifiers/applicability.json

Load the malevich-modifiers skill.

I have this Malevich markup:

{{code}}

Desired treatment: {{treatment}}

Add it as a modifier. Follow these rules:

1. Map the treatment to a category + value. The seven categories are background, surface, effect, shader, rhythm, motion, behavior. Pick the category that owns the concern and a value from its enumerated set (e.g. effect=glow, surface=elevated, behavior=sticky). Don't hand-roll CSS on the component.
2. Check the applicability matrix. The host component must list that category, and the value must be in its allowed array, in modifiers/applicability.json. If it doesn't, say so and propose the nearest supported alternative — or the custom-modifier extension pattern (a data-* attribute writing tokens into the component's namespace) if nothing fits.
3. Attach with a data-attribute. Add data-{category}="value" to the host element, alongside its block class and any .-variant. Never use a t- class, never data-tweak.
4. Mind the runtime. behavior modifiers (sticky, dismissible, collapsible, copyable) need the runtime — note that init() must run once after mount. The other six categories are CSS-only and need no JS.
5. Mind inheritance. rhythm and motion inherit via the cascade (set them on a parent to affect descendants); the other five do not. Don't set a non-inheriting modifier expecting children to pick it up.
6. Respect motion and contrast. Confirm the treatment degrades under prefers-reduced-motion, and don't pile heavy effects onto many elements at once.

Output format:

1. Modifier chosen — category, value, CSS-only or runtime, and why it fits.
2. Markup — the original with the data-{category} attribute added (and nothing else changed).
3. Matrix check — the relevant line from the component's applicability row.
4. Runtime note — whether init() is required.
5. Caveats — reduced-motion, contrast, inheritance, stacking.

Do not modify the component's own CSS or structure. A modifier attaches on top; it never edits the component.

Variables

Example input

<button class="button -accent">Get started</button>

Desired treatment: a soft glow on hover, accent-colored.

Example output

Modifier chosen: effect=glow (CSS-only). The effect category owns decorative chrome overlays, and glow is one of its values. No runtime needed.

Markup:

<button class="button -accent" data-effect="glow">Get started</button>

Nothing else changes — the component's CSS and structure are untouched.

Matrix check: Button's row in applicability.json reads "effect": ["glow", "ring"], so data-effect="glow" is valid. (Button does not accept background or shader, so those would be rejected.)

Runtime note: not required. effect is CSS-only; the glow renders from component CSS the moment the attribute is present.

Caveats:

• The glow is keyed to accent and tied to :hover / :focus-visible; it honors prefers-reduced-motion via the component's motion handling.
• effect does not inherit — nested buttons won't glow unless they carry the attribute themselves.
• Keep one effect value per element. To combine, e.g., a glow and a ring isn't possible in one data-effect; pick the dominant one, or reconsider the design.

Pairs with

• Skill: malevich-modifiers — the procedural skill this prompt invokes.
• Skill: malevich-component-usage — the conventions the host markup follows.