skills.rest
callcocam
callcocamCOMMUNITY
Explore all skills by this author →
Website𝕏@callcocamGitHub

laravel-raptor-components

Generate Vue 3 UI components with TypeScript and TailwindCSS.

Updated Mar 19, 2026
Search Tags:#typescript#vue3#design-system#tailwindcss#ui-components#composition-api#inertiajs
One-click install
npx skills add https://github.com/callcocam/raptor-skils --skill laravel-raptor-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: laravel-raptor-components
Source: https://github.com/callcocam/raptor-skils/tree/main/laravel-raptor-components
Command: npx skills add https://github.com/callcocam/raptor-skils --skill laravel-raptor-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Este Skill acelera a entrega de componentes UI reutilizáveis em Vue 3, mantendo a consistência com o design system e reduzindo retrabalho ao iniciar um novo componente a partir do nome ou de uma referência visual/código.

Core Features & Use Cases

  • Geração de componentes Vue 3 prontos para produção a partir de um nome de componente ou de uma referência (imagem, HTML, código).
  • Aborda todos os tipos: inputs (text, number, date, calendar, select, checkbox, radio, textarea), feedback (modal, dialog, toast, alert, badge), layout (card, panel, accordion, tabs), navegação (breadcrumb, menu, pagination, steps) e data display (table, list, avatar, tag, tooltip).
  • Integração com Stack: Vue 3 + Composition API + TypeScript + TailwindCSS + Inertia.js, com padrões já existentes do projeto e validação de compatibilidade.

Quick Start

Forneça o nome do componente e, se possível, forneça uma referência visual ou de código para iniciar.

Frequently Asked Questions about laravel-raptor-components

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

FAQPage Schema
How do I automate Vue 3 UI component creation from a name?▼

Automating Vue 3 UI component creation involves generating production-grade code from a component name or visual reference. This process applies strict TypeScript, TailwindCSS styling, and accessibility standards while validating against existing project conventions.

Does this Vue 3 generator support Inertia.js and TailwindCSS integration?▼

Yes, this Vue 3 generator supports Inertia.js and TailwindCSS integration. It aligns with the Vue 3 Composition API stack, ensuring generated components maintain compatibility with your existing project configuration and design system.

Can I generate feedback and layout components like modals and tabs in Vue 3?▼

You can generate feedback and layout components like modals and tabs in Vue 3. It supports creating inputs, feedback, layout, navigation, and data-display components, complete with modal support, error handling, and slot configurations.

What is the best way to maintain design system consistency when building Vue 3 components?▼

The best way to maintain design system consistency when building Vue 3 components is by validating generated code against project conventions. This ensures strict TypeScript typing and TailwindCSS styling are uniformly applied across all reusable UI elements.

How do I create accessible Vue 3 components with standard slots for hints and actions?▼

To create accessible Vue 3 components with standard slots for hints and actions, you generate code that implements a standard feature set. This includes prefix, suffix, action, and hint slots alongside strict accessibility and error handling protocols.

Related Skills

Explore More Software Engineering Skills→
lzx0122lzx0122

vue-development

Plan Vue 3 component architecture with TypeScript-first patterns and defineModel.

Community
Intermediate
noartemnoartem

inertia-vue-development

Develop Vue 3+ Inertia.js v2 interfaces with Link, Form, and router.

Community
Intermediate
samhvw8samhvw8
10

frontend-dev-guidelines

Automates frontend development across React 18+, Vue 3, Svelte 5, and Angular frameworks.

Community
Basic
ChoreShoreChoreShore

token-keeper

Validate design token usage and accessibility patterns in React, Vue, and Svelte components.

Official
Intermediate