# Blocks — Package AI Guide

`@chainlink/blocks` is the Chainlink design system component library (React + TypeScript + Tailwind).

**For agents:** open the matching skill under `skills/` for workflows, MCP usage, precedence, and chooser logic. This file is only a router.

## Skills router

| I want to…                                          | Skill                                                                          |
| --------------------------------------------------- | ------------------------------------------------------------------------------ |
| Build a UI (with Blocks) from a prompt and/or Figma | [`skills/blocks-ui-builder/SKILL.md`](skills/blocks-ui-builder/SKILL.md)       |
| Write or edit `.stories.tsx`                        | [`skills/blocks-stories/SKILL.md`](skills/blocks-stories/SKILL.md)             |
| Write or edit `.mdx`                                | [`skills/blocks-mdx/SKILL.md`](skills/blocks-mdx/SKILL.md)                     |
| Write or edit `.figma.tsx` (Code Connect)           | [`skills/blocks-figma-connect/SKILL.md`](skills/blocks-figma-connect/SKILL.md) |

Normative long-form guides (edit these, not copies elsewhere): [`skills/blocks-mdx/reference/GUIDE_MDX.md`](skills/blocks-mdx/reference/GUIDE_MDX.md), [`skills/blocks-stories/reference/GUIDE_STORIES.md`](skills/blocks-stories/reference/GUIDE_STORIES.md), [`skills/blocks-figma-connect/reference/FIGMA_CODE_CONNECT_GUIDE.md`](skills/blocks-figma-connect/reference/FIGMA_CODE_CONNECT_GUIDE.md).

## Shipping `skills/` with the package

The `skills/` directory ships with `@chainlink/blocks`. Normative long-form guides live only under `skills/<skill>/reference/*.md` (not at the package root). In other repositories, symlink or copy `node_modules/@chainlink/blocks/skills` to `.agents/skills`, `.claude/skills`, `.cursor/skills`, and/or `.codex/skills` when your tool expects those paths.

In **this monorepo**, each tool folder uses **directory symlinks** only—e.g. `.claude/skills/blocks-mdx` → `libs/blocks/skills/blocks-mdx`—so there is a single canonical `SKILL.md` and `reference/` tree per skill. After creating or replacing `.claude/skills/`, restart Claude Code once if skills do not appear.

**Git:** stage each skill as the **symlink path only** (e.g. `git add .agents/skills/blocks-mdx`), not paths under it like `.agents/skills/blocks-mdx/SKILL.md`—Git rejects the latter as “beyond a symbolic link” when the parent is a directory symlink.