1naichii/inertia
skills/inertia/SKILL.md
Build modern monolith applications with Inertia.js - combining server-side frameworks (Laravel, Rails, etc.) with React/Vue/Svelte frontends without building APIs. Use when creating Inertia pages and layouts, working with Link component for navigation, building forms with Form component or useForm hook, handling validation and errors, managing shared data and props, implementing authentication and authorization, using manual visits with router, working with partial reloads, setting up persistent layouts, or configuring client-side setup.
tools
Updated Mar 25, 2026
$ install --global
skillsauthnpx skillsauth add 1naichii/ai-code-tools inertiaInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
4 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
4
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 25, 2026, 5:07 AM151.5s9 files scanned
SKILL.md
- name:
- inertia
- description:
- Build modern monolith applications with Inertia.js - combining server-side frameworks (Laravel, Rails, etc.) with React/Vue/Svelte frontends without building APIs. Use when creating Inertia pages and layouts, working with Link component for navigation, building forms with Form component or useForm hook, handling validation and errors, managing shared data and props, implementing authentication and authorization, using manual visits with router, working with partial reloads, setting up persistent layouts, or configuring client-side setup.
Inertia.js
Modern monolith framework for building SPAs without APIs. Combine server-side framework power with React/Vue/Svelte frontends.
Core Concept
Inertia replaces your view layer - controllers return JavaScript page components instead of server-side templates. The <Link> component intercepts clicks for XHR visits, providing SPA experience without full page reloads.
Quick Reference
Basic Page Structure
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome {{ user.name }}</h1>
</Layout>
</template>
Navigation
<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>
Form Submission
<!-- Simple Form Component -->
<Form action="/users" method="post">
<input type="text" name="name" />
<button type="submit">Create</button>
</Form>
<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>
Documentation by Topic
| Topic | Reference File | Description | |-------|---------------|-------------| | Forms | forms.md | Form component, useForm helper, validation, error handling | | Links & Navigation | links.md | Link component, manual visits, active states | | Validation | validation.md | Server-side validation, error bags, error display | | Pages & Layouts | pages-layouts.md | Page components, persistent layouts, default layouts | | Data & Props | data-props.md | Shared data, partial reloads, deferred props | | Authentication | authentication.md | Auth patterns, CSRF protection, authorization | | Setup | setup.md | Client-side initialization, server-side setup | | Advanced | advanced.md | Events, error handling, scroll management, SSR |
Common Patterns
Displaying Validation Errors
<div v-if="errors.email">{{ errors.email }}</div>
Accessing Shared Data
<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>
Preserving State/Scroll
<Link href="/form" preserve-state preserve-scroll>Edit</Link>
Partial Reloads
<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })
Framework Support
- Client: Vue 3 (
@inertiajs/vue3), React (@inertiajs/react), Svelte (@inertiajs/svelte) - Server: Laravel (official), Rails, Phoenix, Symfony (community adapters)
Related Skills
1naichii/lucide-laravel
development
VerifiedTrustedCommunity
Lucide icon library integration for Laravel Blade templates. Use when working with Lucide icons in Laravel applications, Blade components with the x-lucide- prefix, icon styling with Tailwind CSS, dynamic icon rendering in Blade, or any Laravel view work requiring SVG icons. Keywords include lucide icons, blade icons, x-lucide, SVG icons Laravel, blade-lucide-icons, mallardduck/blade-lucide-icons.
SKILL.mdUpdated Mar 25, 2026
1naichii/laravel-livewire
tools
VerifiedTrustedCommunity
Full-stack Laravel framework for building dynamic, reactive interfaces using PHP without writing JavaScript. Use when creating or modifying Livewire components, implementing data binding with wire:model, working with lifecycle hooks, building forms with validation, handling events and parent-child communication, implementing file uploads/pagination/lazy loading, writing tests, or optimizing performance. Supports Laravel Livewire v4+ development. Keywords: Livewire, wire:model, wire:click, livewire component, Alpine.js integration, wire:submit, real-time validation, computed properties, Laravel Livewire.
SKILL.mdUpdated Mar 25, 2026
1naichii/fetch-url-md
development
VerifiedTrustedCommunity
Fetch web content with automatic markdown version detection using curl. Use when Claude needs to retrieve documentation from websites that offer both HTML and markdown formats. First checks if a .md version exists (more efficient and cleaner), then falls back to HTML if unavailable. Ideal for fetching documentation from sites like ui.shadcn.com, GitHub wikis, or any documentation site that mirrors content in markdown format.
SKILL.mdUpdated Mar 25, 2026
1naichii/daisyui
development
VerifiedTrustedCommunity
CSS component library for Tailwind CSS 4 providing pre-built UI components with semantic class names. Use when building web interfaces with HTML/Tailwind that need: (1) Rapid UI development with consistent styling, (2) Accessible component patterns (buttons, forms, modals, etc.), (3) Theme-aware color systems that work across light/dark modes, (4) Responsive layouts with Tailwind utilities. Works with daisyUI v5+ which requires Tailwind CSS v4+.
SKILL.mdUpdated Mar 25, 2026