coding-guidelines

Name: coding-guidelines
Availability: InStock
Author: asakuno

Define React component guidelines for Laravel and Inertia.js projects.

Updated Dec 29, 2025

Search Tags:#typescript #architecture #react #testability #laravel #inertia #precognition

Ready to run

npx skills add https://github.com/asakuno/template-repository --skill coding-guidelines-asakuno

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coding-guidelines
Source: https://github.com/asakuno/template-repository/tree/main/.claude/skills/coding-guidelines
Command: npx skills add https://github.com/asakuno/template-repository --skill coding-guidelines-asakuno

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Comprehensive React component coding guidelines for Laravel + Inertia.js applications with Laravel Precognition and a hybrid API architecture. This guide targets AI pattern failures, emphasizing testability, props control, and clean component responsibility separation.

Core Features & Use Cases

Patterns for separating data fetching from presentation via custom hooks and presentational components.
Precognition-based form handling for real-time validation in Laravel apps.
Hybrid data strategy combining Inertia props for static content with API data for dynamic sections.
Clear project structure, naming conventions, and quality rules to ensure maintainability and testability across teams.

Quick Start

Review your React component library and refactor to move data fetching into custom hooks, ensure all rendering is prop-driven, and adopt Precognition-form patterns for any forms in the app.

Frequently Asked Questions about coding-guidelines

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

FAQPage Schema

How do I structure React components in a Laravel Inertia.js project to improve testability?▼

To improve React component testability in a Laravel Inertia.js project, move data fetching logic into custom hooks and ensure all rendering remains strictly prop-driven. This separation enforces clean component responsibilities and isolates presentation layers for reliable unit testing.

What is the best way to handle real-time form validation with Laravel Precognition in React?▼

The best way to handle Laravel Precognition forms in React is adopting a hybrid data strategy that combines static Inertia props with dynamic API data. This approach enforces strict typing and real-time validation workflows across typical CRUD patterns.

How do I separate data fetching from presentation in React components using Inertia.js?▼

Separate data fetching from presentation in Inertia.js by extracting all asynchronous data retrieval into custom hooks and rendering presentational components through static props. This architectural discipline directly prevents AI pattern failures and ensures scalable component structures.

Can I use Laravel Precognition with a hybrid API architecture in Inertia.js applications?▼

Yes, Laravel Precognition integrates with a hybrid API architecture in Inertia.js by combining static Inertia props for initial content with dynamic API data for interactive sections. This setup enforces strict typing and scalable component structures across CRUD operations.

Why does my React component architecture fail testability when using static Inertia props?▼

React testability fails with static Inertia props when components mix data fetching and rendering. Enforce a robust guideline moving data retrieval into custom hooks and rendering into prop-driven components to restore architectural discipline and isolate presentation logic.

How do I establish naming conventions and quality rules for a scalable Inertia.js React codebase?▼

Establish naming conventions and quality rules for a scalable Inertia.js React codebase by enforcing strict typing, custom hooks for data fetching, and prop-driven presentational components. This structure ensures maintainability and testability across teams using Laravel Precognition workflows.