Can this skill help with partial page updates?

Yes, it provides specific guidance on using router.reload() with the 'only' property to refresh specific pieces of data without a full page reload, improving performance.

Why does this skill block the use of Axios or Fetch?

Inertia.js is designed to handle all server communication via its own router. Using external HTTP clients bypasses Inertia's built-in state management and routing logic, which can lead to desynchronized application states.

Does it support shared global data like authentication status?

Absolutely. It guides the use of the usePage hook to access shared data passed from Laravel middleware, ensuring global state like auth users or flash messages are accessed consistently.

How does this skill improve form handling in Vue?

It enforces the use of the useForm hook, which provides integrated processing states for loading indicators, automatic validation error handling, and easy data transformation before submission.

Inertia.js Patterns & Best Practices

Name: Inertia.js Patterns & Best Practices
Author: richardhowes

byrichardhowes

0•

开发者工具

Enforces idiomatic Inertia.js patterns in Vue components by preventing direct HTTP calls and guiding proper form handling.

This skill transforms Claude into an expert on the VILT stack by enforcing strict adherence to Inertia.js architecture. It automatically identifies and flags architectural anti-patterns, such as direct Axios or Fetch usage, ensuring all server communication is handled through the Inertia router. By guiding developers through the implementation of specialized hooks like useForm and usePage, it streamlines navigation, state management, and data fetching. It is particularly useful for maintaining clean, performant Laravel-Inertia applications where consistent data flow from controllers to props is paramount.

主要功能

01Guides the implementation of data fetching using controller props and partial reloads

02Enforces correct programmatic navigation and Link component usage

03Identifies and prevents the usage of external HTTP clients like Axios and Fetch

04Standardizes form handling through the useForm hook with validation and state management

05Provides patterns for type-safe access to shared data via the usePage hook

060 GitHub stars

使用场景

01Migrating standard Vue-API applications to the Inertia.js VILT stack

02Onboarding developers to proper Inertia.js form processing and navigation techniques

03Ensuring architectural consistency and code quality across large Laravel-Inertia projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add richardhowes/self-improvement-code-quality-plugin inertia-patterns

For use in Claude.ai and ChatGPT

Download Skill