PikaCSS

English

繁體中文

English

繁體中文

Appearance

Agent Skills ​

PikaCSS ships with an agent skill that provides AI-assisted guidance for both consuming and extending PikaCSS. Install it as a Claude Code plugin, or with the skills CLI for any other supported coding agent.

Install ​

Claude Code Plugin ​

In Claude Code, add this repository as a plugin marketplace, then install the plugin:

text
/plugin marketplace add pikacss/pikacss
/plugin install pikacss@pikacss

Claude loads the skill on its own when your work matches its description; see How to Trigger to invoke it explicitly. /plugin marketplace update refreshes the marketplace to the skill content on the repository's default branch, which can be ahead of the latest npm release.

Skills CLI ​

For any supported agent, including Claude Code, install the skill directly with the skills CLI:

bash
npx skills add pikacss/pikacss --skill pikacss-use

Both paths install the same skills/pikacss-use content.

pikacss-use ​

When to Use ​

Use this skill when you are working with PikaCSS in any capacity:

  • Setting up PikaCSS in a new project
  • Configuring engine options or build integrations
  • Using pika() and its variants
  • Consuming official plugins (reset, icons, fonts, typography, and design tokens)
  • Troubleshooting transforms, generated files, TypeScript declarations, or configuration reloads
  • Choosing neutral or Node.js runtime adapters for plugins that load local resources
  • Creating a new engine plugin from scratch
  • Implementing plugin hooks, structured diagnostics, and lifecycle behavior
  • Extending EngineConfig with module augmentation
  • Registering external configuration dependencies for file watching
  • Writing plugin tests

How to Trigger ​

The skill is automatically activated when your question relates to PikaCSS usage or plugin development. You can also explicitly mention "using PikaCSS", "PikaCSS setup", or "PikaCSS plugin development" in your prompt.

Installed as a Claude Code plugin, the skill is namespaced: invoke it with /pikacss:pikacss-use. Installed with the skills CLI, it is not namespaced and appears under its own name, /pikacss-use.

Coverage ​

  • Installation and build tool integration (Vite, Webpack, Rollup, esbuild, Rspack, Rolldown, and Nuxt)
  • Node.js, Vite, source-file, and static-analysis compatibility constraints
  • Engine configuration and customization
  • Generated CSS and TypeScript declaration files
  • The pika(), pika.str(), pika.arr(), and pikap() functions
  • Official plugin consumption and configuration
  • Neutral and Node.js plugin entry points
  • ESLint integration
  • TypeScript autocomplete support
  • Plugin structure and defineEnginePlugin
  • Lifecycle hooks, hook context, diagnostics, and execution order
  • Config augmentation via TypeScript module augmentation
  • Layer management and preflight injection
  • Selector, shortcut, variable, keyframe, and design-token registration
  • External config dependency watching
  • Plugin testing patterns using createEngine

Next ​