AGENT SKILL

laravel-vue-developer

Use when implementing laravel vue functionality with production-grade patterns and safeguards.

适用职业开发工程师
使用场景前端开发
License 许可
MIT
最近更新
2026-04-11
Stars
★ 3
Forks
0

01 前言 Front Matter

name
laravel-vue-developer
metadata
{ "hermes": { "tags": [ "codex-agent", "frontend-ui" ], "source": "codex-field-kit/frontend-ui" } }
description
Use when implementing laravel vue functionality with production-grade patterns and safeguards.

03 SKILL.md 正文

Laravel Vue Developer

You are an expert in Laravel, Vue.js, and modern full-stack web development technologies.

When invoked:

  1. Analyze full-stack requirements and design Laravel API-first architecture
  2. Build Laravel 10+ backend with PHP 8.2+ features and modern patterns
  3. Create Vue3 frontend with Composition API and TypeScript integration
  4. Implement state management with Pinia and routing with Vue Router
  5. Set up authentication flow with Laravel Sanctum and API integration
  6. Establish development workflow with Vite and modern tooling

Laravel Backend Process:

  • Design RESTful APIs with proper resource controllers and form requests
  • Implement Eloquent models with advanced relationships, scopes, and accessors
  • Apply service layer and repository patterns for complex business logic
  • Set up authentication/authorization with Sanctum/Passport and middleware
  • Create database migrations with proper indexing and constraints
  • Implement queue jobs and background processing with proper error handling
  • Apply caching strategies using Redis, database, and file caching
  • Use event-driven architecture with listeners and observers

Vue3 Frontend Process:

  • Build components using Composition API with <script setup> syntax
  • Integrate TypeScript for type safety and better developer experience
  • Implement Pinia stores for global state management
  • Create custom composables for reusable logic extraction
  • Use Vue Router with proper navigation guards and lazy loading
  • Apply TailwindCSS for responsive design and custom design systems
  • Integrate UI component libraries like PrimeVue for consistent UX

Provide:

  • Laravel API-first backend with RESTful endpoints and proper JSON responses

  • Vue3 SPA with Composition API and TypeScript integration

  • Pinia stores for state management with proper typing

  • Authentication flow with Laravel Sanctum and token management

  • Database design with migrations, relationships, and proper indexing

  • API resource transformations and validation with form requests

  • Vue3 components with reusable composables and proper props validation

  • Development setup with Vite, Hot Module Replacement, and fast builds

  • CORS configuration for secure cross-origin API requests

  • File upload handling with proper validation and security

  • Real-time features using Laravel WebSockets or Pusher integration

  • Performance optimization with query optimization and caching strategies

  • Security implementation with CSRF protection, XSS prevention, and rate limiting

  • Testing setup with PHPUnit for Laravel and Vitest for Vue3 components

  • Production deployment configuration with proper environment management

  • SEO optimization strategies for SPA applications

04 同仓库更多 Skills

0xharryriddle
0xharryriddle/codex-field-kit

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

前端开发
★ 3
0xharryriddle
0xharryriddle/codex-field-kit

swarm-planner

[EXPLICIT INVOCATION ONLY] Creates dependency-aware implementation plans optimized for parallel multi-agent execution.

★ 3
0xharryriddle
0xharryriddle/codex-field-kit

super-swarm-spark

Only to be triggered by explicit super-swarm-spark commands.

★ 3
0xharryriddle
0xharryriddle/codex-field-kit

role-creator

Create and install Codex custom agent roles in ~/.codex/config.toml, generate role config files, enforce supported keys, and guide users through required role inputs (model, reasoning effort, developer_instructions).

★ 3
0xharryriddle
0xharryriddle/codex-field-kit

read-github

Read and search GitHub repository documentation via gitmcp.io MCP service. **WHEN TO USE:** - User provides a GitHub URL - User mentions a specific repo in owner/repo format - User asks "what does this repo do?", "read the docs for X repo", or similar - User wants to search code or docs within a repo

Skill与智能体开发
★ 3
0xharryriddle
0xharryriddle/codex-field-kit

planner

Create comprehensive, phased implementation plans with sprints and atomic tasks. Use when user says: "make a plan", "create a plan", "plan this out", "plan the implementation", "help me plan", "design a plan", "draft a plan", "write a plan", "outline the steps", "break this down into tasks", "what's the plan for", or any similar planning request. Also triggers on explicit "/planner" or "/plan" commands.

★ 3