component library skills

103 tagged component library, measured the same way as everything else here.

Browse within: design-system 36accessibility 32frontend-platform 32monorepo 32ui-architecture 32workspace 32design-tokens 14design-language 12oklch 12agentic 9chakra-ui 9ReAct 6reactjs 6typescript 6

heroui-migration

01

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

02

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

03

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

guokaigdg/animal-island-ui

Skill Claude CodeCodex

Build React UIs in the animal-island-ui style — an Animal Crossing-inspired component library (warm earth tones, pill shapes, 3D game-button depth, soft motion). Use when (1) building pages or components with the animal-island-ui npm package in a React project; (2) generating a standalone single-file HTML page in this…

4.5k yesterday A 107 tokens

add-component

05

signerlabs/ShipSwift

Skill Claude CodeCodex

Add a SwiftUI component from ShipSwift. Use when the user says "add component", "add a view", "add X view", "I need a chart", "add animation", or wants a specific UI element.

3.0k 22d ago A 48 tokens original MIT

build-feature

06

signerlabs/ShipSwift

Skill Claude CodeCodex

Build an iOS feature using ShipSwift components. Use when the user says "build", "create", "add a feature", or describes an iOS feature they want to implement.

3.0k 22d ago A 40 tokens original MIT

explore-recipes

07

signerlabs/ShipSwift

Skill Claude CodeCodex

Explore and browse available ShipSwift components. Use when the user says "explore", "browse", "show recipes", "list components", "what's available", or wants to discover what ShipSwift offers.

3.0k 22d ago A 47 tokens original MIT

opentiny/tiny-vue

Skill Claude CodeCodex

Development rules for a TinyVue component library that supports Vue 2 and Vue 3, desktop browsers, and mobile-first layouts. They separate templates, reusable logic, styles, design rules, localization, and tests.

2.3k 4d ago A 12 tokens original MIT

internet-development/www-sacred

Skill Claude CodeCodex

Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…

1.6k 10d ago A 84 tokens original MIT

internet-development/www-sacred

Skill Claude CodeCodex

Take a sacred React component (or a sacred screen that mirrors a Simulacrum CLI surface) and graft it into a foreign React codebase that already ships its own design system, build pipeline, and CSS toolchain — without breaking the host or polluting it with sacred-specific globals.

1.6k 10d ago A 0 tokens original MIT

internet-development/www-sacred

Skill Claude CodeCodex

Take a React Window.tsx (or any sacred component) and produce a terminal CLI screen written in Python that uses Simulacrum's Python mirror in scripts/python/sacredcli/. Simulacrum is the sacred CLI framework — the JavaScript half lives in scripts/cli/lib/, the Python half is a one-to-one snakecase mirror.

1.6k 10d ago A 0 tokens original MIT

design-code

12

plugin87/ux-ui-agent-skills

Skill Claude CodeCodex

Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific…

820 5d ago A 78 tokens

design-component

13

plugin87/ux-ui-agent-skills

Skill Claude CodeCodex

Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework…

820 5d ago A 79 tokens

image-to-code

14

plugin87/ux-ui-agent-skills

Skill Claude CodeCodex

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants…

820 5d ago A 77 tokens

releasing

15

vuetifyjs/0

Skill Claude CodeCodex

Authoring a changeset, or cutting a release for @vuetify/v0 and the @paper/ design systems. Use when writing a .changeset/.md file, deciding what belongs in changelog copy, re-entering or exiting changesets pre/beta mode, or reviewing a Version Packages PR. Covers the changeset content contract, the two version…

742 2d ago A 84 tokens

vuetify0

16

vuetifyjs/0

Skill Claude CodeCodex

Use when building Vue 3 UI in this repo or any v0 consumer — and when about to write a native , a homemade setTimeout timer, or a homemade overlay/dialog. Those are Button, useTimer, and Dialog/Popover/useStack; do not roll them. Also selection, forms, registries, virtual scroll, popovers, focus, snackbars, SSR…

742 2d ago A 145 tokens

animate-text

17

marvkr/better-design

Skill Claude CodeCodex

Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or…

220 12d ago A 81 tokens original MIT

better-design

18

marvkr/better-design

Skill Claude CodeCodex

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating…

220 12d ago A 77 tokens original MIT

impeccable

19

theexperiencecompany/gaia-ui

Skill Claude CodeCodex

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…

216 19d ago A 189 tokens copy · 81% MIT

shadcn

20

productdevbook/shadcn-htmx

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. 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 file. Also triggers for…

49 3mo ago A 90 tokens copy · 92% MIT

uiNerd16/aicanvas

Skill Claude CodeCodex

Opinionated creative skill for building stunning 3D, particle, and generative visual components. Use when building any Three.js, Canvas, WebGL, or visually complex component. Provides specific visual recipes, mathematical patterns, and creative direction — not API docs.

48 4d ago A 58 tokens original MIT

uiNerd16/aicanvas

Skill Claude CodeCodex

Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Use when reviewing UI animations, transitions, hover states, or any motion design work. Provides per-designer perspectives with context-aware weighting.

48 4d ago A 60 tokens original MIT

codereview

23

363045841/KLineChartQuant

Skill Claude CodeCodex

Use when reviewing code for code smells and architecture problems, especially state consistency, layer boundaries, model contracts, and change propagation.

21 yesterday A 29 tokens original MIT

363045841/KLineChartQuant

Skill Claude CodeCodex

A guide for writing Git commit messages in the Conventional Commits format. Git commits are saved snapshots of code changes, and this format labels their purpose, such as a feature, fix, or documentation change.

21 yesterday A 15 tokens original MIT