From frontend-dev
Scaffold React/Next.js components with proper types, props, accessibility, and Tailwind styling
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-dev:component-builderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build a React component: **$0**
Build a React component: $0
Type: $1 (default: ui)
Determine component type and location:
page → route-level component in app/ directorylayout → layout wrapper in app/ directoryui → reusable component in src/components/form → form component with React Hook Form + ZodDecide server vs client:
"use client" only if the component needs: event handlers, useState/useEffect, browser APIs, or third-party client librariesDesign the props interface:
interface ComponentNameProps {
// Required props first
title: string;
// Optional props with defaults
variant?: "default" | "outline" | "ghost";
size?: "sm" | "md" | "lg";
// Event handlers
onAction?: () => void;
// Children if needed
children?: React.ReactNode;
}
Build the component:
cn() utility (clsx + tailwind-merge) for conditional classesforwardRef)Add accessibility:
button, nav, main, section, article)Handle loading and error states if the component fetches data.
Produce the component file with:
If it's a form component, also produce the Zod schema file.
export defaultany typesCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub silviaare95/xari-plugins --plugin frontend-dev