frontend-development

Implement React 19 frontend interfaces with Inertia.js, Tailwind CSS v4, and Radix UI.

1|Updated Jan 7, 2026
One-click install
npx skills add https://github.com/jftecnologia/laravel-base-template --skill frontend-development-jftecnologia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/jftecnologia/laravel-base-template/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/jftecnologia/laravel-base-template --skill frontend-development-jftecnologia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and modification of frontend interfaces, ensuring consistency and adherence to project standards across React, Inertia.js, and Tailwind CSS.

Core Features & Use Cases

  • Component Development: Build reusable UI components using Radix UI primitives and Tailwind CSS.
  • Page Implementation: Create dynamic pages with Inertia.js, handling data fetching and form submissions.
  • Styling & Theming: Apply consistent styling with Tailwind CSS, including responsive design and dark mode.
  • Backend Integration: Seamlessly connect frontend elements to backend routes using Wayfinder.
  • Use Case: When asked to build a new user profile page with a form for editing details and a dynamic list of recent activities, this Skill provides the structure, components, and patterns to implement it efficiently.

Quick Start

Create a new React component for a user profile card using the provided UI primitives and Tailwind CSS.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I build React pages with Inertia.js and Tailwind CSS?

Building React pages with Inertia.js and Tailwind CSS involves creating dynamic components, handling data fetching via deferred props, and applying consistent styling using Tailwind v4 primitives. This process ensures seamless UI implementation and backend data binding.

What is the best way to style UI components using Radix UI and Tailwind CSS?

Styling UI components with Radix UI and Tailwind CSS utilizes accessible Radix primitives combined with Tailwind utility classes for responsive design and dark mode. This approach ensures consistent theming and reusable component architecture across your project.

Can I use Wayfinder to connect React components to backend routes?

Yes, you can use Wayfinder to connect React components to backend routes. Wayfinder provides route referencing within your React 19 and Inertia.js v2 frontend implementation, ensuring seamless backend integration and accurate navigation data binding.

Does this frontend development approach support deferred props and data prefetching?

Yes, this frontend development approach supports deferred props and data prefetching. It activates specifically for Inertia.js v2 features like deferred props, prefetching, and polling to optimize data fetching and dynamic page implementation performance.

When do I need Inertia.js v2 for React 19 frontend development?

You need Inertia.js v2 for React 19 frontend development when building dynamic pages that require seamless backend integration without writing separate APIs. It handles form submissions, data fetching, and route navigation using Wayfinder efficiently.