unocss-onmax
Use when writing UnoCSS with presetOnmax workflow - covers attribute mode patterns, fluid spacing (f- prefix), scale-to-pixel (1px base), custom variants (hocus, reka-*, data-state), nimiq-css design system (nq-* utilities), and Reka UI integration. Apply when editing .vue files with UnoCSS attributes or configuring uno.config.ts.
When & Why to Use This Skill
This Claude skill optimizes frontend styling workflows by providing comprehensive support for UnoCSS with the presetOnmax configuration. It assists developers in implementing attribute-based styling, fluid typography, and custom design system utilities within Vue.js environments, ensuring consistent and scalable CSS architecture through a 1px-base spacing system and specialized variants.
Use Cases
- Streamlining Vue.js component development by writing clean, attribute-mode UnoCSS styles for better template readability.
- Implementing responsive and fluid layouts using the 'f-' prefix spacing scale to ensure UI consistency across different screen sizes.
- Configuring and optimizing 'uno.config.ts' files specifically for the presetOnmax ecosystem and its associated plugins.
- Integrating specialized design systems like nimiq-css (nq-* utilities) and Reka UI components with custom state selectors like 'hocus' and 'data-state'.
- Converting design specifications into precise CSS using the 1px-base scale-to-pixel logic (1rem = 4px) for high-fidelity UI implementation.
| name | unocss-onmax |
|---|---|
| description | Use when writing UnoCSS with presetOnmax workflow - covers attribute mode patterns, fluid spacing (f- prefix), scale-to-pixel (1px base), custom variants (hocus, reka-*, data-state), nimiq-css design system (nq-* utilities), and Reka UI integration. Apply when editing .vue files with UnoCSS attributes or configuring uno.config.ts. |
UnoCSS with presetOnmax Workflow
Custom UnoCSS workflow using unocss-preset-onmax with fluid sizing, 1px-base spacing, and attributify mode.
Core Concepts
| Concept | Pattern | Example |
|---|---|---|
| Attribute mode | attr="~ value" |
flex="~ col gap-8" |
| Fluid spacing | f-{util}-{size} |
f-px-md, f-pt-2xl |
| Scale-to-px | 1rem = 4px | p-16 = 16px |
| hocus | hover + focus | bg="neutral hocus:blue" |
| size-X | width + height | size-40 = 40×40px |
When to Load Sub-Files
Load based on task:
| Task | File |
|---|---|
| Configuring uno.config.ts | preset-onmax.md |
| Writing component styles | attributify.md |
| Responsive typography/spacing | fluid-sizing.md |
| State selectors, dark mode | variants.md |
| nimiq-css utilities (nq-*) | nimiq-css.md |
DO NOT load all files. Each ~400-800 tokens. Load only what's needed.
Quick Reference
Attribute Mode Syntax
<div flex="~ col items-center gap-16">
<div text="f-xl neutral-800">
<button bg="neutral-0 hocus:neutral-50">
<div outline="~ 1.5 offset--1.5 neutral/10">
Fluid Sizing Scale
2xs=8/12 xs=12/16 sm=16/24 md=24/32 lg=32/48 xl=48/72 2xl=72/96
Common Patterns
size-40 rounded-full <!-- Circle button -->
f-px-md f-pt-sm <!-- Fluid padding -->
outline="1.5 offset--1.5" <!-- Inset outline -->
hocus:bg-neutral-100 <!-- Hover+focus -->
stack <!-- Centered grid overlay -->
Token Budget
- Base: ~250 tokens
- Per sub-file: ~400-800 tokens