Skills
.Work. You
Rest

pikacss-expert

Official

Master PikaCSS API and workflows.

Software Engineering#API#plugins#CSS-in-JS#engine#pika#PikaCSS#atomic-css
Authorpikacss
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill delivers expert guidance for using the PikaCSS API to configure engines, define styles, and extend behavior with plugins, enabling scalable atomic CSS workflows without guesswork.

Core Features & Use Cases

  • API mastery: Use pika() to generate atomic CSS rules from a cohesive style object, ensuring consistent class generation across projects.
  • Engine configuration & theming: Learn to create engines with themes, presets, and plugins for design systems that scale.
  • Plugin ecosystem & shortcuts: Leverage official and custom plugins to extend capabilities, reuse shortcuts, and accelerate UI development.

Quick Start

  • Install the package: pnpm add @pikacss/core
  • Create an engine and define styles:
    • import { createEngine, pika } from '@pikacss/core'
    • const engine = createEngine({ plugins: [], theme: { colors: { primary: '#3b82f6' } } })
    • const styles = pika({ display: 'flex', padding: '1rem' })
  • Use the generated class:
    • <div className={styles.className} />

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: pikacss-expert
Download link: https://github.com/pikacss/pikacss.github.io/archive/main.zip#pikacss-expert

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.