devup-ui
A build-time CSS-in-JS preprocessor that transforms Devup UI components into static CSS.
Install
mkdir -p .claude/skills/devup-ui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9241" && unzip -o skill.zip -d .claude/skills/devup-ui && rm skill.zipInstalls to .claude/skills/devup-ui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Zero-runtime CSS-in-JS preprocessor for React. Transforms JSX styles to static CSS at build time.
TRIGGER WHEN:
- Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.)
- Using styling APIs: css(), styled(), globalCss(), keyframes()
- Configuring devup.json theme (colors, typography)
- Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun)
- Debugging "Cannot run on the runtime" errors
- Working with responsive arrays or pseudo-selectors (_hover, _dark, etc.)Key capabilities
- →Transform JSX styles to static CSS
- →Configure build-time themes
- →Support responsive arrays
- →Handle pseudo-selectors
- →Integrate with Vite/Next.js
How it works
It uses a build-time preprocessor to extract style props from JSX and convert them into static CSS classes, removing runtime overhead.
Inputs & outputs
When to use devup-ui
- →Styling React components
- →Configuring project design themes
- →Debugging CSS build errors
About this skill
Devup UI
Build-time CSS extraction. No runtime JS for styling.
Critical: Components Are Compile-Time Only
All @devup-ui/react components throw Error('Cannot run on the runtime'). They are placeholders that build plugins transform to native HTML elements with classNames.
// BEFORE BUILD (what you write):
<Box bg="red" p={4} _hover={{ bg: "blue" }} />
// AFTER BUILD (what runs in browser):
<div className="a b c" /> // + CSS: .a{background:red} .b{padding:16px} .c:hover{background:blue}
Components
@devup-ui/react (Layout Primitives)
All are polymorphic (accept as prop). Default element is <div> unless noted.
| Component | Default Element | Purpose |
|---|---|---|
Box | div | Base layout primitive, accepts all style props |
Flex | div | Flexbox container (shorthand for display: flex) |
Grid | div | CSS Grid container |
VStack | div | Vertical stack (flex column) |
Center | div | Centered content |
Text | p | Text/typography |
Image | img | Image element |
Input | input | Input element |
Button | button | Button element |
ThemeScript | -- | SSR theme hydration (add to <head>) |
@devup-ui/components (Pre-built UI)
Higher-level components with built-in behavior. These are runtime components (not compile-time only).
| Component | Key Props |
|---|---|
Button | variant (primary/default), size (sm/md/lg), loading, danger, icon, colors |
Checkbox | children (label), onChange(checked), colors |
Input | error, errorMessage, allowClear, icon, typography, colors |
Textarea | error, errorMessage, typography, colors |
Radio | variant (default/button), colors |
RadioGroup | options[], direction (row/column), variant, value, onChange |
Toggle | variant (default/switch), value, onChange(boolean), colors |
Select | type (default/radio/checkbox), options[], value, onChange, colors |
Stepper | min, max, type (input/text), value, onValueChange |
Select compound: SelectTrigger, SelectContainer, SelectOption, SelectDivider
Stepper compound: StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput
Hooks: useSelect(), useStepper()
All components accept a colors prop object for runtime color customization via CSS variables.
Style Prop Syntax
Shorthand Props (ALWAYS prefer these)
Spacing (unitless number x 4 = px)
| Shorthand | CSS Property |
|---|---|
m, mt, mr, mb, ml, mx, my | margin-* |
p, pt, pr, pb, pl, px, py | padding-* |
Sizing
| Shorthand | CSS Property |
|---|---|
w | width |
h | height |
minW, maxW | min-width, max-width |
minH, maxH | min-height, max-height |
boxSize | width + height (same value) |
Background
| Shorthand | CSS Property |
|---|---|
bg | background |
bgColor | background-color |
bgImage, bgImg, backgroundImg | background-image |
bgSize | background-size |
bgPosition, bgPos | background-position |
bgPositionX, bgPosX | background-position-x |
bgPositionY, bgPosY | background-position-y |
bgRepeat | background-repeat |
bgAttachment | background-attachment |
bgClip | background-clip |
bgOrigin | background-origin |
bgBlendMode | background-blend-mode |
Border
| Shorthand | CSS Property |
|---|---|
borderTopRadius | border-top-left-radius + border-top-right-radius |
borderBottomRadius | border-bottom-left-radius + border-bottom-right-radius |
borderLeftRadius | border-top-left-radius + border-bottom-left-radius |
borderRightRadius | border-top-right-radius + border-bottom-right-radius |
Layout & Position
| Shorthand | CSS Property |
|---|---|
flexDir | flex-direction |
pos | position |
positioning | Helper: "top", "bottom-right", etc. (sets edges to 0) |
objectPos | object-position |
offsetPos | offset-position |
maskPos | mask-position |
maskImg | mask-image |
Typography
| Shorthand | Effect |
|---|---|
typography | Applies theme typography token (fontFamily, fontSize, fontWeight, lineHeight, letterSpacing) |
All standard CSS properties from csstype are also accepted directly (e.g., display, gap, opacity, transform, animation, etc.).
Spacing Scale (unitless number x 4 = px)
<Box p={1} /> // padding: 4px
<Box p={4} /> // padding: 16px
<Box p="4" /> // padding: 16px (unitless string also x 4)
<Box p="20px" /> // padding: 20px (with unit = exact value)
Responsive Arrays (5 breakpoints)
// [mobile, mid, tablet, mid, PC] - 5 levels
// Use indices 0, 2, 4 most frequently. Use null to skip.
<Box bg={["red", null, "blue", null, "yellow"]} /> // mobile=red, tablet=blue, PC=yellow
<Box p={[2, null, 4, null, 6]} /> // mobile=8px, tablet=16px, PC=24px
<Box w={["100%", null, "50%"]} /> // mobile=100%, tablet+=50%
Pseudo-Selectors (underscore prefix)
<Box
_hover={{ bg: "blue" }}
_focus={{ outline: "2px solid blue" }}
_focusVisible={{ outlineColor: "$primary" }}
_active={{ bg: "darkblue" }}
_disabled={{ opacity: 0.5 }}
_before={{ content: '""' }}
_after={{ content: '""' }}
_firstChild={{ mt: 0 }}
_lastChild={{ mb: 0 }}
_placeholder={{ color: "gray" }}
/>
All CSS pseudo-classes and pseudo-elements from csstype are supported with _camelCase naming.
Group Selectors
Mark a parent with the data-group attribute, then children can react to that parent's state:
<Box data-group>
<Text _groupHover={{ color: "blue" }}>Changes when parent hovered</Text>
<Box _groupFocus={{ outline: "2px solid" }} />
<Box _groupActive={{ bg: "darkblue" }} />
</Box>
Available: _groupHover, _groupFocus, _groupActive, _groupDisabled.
The legacy
role="group"parent marker is still matched for backward compatibility but will be removed in v2. Usedata-groupfor new code sorole="group"stays reserved for genuine ARIA grouping semantics.
Theme Selectors
<Box _themeDark={{ bg: "gray.900" }} />
<Box _themeLight={{ bg: "white" }} />
At-Rules (Media, Container, Supports)
// Underscore prefix syntax
<Box _print={{ display: "none" }} />
<Box _screen={{ display: "block" }} />
<Box _media={{ "(min-width: 768px)": { w: "50%" } }} />
<Box _container={{ "(min-width: 400px)": { p: 4 } }} />
<Box _supports={{ "(display: grid)": { display: "grid" } }} />
// @ prefix syntax (equivalent)
<Box {...{ "@media": { "(min-width: 768px)": { w: "50%" } } }} />
Custom Selectors
<Box selectors={{
"&:hover": { color: "red" },
"&::before": { content: '">"' },
"&:nth-child(2n)": { bg: "gray" },
}} />
Dynamic Values = CSS Variables
// Static value -> class
<Box bg="red" /> // className="a" + .a{background:red}
// Dynamic value -> CSS variable
<Box bg={props.color} /> // className="a" style={{"--a":props.color}} + .a{background:var(--a)}
// Conditional -> preserved
<Box bg={isActive ? "blue" : "gray"} /> // className={isActive ? "a" : "b"}
Responsive + Pseudo Combined
<Box _hover={{ bg: ['red', 'blue'] }} />
// Alternative syntax:
<Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
Special Props
as (Polymorphic Element)
Changes the rendered HTML element or renders a custom component:
<Box as="section" bg="gray" /> // renders <section>
<Box as="a" href="/about" /> // renders <a>
<Box as={MyComponent} bg="red" /> // renders <MyComponent> with extracted styles
<Box as={b ? "div" : "section"} /> // conditional element type
props (Pass-Through to as Component)
When as is a custom component, use props to pass component-specific props:
<Box as={MotionDiv} w="100%" props={{ animate: { duration: 1 } }} />
styleVars (Manual CSS Variable Injection)
<Box styleVars={{ "--custom-color": dynamicValue }} bg="var(--custom-color)" />
styleOrder (CSS Cascade Priority)
Controls specificity when combining className with direct props. Required when mixing css() classNames with inline style props.
<Box className={cardStyle} bg="$background" styleOrder={1} />
// Conditional styleOrder
<Box bg="red" styleOrder={isActive ? 1 : 0} />
Styling APIs
css() Returns className String (NOT object)
import { css, globalCss, keyframes } from "@devup-ui/react";
import clsx from "clsx";
// css() returns a className STRING
const cardStyle = css({ bg: "white", p: 4, borderRadius: "8px" });
<div className={cardStyle} />
// Combine with clsx
const baseStyle = css({ p: 4, borderRadius: "8px" });
const activeStyle = css({ bg: "$primary", color: "white" });
<Box className={clsx(baseStyle, isActive && activeStyle)} styleOrder={1} />
globalCss() and keyframes()
globalCss({ body: { margin: 0 }, "*": { boxSizing: "border-box" } });
const spin = keyframes({ from: { transform: "rotate(0)" }, to: { transform: "rotate(360deg)" } });
<Box animation={`${spin} 1s linear infinite`} />
Dynamic Values with Custom Components
css() only accepts static values. For dynamic values on custom components, use <Box as={Component}>:
// WRONG - css() cannot handle dynamic values
<CustomComponent className={css({ w: width })} />
// CORRECT - Box with as prop handles dynamic values via CSS variables
<Box as={CustomComponent} w={width} />
Theme (devup.json)
{
"extends": ["./base-theme.json"],
"theme": {
"colors": {
"default": { "primary": "#0070f3", "text": "#000", "bg": "#fff" },
"dark": { "primary": "#3291f
---
*Content truncated.*
When not to use it
- →Runtime-only styling requirements
- →Projects without build-time processing
Prerequisites
Limitations
- →Components throw errors if not processed at build time
- →Dynamic values require CSS variables
How it compares
It eliminates runtime CSS-in-JS overhead by performing all style calculations during the build process.
Compared to similar skills
devup-ui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| devup-ui (this skill) | 0 | 2mo | Review | Advanced |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| rendering-animate-svg | 13 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
rendering-animate-svg
TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
1k-performance
OneKeyHQ
Performance optimization for React/React Native — re-renders, memoization, FlashList, memory leaks, and bundle size.
router-query-integration
MadAppGang
Use when setting up route loaders or optimizing navigation performance. Integrates TanStack Router with TanStack Query for optimal data fetching. Covers route loaders with query prefetching, ensuring instant navigation, and eliminating request waterfalls.