Wensity

Wensity components skill.

Teaches Claude Code, Codex, Cursor and other AI coding agents to find, install and compose Wensity components and blocks from the live catalog instead of building them by hand.

When a page needs a hero, a pricing section, an AI chat input or an animated background, a finished Wensity piece often beats one written from scratch, because its motion, states and accessibility have already been worked out. This skill teaches your agent to search the live catalog through the Wensity MCP server, the public API or the CLI, compare a few candidates, install the right one and wire it in without breaking its theming or accessibility.

Skill
wensity-components
Plan
Included with Wensity Pro
Loads when
Mentioning Wensity, or asking for a ready-made component, section or block in a React project
Works in
Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
Format
Agent Skills (SKILL.md), plain files in your project
Pack
One of the Wensity design skills for AI coding agents

Install

1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.

terminal
pnpm dlx wensity@latest login

2. Add the skill. It goes into every agent the CLI finds in your project.

terminal
pnpm dlx wensity@latest skills add wensity-components

Wensity components comes with Wensity Pro, together with every Pro skill, component, block and template.

Get Pro

When it loads

You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:

  • Find two pricing sections from the Wensity catalog that would fit this site.
  • Add an animated hero to this Next.js landing page using Wensity.
  • Is there a ready-made AI chat input I can install?

What it covers

When to check
Page sections, animated and interactive pieces, and basic primitives for a project that is starting without a UI kit.
Search
The MCP server when it is connected, the public API with no setup, or the CLI.
Choose
Matched to the job and the design direction, one signature piece per page, access and dependencies checked first.
Install
The exact CLI commands, the Pro login flow and what update does to edited files.
Compose
Props and className first, the project's tokens respected, sample content replaced.
After installing
A typecheck, a look at phone and desktop widths, and a short summary of what was added.

Find the right piece

Type what you need, the way you would ask your agent. Matches come from the live Wensity catalog, free and Pro, each with the command that installs it.

3 matches in the Wensity catalog for “animated number counter”

Best match

Count Up Animation
Component, free

A count up animation for React: every digit rolls into place, in any number format.

npx wensity@latest add count-up-animation

With the skill: It searches the live catalog by the job, shows you the piece before it installs anything, checks free or Pro, and gives you the one command that adds it.

Key rules

Always read the catalog live
The catalog changes every week, so the skill holds no list of its own.
Tokens never go through chat
The CLI and MCP server read your saved login. You never paste a token to the agent.
Check access before promising
Pro items are offered only when you have Pro, with a free or hand-built option otherwise.
Fewer, stronger pieces
A page gets one standout component. Several animated pieces fighting for attention cancel each other out.
Keep accessibility intact
Labels, roles, focus and reduced motion stay as the component ships them.

Restyle without breaking it

One switch, given a brand colour two ways. Run an update and see which side keeps both its colour and its focus ring.

Pulls the latest catalog version, as a later update would.

Without the skill

switch.tsx: edited, differs from the catalog

Without the skill: The agent edited the file itself: a hard-coded green and the focus ring removed. Tab to it and focus disappears, and the next update wipes the green out.

With the skill

switch.tsx: matches the catalog

With the skill: The brand colour goes in through a token and a class, and the file stays as the catalog shipped it. Updates keep the brand and the focus ring, and nothing has drifted.

Files

Everything installs as plain files in your project, in a folder named after the skill.

SKILL.md
Search, choose, install and compose, with the MCP, API and CLI paths.

Works well with

  • Landing page

    Pro

    Message first, page structure, hero, real proof, features, pricing, FAQ, motion and performance.

  • Design director

    Pro

    The core workflow: read, plan, review against generic UI, build and critique. Routes to every other skill.

  • UI review and polish

    Pro

    A tag-aware code scanner and a rendered review across 12 categories, ranked P0 to P2, with a full checklist.