com um clique
slidewire-development
// Guidance for generating, authoring, and refining beautiful SlideWire presentations in Laravel applications.
// Guidance for generating, authoring, and refining beautiful SlideWire presentations in Laravel applications.
| name | slidewire-development |
| description | Guidance for generating, authoring, and refining beautiful SlideWire presentations in Laravel applications. |
| metadata | null |
Use this skill when working with wendelladriel/slidewire: creating new presentations, improving existing decks, adding navigation-friendly structure, or styling slides with themes, text, images, markdown, code, diagrams, fragments, and the first-party presentation UI components.
Default workflow for a new presentation:
make:slidewire.Route::slidewire().Use the package command instead of hand-writing the initial file when possible:
php artisan make:slidewire demo/product-launch --title="Product Launch"
config('slidewire.presentation_roots').resources/views/pages/slides.demo/product-launch maps to resources/views/pages/slides/demo/product-launch.blade.php.Each presentation should be a single Blade file with one <x-slidewire::deck> containing one or more <x-slidewire::slide> components.
<x-slidewire::deck>
<x-slidewire::slide class="bg-slate-900 text-white">
<h1 class="text-4xl font-semibold tracking-tight">Product Launch</h1>
<p class="text-lg text-slate-300">Opening slide</p>
</x-slidewire::slide>
<x-slidewire::slide class="bg-white text-slate-900">
<x-slidewire::markdown>
## Metrics
- Activation: 62%
- Churn: 1.8%
</x-slidewire::markdown>
</x-slidewire::slide>
</x-slidewire::deck>
Strong defaults:
SlideWire presentation styling assumes the host Laravel app is using Tailwind CSS.
If a project uses the first-party SlideWire UI components like panel, title-slide, two-column-slide, timeline-slide, steps-slide, or agenda-slide, make sure the app's resources/css/app.css includes the package sources so Tailwind can generate the needed classes:
@import 'tailwindcss';
@source '../views';
@source '../../vendor/wendelladriel/slidewire/resources/views/**/*.blade.php';
@source '../../vendor/wendelladriel/slidewire/src/**/*.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
Without those @source entries, package components may render with missing styles even though the Blade markup is correct.
<x-slidewire::deck>: presentation wrapper for deck-wide defaults.<x-slidewire::slide>: a single slide, with support for metadata like theme, transition, transition-speed, auto-slide, auto-animate, and background attributes.<x-slidewire::vertical-slide>: groups slides into a vertical stack inside one horizontal column.<x-slidewire::fragment>: reveals content progressively.<x-slidewire::panel>: reusable modern surface for grouped content, supporting variants like default, elevated, outlined, and glass.<x-slidewire::title-slide>: opinionated opening slide for titles, subtitles, overlines, and presenter metadata.<x-slidewire::two-column-slide>: responsive split layout for explanation-plus-supporting-content slides.<x-slidewire::media-split-slide>: media-first split layout with left/right positioning, ratio controls, and optional framed or panel-style media treatment.<x-slidewire::timeline-slide> and <x-slidewire::timeline-item>: structured milestone and roadmap layouts.<x-slidewire::steps-slide> and <x-slidewire::step-item>: process and rollout layouts with optional auto-numbering.<x-slidewire::agenda-slide> and <x-slidewire::agenda-item>: section overview and agenda layouts.<x-slidewire::text>: semantic text wrapper with optional orientation, configured font overrides, and component-level animation hooks.<x-slidewire::image>: native image wrapper with component-level animation hooks.<x-slidewire::markdown>: renders markdown and highlighted code fences.<x-slidewire::code>: renders highlighted code blocks directly.<x-slidewire::diagram>: renders Mermaid diagrams.panel when content needs a polished surface without rebuilding the same rounded, theme-aware wrapper.title-slide for opening slides, chapter intros, and title cards.two-column-slide for explanatory layouts that pair copy with supporting visuals or code.media-split-slide when the visual side should lead the composition and you want built-in media framing controls.timeline-slide and agenda-slide for milestones, sections, and chapter overviews that need more structure than bullets.steps-slide for process, rollout, or tutorial content.text for semantic headings, paragraphs, inline text, vertical labels, or reusable animation-ready copy blocks.image for native <img> output with SlideWire animation metadata.markdown for narrative slides, bullets, and mixed prose/code.code for tightly controlled code examples or language-specific snippets.diagram for flows, architecture, and process explanations.fragment for sequential reveals instead of overcrowding one slide.Use the first-party UI components when you want polished slide structure with theme-aware defaults and less repeated Tailwind markup.
Recommendations:
panel as the base surface primitive for grouped text, code, media, or mixed content.title-slide over ad hoc hero markup for opening slides or chapter separators.two-column-slide for both general split layouts and media-plus-content layouts; frame the visual side with panel when needed.media-split-slide when the deck benefits from a more opinionated media-led split with plain, framed, or panel media presentation.timeline-slide, steps-slide, and agenda-slide over plain lists when the sequence or hierarchy matters to the talk.class passthrough when a deck needs light visual tailoring.Example:
<x-slidewire::two-column-slide ratio="2:1" gap="xl" align="center">
<x-slot name="left">
<x-slidewire::panel
overline="Why SlideWire"
title="Presentation-ready layouts"
footer="Theme-aware by default"
variant="glass"
>
Build polished decks with reusable surfaces, structured agendas,
agenda layouts, and split layouts.
</x-slidewire::panel>
</x-slot>
<x-slot name="right">
<x-slidewire::steps-slide title="Workflow" columns="1" style="cards">
<x-slidewire::step-item title="Plan" description="Choose the right layout for the story." />
<x-slidewire::step-item title="Compose" description="Fill the slots with text, code, or media." />
<x-slidewire::step-item title="Present" description="Keep the deck cohesive across themes." />
</x-slidewire::steps-slide>
</x-slot>
</x-slidewire::two-column-slide>
Use text when you want semantic text output without hand-writing repeated animation and orientation attributes.
Supported attributes:
type: paragraph (default), inline, headingfont: any configured family from config('slidewire.fonts')orientation: horizontal (default), verticalanimationanimation-speedclass and any other valid HTML attributes for the rendered tagExamples:
<x-slidewire::text type="heading" class="text-5xl font-semibold tracking-tight">
Product Launch
</x-slidewire::text>
<x-slidewire::text
type="heading"
font="Inter"
orientation="vertical"
animation="slide-up"
animation-speed="slow"
class="text-4xl"
>
Launch Day
</x-slidewire::text>
Recommendations:
heading for prominent slide titles when h2 semantics make sense.inline for short labels embedded in richer layouts.font for one-off typography changes that should stay within configured presentation fonts.orientation="vertical" for side labels or editorial layouts, not long paragraphs.Use image when you want a normal <img> element with the same animation contract as other SlideWire content components.
Supported attributes:
src, alt, class, width, height, loading, decoding, and fetchpriorityanimationanimation-speedExample:
<x-slidewire::image
src="/images/product-shot.png"
alt="Product shot"
class="w-72 rounded-2xl shadow-2xl"
loading="lazy"
animation="pop"
animation-speed="default"
/>
Recommendations:
alt text unless the image is purely decorative.Use regular <x-slidewire::slide> elements for left/right progression.
Use <x-slidewire::vertical-slide> when one topic needs a vertical drill-down:
<x-slidewire::deck>
<x-slidewire::slide>
<h2>Overview</h2>
</x-slidewire::slide>
<x-slidewire::vertical-slide>
<x-slidewire::slide>
<h2>Detail: Top</h2>
</x-slidewire::slide>
<x-slidewire::slide>
<h2>Detail: Bottom</h2>
</x-slidewire::slide>
</x-slidewire::vertical-slide>
</x-slidewire::deck>
Behavior to preserve when editing decks:
#/slide/N or #/slide/H/V.SlideWire resolves runtime settings in this order:
slide attribute -> deck attribute -> config('slidewire.slides')
Use deck-level attributes for shared presentation behavior:
<x-slidewire::deck theme="black" transition="fade" auto-slide="3000">
<x-slidewire::slide>
<h2>Inherits deck defaults</h2>
</x-slidewire::slide>
<x-slidewire::slide theme="white" transition="zoom">
<h2>Overrides intentionally</h2>
</x-slidewire::slide>
</x-slidewire::deck>
Common deck-level controls:
themetransitiontransition-speedtransition-durationauto-slideauto-slide-pause-on-interactionshow-controlsshow-progressshow-fullscreen-buttonkeyboardtouchhighlight-themeSlideWire is designed to work well with Tailwind and theme presets.
Built-in themes:
defaultblackwhiteaurorasunsetneonsolarizedUse a theme when you want presentation-wide visual consistency. Define custom themes in config/slidewire.php with ThemeConfig and ThemeFont when the deck needs a distinct branded look.
Examples:
<x-slidewire::slide class="bg-gradient-to-br from-blue-900 to-slate-950 text-slate-50">
<h2>Gradient slide</h2>
</x-slidewire::slide>
<x-slidewire::slide
background-image="https://example.com/bg.jpg"
background-size="cover"
background-position="center"
background-opacity="0.35"
>
<h2>Image-backed slide</h2>
</x-slidewire::slide>
ThemeConfig.text can override typography per instance with font when the family exists in config('slidewire.fonts').slides.highlight.font and slides.highlight.font_size by default.config('slidewire.fonts') are loaded automatically.text-sm, text-base, text-lg, or text-xl.Supported transition names:
slidefadezoomconvexconcavenoneSupported transition speeds:
fastdefaultslowRecommendations:
fade or zoom only when the content change benefits from it.auto-animate for before/after or transformation sequences with matching element IDs.auto-slide sparingly for timed demos or kiosk-style decks.text and image support element-level entry animations through animation and animation-speed.
Supported names:
fadepopzoom-inzoom-outslide-leftslide-rightslide-upslide-downblurtypewriter (text only)Recommendations:
typewriter for short plain-text copy, not complex nested markup.Use fragments to reveal talking points one at a time:
<x-slidewire::slide>
<h2>Rollout plan</h2>
<x-slidewire::fragment :index="0"><p>Private beta</p></x-slidewire::fragment>
<x-slidewire::fragment :index="1"><p>Pilot accounts</p></x-slidewire::fragment>
<x-slidewire::fragment :index="2"><p>General availability</p></x-slidewire::fragment>
</x-slidewire::slide>
Use the code component for exact control:
<x-slidewire::code language="php" size="text-lg">
echo 'highlighted example';
</x-slidewire::code>
Use theme or font overrides only when the default theme-coupled highlighting is not a good fit.
Use markdown for concise authoring and embedded code fences:
<x-slidewire::markdown>
## Launch Metrics
- Activation: 62%
- Churn: 1.8%
</x-slidewire::markdown>
### Diagrams
Use Mermaid syntax inside `diagram` for visual explanations:
```blade
<x-slidewire::diagram>
flowchart LR
A[Start] --> B[Process]
B --> C[End]
</x-slidewire::diagram>
```
## Route registration
Prefer the SlideWire route macro:
```php
use Illuminate\Support\Facades\Route;
Route::slidewire('/slides/product-launch', 'demo/product-launch');
```
This registers the Livewire presentation route, passes the presentation key through route defaults, and creates route names like `slidewire.demo.product-launch`.
## Refactoring checklist
When creating or updating a SlideWire presentation, verify that:
- the presentation file lives in a configured presentation root
- the deck has exactly one `<x-slidewire::deck>` wrapper
- horizontal and vertical slide grouping matches the intended navigation flow
- deck defaults are used for shared behavior instead of repeated slide attributes
- text contrast, spacing, and layout are clear on both dark and light backgrounds
- fragments improve pacing instead of hiding essential context
- first-party layout components are used where they reduce repeated structural markup
- text and image components are used where their semantics or animation hooks improve authoring clarity
- code, markdown, and diagram slides use the most appropriate component
- route registration points to the correct presentation key
## Good defaults to follow
- Start with `php artisan make:slidewire`.
- Keep presentations in one Blade file per deck.
- Use deck-level theme and transition defaults first.
- Use Tailwind classes for slide composition and atmosphere.
- Use first-party components like `panel`, `title-slide`, `two-column-slide`, `timeline-slide`, `steps-slide`, and `agenda-slide` before rebuilding the same patterns by hand.
- Use `text` and `image` when you want semantic wrappers with built-in animation metadata.
- Use vertical slides for drill-downs, not for unrelated content.
- Use fragments to pace the narrative.
- Use markdown for fast authoring, `code` for exact snippets, and `diagram` for visual structure.