skills.rest
keidsondesigner
keidsondesignerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-component

Create React components following Bewear E-commerce conventions with shadcn/ui, TypeScript, and Tailwind CSS.

Updated Aug 27, 2026
Search Tags:#typescript#react#component#tailwind#shadcn-ui#bewear
One-click install
npx skills add https://github.com/keidsondesigner/nextjs-bewear-ecommerce --skill create-component-keidsondesigner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-component
Source: https://github.com/keidsondesigner/nextjs-bewear-ecommerce/tree/main/.claude/skills/create-component
Command: npx skills add https://github.com/keidsondesigner/nextjs-bewear-ecommerce --skill create-component-keidsondesigner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps engineers quickly scaffold React components that follow Bewear E-commerce project's conventions, ensuring consistent naming, architecture, and UI primitives using shadcn/ui, TypeScript, and Tailwind CSS.

Core Features & Use Cases

  • Enforce conventions: kebab-case file names, PascalCase component names, and default export.
  • Integrate shadcn/ui: generate components using available shadcn/ui primitives for rapid UI development.
  • Server/Client Component guidance: provide guidance to avoid placing "use client" in page.tsx and suggest appropriate client components for interactivity.
  • Use cases: when adding a new component, refactoring existing ones, or implementing reusable UI pieces across pages.

Quick Start

For example, create a new client component at src/app/orders/components/AddToCartButton.tsx that uses shadcn/ui Button and follows the naming rules; export the component as default and ensure any interactivity is isolated to a dedicated client component as needed.

Frequently Asked Questions about create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold React components using shadcn/ui and Tailwind CSS?▼

Scaffold React components by enforcing kebab-case file names, PascalCase component names, and default exports while leveraging shadcn/ui primitives and Tailwind CSS to maintain consistent architecture across your project.

How do I separate server and client components when adding interactivity in React?▼

Separate server and client components by avoiding "use client" in page.tsx and isolating interactivity into dedicated client components, ensuring proper server component separation for your e-commerce architecture.

Does this React component generator enforce specific naming conventions for TypeScript files?▼

Yes, the React component generator enforces kebab-case file names, PascalCase component names, and default exports to ensure consistent TypeScript component architecture across your e-commerce project.

What's the best way to refactor existing React components to follow consistent UI conventions?▼

Refactor existing React components by applying standardized naming rules, integrating shadcn/ui primitives, and enforcing proper server and client component separation to achieve consistent UI architecture.

Can I use shadcn/ui primitives to rapidly build interactive e-commerce components?▼

Yes, you can use shadcn/ui primitives with TypeScript and Tailwind CSS to rapidly build interactive e-commerce components, isolating client-side logic into dedicated components to maintain server boundaries.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
alvaldesalvaldes

react-19

Refactor React 19 components to remove manual memoization with the React Compiler.

Community
Advanced