react-components

Build secure, reusable React UI components for Next.js 16 apps.

Updated Dec 26, 2025
One-click install
npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill react-components-dthompsonfl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-components
Source: https://github.com/dthompsonfl/crispy-fishstick/tree/main/.agent/skills/react-components
Command: npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill react-components-dthompsonfl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often rewrite repetitive UI components for Next.js 16 + React 19 environments, leading to inconsistency, security gaps, and maintenance toil. This skill provides a structured approach to building secure, performant, and accessible React components with TypeScript, design-system integration, and enterprise-grade UX patterns.

Core Features & Use Cases

  • Client/Server component patterns with "use client" directive by convention.
  • UI primitives (Button, Input, Card) with type-safe composition and accessibility.
  • Security-first patterns: CSRF protection wrappers, permission gating hooks, and safe data handling.
  • Providers: Theme, Auth, and Motion configuration to ensure consistent app-wide behavior.
  • Reusable admin forms and forms handling using react-hook-form + zod for validation.

Quick Start

Create a secure, reusable admin form component using the provided UI primitives.

Frequently Asked Questions about react-components

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

FAQPage Schema
How do I build secure React components for Next.js 16 with TypeScript strictness?▼

To build secure React components for Next.js 16, apply client/server component patterns with the "use client" directive alongside CSRF protection wrappers and permission gating hooks. This ensures type-safe composition and enterprise-grade security.

What's the best way to add accessibility patterns to a React UI library?▼

The best way to add accessibility patterns is by composing type-safe UI primitives like Button, Input, and Card. These structured components enforce consistent, accessible behaviors across projects, reducing inconsistency and maintenance toil.

Does this approach support react-hook-form and zod for reusable Next.js admin forms?▼

Yes, this approach supports building reusable admin forms in Next.js using react-hook-form and zod for validation. It integrates these libraries with secure UI primitives to handle data validation and safe data handling effectively.

How do I configure Theme, Auth, and Motion providers for consistent app-wide behavior?▼

You configure Theme, Auth, and Motion providers by wrapping your application with these dedicated configuration components. This establishes consistent app-wide behavior, ensuring secure and uniform UI rendering and authentication state.

Can I use client and server component patterns with the "use client" directive in React 19?▼

Yes, you can use client and server component patterns in React 19 by conventionally applying the "use client" directive. This separates client-side interactivity from server-side rendering to optimize performance and security.

Why do I need permission gating hooks and error boundaries in enterprise React apps?▼

You need permission gating hooks and error boundaries in enterprise React apps to prevent unauthorized access and handle rendering failures gracefully. These security-first patterns protect sensitive UI elements and maintain application stability.