The building blocks of data-rich React apps — headless data grids, responsive charts, performant forms, a rich-text editor, drag-and-drop, and shadcn/ui components
6 skills · Works with Claude Code, Codex, Cursor & more
Give Claude Code full context on shadcn/ui components — proper usage patterns, theming, composition, and accessibility. Build UIs with the shadcn component library correctly.
mkdir -p ~/.claude/skills/shadcn-ui && curl -fsSL https://raw.githubusercontent.com/anthropics/skills/HEAD/skills/canvas-design/SKILL.md -o ~/.claude/skills/shadcn-ui/SKILL.md Build powerful data grids with TanStack Table's headless engine. Wires column definitions, sorting, filtering, pagination, grouping, row selection, and virtualization into fully custom-styled tables you control end to end.
mkdir -p ~/.claude/skills/tanstack-table && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/tanstack-table/SKILL.md Compose responsive React charts with Recharts. Builds line, bar, area, pie, and composed charts from SVG primitives with custom tooltips, legends, gradients, reference lines, and responsive containers for dashboards and analytics.
mkdir -p ~/.claude/skills/recharts && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/recharts/SKILL.md Build fast, uncontrolled forms with React Hook Form. Wires register and useForm, integrates Zod/Yup schema validation via resolvers, handles field arrays, dependent fields, and async submission with minimal re-renders.
mkdir -p ~/.claude/skills/react-hook-form && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/react-hook-form/SKILL.md Build headless rich-text editors with Tiptap. Configures the ProseMirror-based editor, custom extensions and nodes, slash commands, bubble/floating menus, collaborative editing, and clean HTML/JSON output you fully style.
mkdir -p ~/.claude/skills/tiptap && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/tiptap/SKILL.md Build accessible drag-and-drop with dnd kit. Implements sortable lists, kanban boards, and draggable canvases with keyboard support, collision detection, drag overlays, and sensors — lightweight and free of external dependencies.
mkdir -p ~/.claude/skills/dnd-kit && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/react-expert/SKILL.md -o ~/.claude/skills/dnd-kit/SKILL.md Engineer reliable AI agents — build on the Claude Agent SDK, coordinate teams with multi-agent patterns, give them memory, and keep them safe with mechanical guardrails and evaluation
Pick the right framework and ship agents fast — type-safe Python with Pydantic AI, multi-agent orchestration with OpenAI Agents SDK, Agno, and CrewAI, TypeScript graphs with LangGraph.js, and typed workflows with Mastra
Build AI-powered applications with RAG, multi-agent systems, prompt engineering, and MCP integrations