From frontend-dev
Scaffold React/Next.js components with proper types, props, accessibility, and Tailwind styling
npx claudepluginhub silviaare95/xari-plugins --plugin frontend-devThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
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 types