laravel-blade_skill

Overview

This skill scaffolds and authorizes Laravel Blade templates, components, slots, layouts, and directives for consistent, secure view code. It streamlines view creation, component selection (anonymous vs class-based), attribute merging, and named slots to produce reusable UI patterns. The skill enforces security and templating conventions to reduce XSS and CSRF mistakes.

How this skill works

Before any implementation the skill spawns three agents to inspect code and documentation: a codebase explorer to locate existing views/components, a research expert to validate Blade patterns against latest docs, and a docs query agent for targeted patterns. It generates Blade templates or component classes with @props, attribute merging, named slots, and recommended directives, then runs a validation agent to lint and sanity-check output. The skill focuses on creating minimal, testable components and layouts while preserving escape rules and form CSRF protection.

When to use it

• Building new views or refactoring existing Blade templates
• Creating reusable UI components (anonymous or class-based)
• Designing page layouts or switchable layout strategies
• Implementing forms with validation and CSRF protection
• Adding named slots or attribute passthrough for flexible components

Best practices

• Always escape output with {{ }}; avoid {!! !!} unless sanitized
• Declare expected properties with @props for clarity
• Merge incoming attributes via $attributes->merge() to allow overrides
• Prefer anonymous components for simple UI; use class-based for DI or complex logic
• Use named slots for multi-area layouts and keep components focused and small
• Include @csrf in every form and avoid business logic in templates

Example use cases

• Create an alert component with class merging and a default type prop
• Build a page layout as a reusable x-layout component with named header/footer slots
• Implement a form component that handles validation errors and includes @csrf
• Convert legacy @extends/@section pages into component layouts where appropriate
• Create a dynamic component selector that renders components at runtime based on props