@cognivo/claude-code-skill

A Claude Code skill bundle. Installs into ~/.claude/skills/cognivo via symlink, giving Claude Code Cognivo-aware component selection, token enforcement, and cognitive-bias wrapper guidance. Activates with /cognivo or natural-language triggers.

Installation

pnpm add -D @cognivo/claude-code-skill

Run the installer once — it symlinks the skill directory into ~/.claude/skills/cognivo:

npx install-cognivo-skill

Alternatively, invoke the installer from inside a local checkout:

bash node_modules/@cognivo/claude-code-skill/install.sh

Quick start

After install, restart Claude Code. The skill auto-activates when it detects Cognivo imports, or you can trigger it explicitly:

/cognivo generate a pricing page with 3 tiers

It will: pick the correct cg-* tags, use tier-3 then tier-2 tokens, apply appropriate bias-* wrappers (anchoring on the middle tier, social-proof on the popular one), and refuse dark-pattern nudges.

What the skill provides

When active, Claude Code operates with five extra instructions:

Component selection — prefers Cognivo tags (<cg-button>, <cg-stack>, <cg-card>) over generic HTML.
Bias wrappers — recommends bias-anchoring, bias-scarcity, bias-social-proof, bias-authority, bias-commitment, bias-reciprocity where genuinely relevant; refuses fabricated urgency.
Token discipline — never emits raw hex / rgba / magic numbers; always references var(--cg-*). Tier 3 → 2 → 1 priority.
Structured trees — composes pages with canonical Cognivo patterns (Stack > Card > Button, Navbar + Sidebar + Stack).
Code validation — flags fake tokens, transition: all, missing ARIA, and SVGs rendered via html instead of Lit's svg template.

Skill files

The skill ships five Markdown files in skill/. Claude Code loads SKILL.md on activation and the others on demand.

File	Contents
`SKILL.md`	Front-matter with triggers (`/cognivo`, "generate ui", "pricing page") plus the core instructions.
`PATTERNS.md`	Canonical UI patterns and the Cognivo tree structure for each (pricing, dashboard, settings, onboarding, chat).
`BIASES.md`	Quick reference to the 6 bias wrappers — when each is appropriate and what the underlying claim must look like.
`TOKENS.md`	Strict token rules with examples and the forbidden-pattern list (`--cg-gray-`, `--cg-brand-`, raw values).
`COMPONENTS.md`	Full tag catalog — one-liner per component, grouped by `cg-` / `ai-` / `bias-*`.

Invocation

Explicit

/cognivo  <your request>

Natural-language triggers

"generate ui for a pricing page"
"which cognivo component for a streaming response?"
"audit my cognivo tokens"
"wrap this pricing card in bias-anchoring"

Claude Code auto-loads the skill when it sees these phrases or an import from @cognivo/components, @cognivo/gen-ui, or any bias-* tag.

Caveats

Symlink install. The installer errors if ~/.claude/skills/cognivo already exists and is not a symlink — remove it manually and re-run.
Requires a restart. Claude Code enumerates skills on launch. Install the skill, then restart the client.
Keeps itself in sync. Because it symlinks into the skill directory, updates flow automatically when you bump the package.
Not a lint replacement. The skill guides generation; use @cognivo/eslint-plugin to enforce the rules on existing code.