antd

A reference and command-line workflow for Ant Design, a library of ready-made React interface components. It covers component properties, examples, styling hooks, design tokens, and version migrations.

In plain words
What is it for?
Building with Ant Design components, debugging their usage, checking available properties and styles, and moving projects between Ant Design versions.
Why use it?
It reduces guesswork when writing or updating Ant Design code. Developers can check the correct API and examples for the installed version instead of relying on memory.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/punkadillo/figma-code-composer/antd
Any agent
npx skills add punkadillo/figma-code-composer --skill antd
Clone the repo
git clone --depth 1 https://github.com/punkadillo/figma-code-composer

Made for: Claude Code, Codex.

Per session 69 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,315 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin 89% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00069 $0.02315
Opus 5 $0.00034 $0.01157
Sonnet 5 $0.00014 $0.00463
Haiku 4.5 $0.00007 $0.00231

Measured 3d ago against content hash e16e61203faf, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

antd scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

89% identical to antd — 21 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.figma-pipeline/skills/antd/SKILL.md · 260 lines

How it starts

The opening of the file, as written. The whole thing — 260 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Ant Design CLI

You have access to @ant-design/cli — a local CLI tool with bundled antd metadata for v4/v5/v6 (plus migration guides for v3 → v4, v4 → v5, v5 → v6). Use it to query component knowledge, analyze projects, and guide migrations. All data is offline, no network needed.

Setup

Before first use, check if the CLI is installed. If not, install it automatically:

which antd || npm install -g @ant-design/cli

After running any command, if the output contains an "Update available" notice, run npm install -g @ant-design/cli to update before continuing.

Always use --format json for structured output you can parse programmatically.

Scenarios

1. Writing antd component code

Before writing any antd component code, look up its API first — don't rely on memory.

# Check what props are available
antd info Button --format json

# Get a working demo as starting point
antd demo Button basic --format json

# Check semantic classNames/styles for custom styling
antd semantic Button --format json

# Check component-level design tokens for theming
antd token Button --format json

Workflow: antd info → understand props → antd demo → grab a working example → write code.

2. Looking up full documentation

When you need comprehensive component docs (not just props):

antd doc Table --format json        # full markdown docs for Table
antd doc Table --lang zh            # Chinese docs

3. Debugging antd issues

When code isn't working as expected or the user reports an antd bug:

# Collect full environment snapshot (system, deps, browsers, build tools)
antd env --format json

# Check if the prop exists for the user's antd version
antd info Select --version 5.12.0 --format json

# Check if the prop is deprecated
antd lint ./src/components/MyForm.tsx --format json

# Diagnose project-level configuration issues
antd doctor --format json

Workflow: antd env → capture full environment → antd doctor → check configuration → antd info --version X → verify API against the user's exact version → antd lint → find deprecated or incorrect usage.

Read the full file on GitHub · 260 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 260 lines · 69 tokens per session scan A e16e61203faf

Subscribe to this mod's changes

antd is a skill published in the GitHub repository punkadillo/figma-code-composer (3 stars, last pushed 14d ago), licensed MIT. It adds 69 tokens to every session and 2,315 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 89% identical to antd, differing in 21 lines, and is treated as a copy.

Related

Other skills, from other repositories

moai-ref-react-patterns

React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design…

modu-ai/moai-adk · 72 tokens

moai-domain-frontend

Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.

modu-ai/moai-adk · 54 tokens

formkit

Use when working with FormKit forms, validation, schema, or custom inputs in React, Vue, or Nuxt projects.

formkit/formkit · 28 tokens

frontend-fundamentals

Reviews React/Vue component architecture, state, and hooks. Use when junior builds components, forms, modals, uses useState, useEffect, adds state, or asks "is this good React".

DanielPodolsky/ownyourcode · 47 tokens

design-md-to-app

Generate or customize a frontend app from a DESIGN.md (Google design.md spec): reads its tokens and produces a working React app pre-styled to match. Next.js 16 + App Router only; pre-16 refused. Four UI libraries — shadcn/ui, Base UI, MUI, Coss/UI (via coss-ui) — and TanStack Form + Zod (default) or react-hook-form.…

lukedj78/dev-flow · 229 tokens

forms

Build or edit any form in a Next.js 16 App Router app through one shared toolkit in lib/forms/, with dirty + valid Save gating — on TanStack Form + Zod (default) or react-hook-form (auto-detected). Use when the user says "form", "edit panel", "create dialog", "settings page", "save button", "dirty state", or reaches…

lukedj78/dev-flow · 226 tokens