Provides a runtime CSS engine for responsive design that uses custom syntax rather than traditional utility classes.
Install
mkdir -p .claude/skills/maple-css-engine && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18534" && unzip -o skill.zip -d .claude/skills/maple-css-engine && rm skill.zipInstalls to .claude/skills/maple-css-engine
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.
A variable-first, stack-agnostic runtime CSS engine for building responsive interfaces.Key capabilities
- →Apply variable-first CSS for responsive interfaces
- →Utilize Maple's syntax for utilities and selectors
- →Implement media queries and grid layouts
- →Manage CSS variables for themeable designs
- →Create animations and transitions
How it works
The skill guides the user to identify the Maple feature needed, read the relevant reference file, and use only documented Maple syntax. It emphasizes semantic tokens, scoped variables, and container queries for responsive design.
Inputs & outputs
When to use Maple CSS Engine
- →Styling responsive web components
- →Managing design variables
- →Implementing CSS animations
About this skill
Maple CSS Skill
This is the entry point for AI assistants using Maple. Maple is a variable-first, stack-agnostic runtime CSS engine.
Do not guess Maple classes from Tailwind, Bootstrap, UnoCSS, or other utility systems. When writing Maple classes, first read the relevant reference file below and follow the syntax documented there.
Reference Files
- Overview, quick start, and core concepts: guide/01-overview.md
- Syntax reference and utilities: guide/02-utilities.md
- Selectors: guide/03-selectors.md
- Media queries: guide/04-media-queries.md
- Usage guide introduction: guide/00-usage-guide.md
- Borders: guide/05-borders.md
- Transforms: guide/06-transforms.md
- Transitions: guide/07-transitions.md
- Filters: guide/08-filters.md
- Gradients: guide/09-gradients.md
- Shadows: guide/10-shadows.md
- Grid layout: guide/11-grid-layout.md
- CSS variables: guide/12-css-variables.md
- Animations: guide/13-animations.md
- Flex layout: guide/14-flex-layout.md
- Combining features: guide/15-combining-features.md
- Automatic conflict resolution: guide/16-conflict-resolution.md
- Configuration, refs, nomerge, and breakpoints: guide/17-configuration.md
- Abbreviations reference: guide/18-abbreviations-reference.md
- Advanced installation: guide/19-advanced-installation.md
If an abbreviation exists in the abbreviations reference, Maple can also use the camelCase version of that CSS property.
Required Workflow
- Identify the Maple feature needed for the user request.
- Read the relevant reference file before writing classes for that feature.
- Use only documented Maple syntax.
- If a semantic token is used, make sure it is already defined in the surrounding code or define it with Maple CSS variable utilities.
- Prefer documented Maple utilities and examples over invented class names.
Core Syntax Reminder
Maple class names are composed as:
{media-query}:{selector}:{utility}
The media query and selector parts are optional. Utilities can use token resolution, literal values, bracket values, CSS variable utilities, aliases, important modifiers, dynamic values, and feature-specific serializers as documented in the reference files.
The utility consists of a property name and a value separated by a hyphen or equal sign. All camelCase CSS properties are supported (e.g. accentColor). Some properties have shorthand versions (e.g. bgc for backgroundColor). See the list of shorthand versions in guide/18-abbreviations-reference.md. If a property does not have a shorthand version, use the camelCase version of that property.
Best Practices
Prefer Semantic Tokens
Maple's architecture shines when you use tokens that express intent rather than hard-coded values. This keeps your design themeable, easier to audit, and consistent across components.
<!-- ✅ Good: Semantic tokens, themeable -->
<div class="bgc-primary-200 c-primary-700 p-4 rad-lg"></div>
<!-- ⚠️ Avoid: Arbitrary values, not themeable -->
<div class="bgc=#3b82f6 c=white p=16px rad=8px"></div>
Use Aliases for Utility-Like Jobs
Reserve aliases for utility-first shortcuts: multiple declarations that perform one clear styling job. They are a good fit for behaviors like text truncation, font smoothing, or focus rings, not for component-sized button or card recipes.
<!-- ✅ Good: Alias for one utility-like job -->
<html class="--alias-truncate=of=hidden;tof=ellipsis;ws=nowrap">
<body>
<span class="@truncate w-40">Long text that should truncate</span>
</body>
</html>
<!-- ⚠️ Avoid: Component-sized aliases like @button or @card -->
Use Scoped Variables
Scope variables locally for contextual theming. This keeps components portable: the component can keep the same utility classes while the parent decides the actual token values.
<div class="--accent=teal">
<button class="bgc-accent-500 c-white">Teal Button</button>
</div>
<div class="--accent=purple">
<button class="bgc-accent-500 c-white">Purple Button</button>
</div>
Use Selectors Responsibly
Parent (^) and self (&) selectors are excellent for encapsulation. However, the child selector (/) should only be used when you have no control over the children, such as CMS output or Markdown. If a selector chain becomes hard to read, consider restructuring the component instead. See the Selectors section for details.
Prefer Container Queries
Breakpoints in Maple are container query first by default. This allows you to build components that are truly responsive to their available space, regardless of the viewport size.
<!-- Container query: responds to nearest .cnt ancestor -->
<section class="cnt">
<div class="md:cols-2"></div>
</section>
<!-- Viewport query: responds to browser width -->
<div class="@md:cols-3"></div>
Add cnt to the nearest parent container you want to query. Do not put it on html or body; wrap your application or component area instead.
Prefer Native CSS Features
Use Maple's support for native CSS capabilities before reaching for JavaScript. Scroll-state, support, media, and container queries often express state more clearly and avoid extra event listeners.
<!-- ✅ Good: Pure CSS sticky state -->
<nav class="stuck=top:bshadow-lg ts-200">Navigation</nav>
<!-- ⚠️ Avoid: JavaScript-managed class for the same state -->
<nav class="^.scrolled:bshadow-lg">Navigation</nav>
Leverage Color Manipulation
Instead of defining separate hex codes for hover or active states, use Maple's tone suffixes (-600, -700, etc.) to derive variants from the base color in OKLCH space. Keep tone and alpha values on a small, consistent scale such as steps of 5 or 10.
<!-- Tones are calculated relative to the base color -->
<button
class="bgc-primary-500 &:hover:bgc-primary-600 &:active:bgc-primary-700"
>
Interactive Button
</button>
Dynamic Runtime Values
Avoid generating unique classes for every possible runtime value (like a slider or mouse position). Instead, use high-frequency updates with Dynamic Classes ($$) or constrain values to a known set of tokens. Do not pass unsanitized user input directly into class names.
<!-- ⚠️ Risky: Unbounded CSSOM growth and unsafe input -->
<div class="w=${userInput}px"></div>
<!-- ✅ Safe: Bound to known numeric scale values -->
<div class="w-${[32, 48, 64][sizeIndex] ?? 48}"></div>
<!-- ✅ Safe: Ephemeral CSS layer with $$ prefix -->
<div
When not to use it
- →When guessing Maple classes from other utility systems like Tailwind or Bootstrap
- →When using arbitrary values instead of semantic tokens
- →When creating component-sized aliases like @button or @card
Limitations
- →Requires adherence to Maple's specific syntax and conventions
- →Discourages guessing classes from other utility systems
- →Emphasizes semantic tokens and scoped variables over arbitrary values
How it compares
This skill enforces a variable-first, stack-agnostic approach to CSS with specific syntax and best practices, providing a structured way to build responsive interfaces compared to generic CSS styling.
Compared to similar skills
Maple CSS Engine side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| Maple CSS Engine (this skill) | 0 | 1mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 4mo | Review | Intermediate |
| svg-precision | 527 | 3mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
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.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".