skills.rest
codebar-ag
codebar-agOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design

Standardize Blade UI components and styling across Laravel views.

3|Updated Feb 13, 2026
Search Tags:#accessibility#components#laravel#tailwind#ux#design-system#blade
One-click install
npx skills add https://github.com/codebar-ag/coding-guidelines --skill design-codebar-ag
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/codebar-ag/coding-guidelines/tree/main/resources/boost/skills/design
Command: npx skills add https://github.com/codebar-ag/coding-guidelines --skill design-codebar-ag

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Component-first design system streamlines building consistent Blade UI by enforcing reusable components, predictable styling, and accessibility patterns across pages.

Core Features & Use Cases

  • Component-driven templates using Blade components
  • Named slots for flexible layouts, props with sensible defaults, and ARIA accessibility
  • Consistent styling via Tailwind-based guidelines and a central styleguide

Quick Start

Start by creating a Blade component and adopt the styleguide to migrate views to components.

Frequently Asked Questions about design

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

FAQPage Schema
How do I create a consistent Blade UI component library in Laravel?▼

Build a consistent Blade UI component library by using component-driven templates with named slots, sensible default props, and Tailwind-based styling guidelines to standardize views across pages.

What is a component-first design system and when do I need it for Blade views?▼

A component-first design system enforces reusable Blade components, predictable styling, and accessibility patterns across pages to solve UI inconsistency in Laravel applications.

How do I add ARIA accessibility to Laravel Blade components?▼

Add ARIA accessibility to Laravel Blade components by adopting a central styleguide that enforces reusable component templates, named slots, and standardized accessibility patterns across all views.

Can I use Tailwind CSS with named slots in Blade components?▼

Yes, Tailwind CSS works with named slots in Blade components by applying central styleguide conventions to enforce consistent styling and flexible layouts across your Laravel views.

What is the best way to standardize responsive layouts in a Laravel design system?▼

Standardize responsive layouts in a Laravel design system by migrating views to component-driven Blade templates with sensible default props, ARIA accessibility, and Tailwind-based styling guidelines.

How do I start migrating existing Laravel views to a Blade component design system?▼

Start migrating Laravel views by creating a Blade component and adopting a central styleguide to progressively convert existing templates into reusable, accessible component-driven layouts.

Related Skills

Explore More Design & Creative Skills→
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
lastdays03lastdays03

web-design-guidelines

Audit UI files for accessibility, consistency, and responsive compliance.

Community
Intermediate
harperaaharperaa
15

business-logic-flaws-ai-generated-code

Detect race conditions and business-logic vulnerabilities in AI-generated code.

Community
Intermediate
pekralpekral

frontend-patterns

Standardize Laravel frontend architecture with Blade, Livewire, and Alpine.js.

Community
Advanced