components skills

153 tagged components, measured the same way as everything else here.

Browse within: ReAct 61design-system 32python 26chat-application 25image-generation 25mantine 25reflex 25node 24server-rendering 24universal 24typescript 19ui 19angular 18design 13

vercel/next.js

Skill Claude CodeCodex

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…

142k 2d ago A 95 tokens original MIT

vercel/next.js

Skill Claude CodeCodex

Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…

142k 2d ago A 170 tokens original MIT

vercel/next.js

Skill Claude CodeCodex

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit Link prefetch={true} behavior, preserve existing prefetched UI with…

142k 2d ago A 103 tokens original MIT

shadcn-ui/ui

Skill Claude CodeCodex

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

123k +74 yesterday A 61 tokens original MIT

shadcn

05

shadcn-ui/ui

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…

123k +74 yesterday A 94 tokens original MIT

heroui-migration

06

heroui-inc/heroui

Skill Claude CodeCodex

HeroUI v2 to v3 migration guide for agents. Use when migrating HeroUI v2 apps to v3, upgrading components, or accessing migration documentation. Keywords: HeroUI migration, v2 to v3, migration guide, upgrade HeroUI.

31k 3d ago C 56 tokens original Apache-2.0

heroui-native

07

heroui-inc/heroui

Skill Claude CodeCodex

HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards, TextFields, Dialogs; installing heroui-native; configuring dark/light themes; or fetching component docs. Keywords: HeroUI Native, heroui-native, React Native UI…

31k 3d ago C 80 tokens original Apache-2.0

heroui-react

08

heroui-inc/heroui

Skill Claude CodeCodex

HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.

31k 3d ago C 83 tokens original Apache-2.0

example

09

recharts/recharts

Skill Claude CodeCodex

Create new example charts for Recharts documentation website.

28k 4d ago A 11 tokens original MIT

theme-component

10

recharts/recharts

Skill Claude CodeCodex

Add complete theme support for one Recharts component. Invoke with the component name, for example theme-component XAxis.

28k 4d ago A 27 tokens original MIT

typescript

11

recharts/recharts

Skill Claude CodeCodex

Write strongly-typed TypeScript code in Recharts.

28k 4d ago A 12 tokens original MIT

magic-ui

12

magicuidesign/magicui

Skill Claude CodeCodex

Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.

22k 21d ago A 56 tokens original MIT

AgentEra/Agently

Skill Claude CodeCodex

Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together.

1.6k 3d ago A 47 tokens original Apache-2.0

building-components

14

vercel/components.build

Skill Claude CodeCodex

Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

790 12d ago A 46 tokens

tool-ui

15

assistant-ui/tool-ui

Skill Claude CodeCodex

Find, install, configure, and integrate Tool UI components in React apps using shadcn registry entries, compatibility checks, scaffolded runtime wiring, toolkit setup with assistant-ui, and troubleshooting workflows. Use when developers ask to add one or more Tool UI components, choose components for a use case…

773 3mo ago A 89 tokens original MIT

react-aria

16

NextAdminHQ/nextjs-admin-dashboard

Skill Claude CodeCodex

Build accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.

542 14d ago A 49 tokens

release

17

av/remotion-bits

Skill Claude CodeCodex

Release remotion-bits to GitHub, Cloudflare, and npm. Use when bumping the package version, updating CHANGELOG.md, building the registry, creating the release commit, pushing master, opening a prefilled GitHub release form, deploying docs, and publishing to npm.

454 5mo ago A 59 tokens

remotion-bits

18

av/remotion-bits

Skill Claude CodeCodex

Animation components and utilities for Remotion video projects. Use when building Remotion compositions with text animations, gradient transitions, particle effects, 3D scenes, or staggered motion effects. Provides example bits (complete compositions) and reusable components that can be installed via jsrepo.

454 5mo ago A 60 tokens

chaxus/ran

Skill Claude CodeCodex

Use when designing, reviewing, or improving web UI visual quality, especially when a developer-built interface feels cluttered, flat, generic, poorly spaced, weakly hierarchical, or hard to scan.

272 5d ago A 44 tokens original MIT

ranui

20

chaxus/ran

Skill Claude CodeCodex

Use when building UI with the ranui web-component library (elements like , , , , ) or its fluent DOM builder (ranui/builder — Div/View/Span/signal/createEffect/EventManager). Covers the import map, the full element inventory, conventions, accessibility, and where the authoritative API reference lives.

272 5d ago A 87 tokens original MIT

ranuts

21

chaxus/ran

Skill Claude CodeCodex

Use when working with the ranuts utility library — DOM/BOM/string/object/number/color/time helpers and reactivity from ranuts/utils (e.g. createSignal, throttle/debounce, cloneDeep, escapeHtml, getMime, MessageCodec, localStorage helpers), the node-only server toolkit ranuts/node, the 2D rendering engine…

272 5d ago A 109 tokens original MIT

storybook-story

22

radix-ng/primitives

Skill Claude CodeCodex

Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions. Use when: writing stories, updating docs, adding a new story, updating MDX, "обнови сторис", "напиши доки для", "update stories", "add story". Enforces: one-file-per-component rule, ?raw source imports…

269 7d ago A 90 tokens original MIT

testing

23

radix-ng/primitives

Skill Claude CodeCodex

Test Radix NG primitives across every layer and pick the RIGHT one for a change: Vitest unit (zoneless), jest-axe a11y, Playwright browser regression (apps/visual-regression), SSR (apps/radix-ssr-testing), and perf benches (apps/radix-perf-testing). Enforces the rule that layout / positioning / part-visibility /…

269 7d ago A 184 tokens original MIT

radix-ng-examples

24

radix-ng/primitives

Skill Claude CodeCodex

Index of every documented @radix-ng/primitives example. Use when implementing a UI feature to find a working, copy-paste-ready Angular pattern built on the primitives. Each component has an index doc linking to per-example source shards you can copy-paste.

269 7d ago A 59 tokens original MIT