Components

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fall

18 stars 7 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add AnayDhawan/Components --skill components

Manual install

git clone --depth 1 https://github.com/AnayDhawan/Components.git /tmp/Components
mkdir -p ~/.claude/skills
cp -r /tmp/Components/. ~/.claude/skills/components

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# components

**Fetch flashy, proven, animated React+Tailwind components LIVE from code libraries instead of hand-writing complex motion.** User describes an effect → match it → pull the real component at build time → adapt to brand.

## What this is

- **PRIMARY: showpiece live-fetch.** Distinctive/animated components (laptop scroll, 3D card, beams, globe, marquee...) fetched live from code libraries via registry CLI / WebFetch.
- **FALLBACK: plain components.** Standard button/form/modal/table when no "wow" is asked.
- **SOURCE layer only.** After placing the component, hand off final polish/distinctiveness to `impeccable` / `frontend-design` **if installed** - both are optional sibling skills, not dependencies of this repo. See `references/handoff.md` for what to do when neither is available.
- **Galleries ≠ code.** Dribbble, godly.website, Awwwards = visual reference ONLY. Never fetch components from them.
- **Layout curation.** `layouts[]` are pre-composed arrangements (web sections or video beat patterns). `TASTE.md` is the required-reading standard for picking or building one - read it before selecting a layout.

## Decision flow

Read the full skill on GitHub

Details

Skill name: components
Repository: AnayDhawan/Components
Repo updated: 3 October 2026

FAQ

What does the Components skill do?

How do I install the Components skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add AnayDhawan/Components --skill components. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Components popular?

It lives in AnayDhawan/Components, which has 18 GitHub stars and 7 forks.

Related skills

Typescript React Nextjs Patterns

leejpsd/typescript-react-nextjs-patterns

Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happe

Frontend & Design

UI Sift

Ciao1019/ui-sift

设计、实现、评审或打磨简洁且交互精致的前端页面与组件。提供项目画像、视觉判断、精选组件检索、官方 skills/MCP 与源码发现、多库集成和证据验收。适用于新页面、后台、AI 对话、文档工作台、参考还原和局部 UI 改善；纯后端、仅修复业务逻辑或机械改字时不使用。

Frontend & Design

Apple Design System

rukkiecodes/claude-apple-design-system

Apple-inspired UI/UX design language (from getdesign.md/apple) as adapted into a production app. Use when building, restyling, or reviewing any UI — screens, components, buttons, headers, alerts, sheets, cards, forms, typography, color, or spacing — so the result matches this Apple design language: photography-first, a single blue accent, pill CTAs, no chrome shadows, and a strict weight ladder. Trigger on "design a screen", "style this component", "make it look Apple / like QueenSkiilia", "build the UI", or "review my UI for design consistency".

Frontend & Design

Telegram Premium Emoji

Zulut30/premium-telegram-emoji

Select verified Telegram custom emoji by meaning, preserve a consistent visual style across a bot or application, and generate HTML with catalog IDs. Use when a Telegram project needs premium emoji or the user requests a palette from this catalog. Includes ordered multi-emoji compositions. Not for unrelated UI icons.

Frontend & Design

Screenshot to HTML

sevzq/screenshot-to-html

Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".

Frontend & Design

Dsh Plugin Dev

realchendahuang/dsh-skill

DeepSeek Harness (DSH) 插件、扩展与技能开发权威规范。当需要为 DSH 编写自定义工具 (Tool)、拦截钩子 (Hook)、UI 扩展、服务提供方或打包发布 DSH 插件时使用。提供官方 Cordis 微内核架构契约、执行流水线、隔离调试与质量校验 SOP。

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.