skills.rest
pekral
pekralCOMMUNITY
Explore all skills by this author →
Website𝕏@kral_petr_88GitHub

design-system

Synchronize Tailwind tokens with Filament themes and Blade components in Laravel applications.

Updated Jan 6, 2023
Search Tags:#laravel#tailwind#design-system#filament#blade#ui-audit
One-click install
npx skills add https://github.com/pekral/phpstan-rules --skill design-system-pekral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/pekral/phpstan-rules/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/pekral/phpstan-rules --skill design-system-pekral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of visual inconsistency and technical debt in Laravel applications by providing a structured approach to managing design tokens, component libraries, and UI audits.

Core Features & Use Cases

  • Design Token Management: Centralizes colors, typography, and spacing into Tailwind configurations and CSS variables.
  • Visual Auditing: Provides a 10-dimension scoring system to identify and fix UI inconsistencies, accessibility issues, and layout breaks.
  • AI-Slop Detection: Identifies and replaces generic, low-quality AI-generated design patterns with deliberate, brand-aligned alternatives.

Quick Start

Use the design-system skill to perform a full visual audit of the current project and generate a report on color and component consistency.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I synchronize Tailwind tokens with Filament themes in Laravel?▼

To synchronize Tailwind tokens with Filament themes, you centralize design tokens into shared CSS variables and map them within your Tailwind configuration. This ensures Filament themes and Blade components consume identical styling values.

What is a UI audit for a Laravel design system?▼

A Laravel UI audit is a comprehensive evaluation across ten dimensions, including accessibility, responsiveness, and typographic hierarchy. It identifies visual inconsistencies and layout breaks to enforce shared CSS variables over hard-coded styles.

How do I eliminate hard-coded styles in Blade components?▼

You eliminate hard-coded styles in Blade components by enforcing the use of shared CSS variables and anonymous Blade components. This approach centralizes design tokens to ensure long-term maintainability and visual consistency.

Does this design system approach detect generic AI-generated UI patterns?▼

Yes, the design system approach includes AI-slop detection to identify generic, low-quality AI-generated design patterns. It replaces them with deliberate, brand-aligned alternatives during the visual auditing process.

Can I perform a visual audit of color and component consistency in Laravel?▼

Yes, you can perform a full visual audit of color and component consistency in Laravel. The audit uses a 10-dimension scoring system to evaluate accessibility, responsiveness, and typographic hierarchy to resolve technical debt.

Related Skills

Explore More Software Engineering Skills→
rondevzrondevz

setup-wizard

Guide beginners through automated Laravel project setup with Inertia, React, Pest, and Filament.

Community
Advanced
codebar-agcodebar-ag
3

design

Standardize Blade UI components and styling across Laravel views.

Official
Advanced
STAR03-byteSTAR03-byte
1

web-artifacts-builder

Create and bundle React web artifacts into single HTML files.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

design-system-context

Enforce theme-defined CSS variables for colors and border-radius in frontend components.

Community
Intermediate