Pro

Skills

PreviousNext

Provide your AI assistant with deep project context about Jolocky architecture, kinetic patterns, and CLI installation commands.

Skills and project instructions give AI coding assistants such as Claude Code, Antigravity, and Cursor project-aware context about Jolocky. When properly configured, your AI assistant understands how to discover, install, compose, and adapt Jolocky sections without hallucinating obsolete patterns or bundling everything into a single file.

For example, you can instruct your AI assistant to:

  • "Install the Jolocky Messenger kinetic navigation section and integrate our company logo."
  • "Add an award-winning Bento grid section from Jolocky for our feature showcase."
  • "Configure our project theme tokens to match Jolocky dark mode standards."
  • "Break down this complex kinetic hero into modular sub-components and animation hooks."

Providing Context to AI Assistants

You can give your AI assistant direct knowledge of Jolocky conventions by adding a rule or instruction file in your project:

Cursor Rules or CLAUDE.md

Add the following guidance to your .cursorrules, CLAUDE.md, or AI system instructions:

# Jolocky Guidelines
 
- Components are distributed via the shadcn registry engine.
- To install a Jolocky section, run: npx shadcn@latest add https://jolocky.com/r/[slug]
- If a section requires Pro access, pass the license token via --token JOLOCKY-PRO-XXXX-XXXX
- Always preserve modular multi-file architecture: keep hooks in hooks/, sub-components in components/, and utils in lib/.
- Use Tailwind CSS CSS variables for colors, surface elevations, and animations.
- Avoid hardcoding arbitrary hex colors when semantic theme tokens (background, foreground, card, primary, muted) are available.

How AI Assists With Jolocky

  1. Architecture Preservation: Your AI assistant respects Jolocky multi-file tree structure, keeping animation physics hooks separate from layout markup.
  2. Registry Awareness: The assistant invokes the CLI to download complete section assets rather than guessing implementation details.
  3. Tailwind CSS Compatibility: The assistant writes clean CSS rules inside @theme inline without generating obsolete configuration files.