devup-ui
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.)
Install
mkdir -p .claude/skills/devup-ui && curl -L -o skill.zip "https://mcp.directory/api/skills/download/9241" && unzip -o skill.zip -d .claude/skills/devup-ui && rm skill.zipInstalls to .claude/skills/devup-ui
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
Style children based on parent state:
<Box _groupHover={{ color: "blue" }} />
<Box _groupFocus={{ outline: "2px solid" }} />
<Box _groupActive={{ bg: "darkblue" }} />
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": "#3291ff", "text": "#fff", "bg": "#111" }
},
"typography": {
"heading": {
"fontFamily": "Pretendard",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": 1.3,
"letterSpacing": "-0.02em"
},
"body": [
{ "fontSize": "14px", "lineHeight": 1.5 },
null,
{ "fontSize": "16px", "lineHeight": 1.6 }
]
},
"length": {
"de
---
*Content truncated.*
You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
pdf-to-markdown
aliceisjustplaying
Convert entire PDF documents to clean, structured Markdown for full context loading. Use this skill when the user wants to extract ALL text from a PDF into context (not grep/search), when discussing or analyzing PDF content in full, when the user mentions "load the whole PDF", "bring the PDF into context", "read the entire PDF", or when partial extraction/grepping would miss important context. This is the preferred method for PDF text extraction over page-by-page or grep approaches.
Related MCP Servers
Browse all servers
Tailwind to NativeWindEasily convert Tailwind components to NativeWind 4 for React Native projects with Tailwind to NativeWind. Simplify your
RepomixOptimize your codebase for AI with Repomix—transform, compress, and secure repos for easier analysis with modern AI tool
Figma ContextUnlock seamless Figma to code: streamline Figma to HTML with Framelink MCP Server for fast, accurate design-to-code work
Desktop CommanderDesktop Commander MCP unifies code management with advanced source control, git, and svn support—streamlining developmen
MagicCreate modern React UI components instantly with Magic AI Agent. Integrates with top IDEs for fast, stunning design and
shadcn/uiAccess shadcn/ui v4 components, blocks, and demos for rapid React UI library development. Seamless integration and sourc
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.