skills.rest
loki495
loki495COMMUNITY
Explore all skills by this author →
GitHub

frontend-stack

Applies frontend conventions for Tailwind, JavaScript, CSS, and responsive design across Laravel and OpenCart projects.

Updated Aug 25, 2017
Search Tags:#frontend#responsive design#laravel#jquery#tailwind#Alpine.js#opencart
One-click install
npx skills add https://github.com/loki495/dotfiles --skill frontend-stack-loki495
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-stack
Source: https://github.com/loki495/dotfiles/tree/main/ai/skills/frontend-stack
Command: npx skills add https://github.com/loki495/dotfiles --skill frontend-stack-loki495

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend work across Laravel and OpenCart projects often suffers from inconsistent technology choices and missed mobile layout issues. This Skill standardizes decisions about Tailwind versions, Alpine.js versus jQuery, CSS patterns, and responsive verification so UI work stays consistent with each project's existing stack. ## Core Features & Use Cases - Tailwind Guidance: Detects the configured Tailwind version (v3 config file or v4 CSS-based config) before writing utility classes, and prefers the latest stable version for new setups. - JavaScript Framework Selection: Directs Alpine.js for Laravel/Livewire interactivity while accepting jQuery in legacy OpenCart projects that already ship with it. - Responsive & Dark Mode Verification: Requires proactive small-viewport checks (~390px via Playwright or similar) and dual light/dark theme validation on any UI work. - Use Case: When building a new modal component in a Laravel project, the Skill ensures Alpine.js is used instead of jQuery, classes follow a readable grouping, and the layout is verified at mobile width in both themes. ## Quick Start Review this new checkout form component against the frontend-stack conventions and verify it works at a 390px viewport in both light and dark mode.

Frequently Asked Questions about frontend-stack

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

FAQPage Schema
How do I choose between Alpine.js and jQuery for frontend interactivity?▼

Alpine.js is preferred for Laravel and Livewire projects, while jQuery is acceptable in legacy OpenCart projects that already ship with it. Avoid introducing jQuery into Laravel projects or modernizing existing OpenCart jQuery without a specific reason.

How to check which Tailwind version a project uses?▼

Check package.json and tailwind.config.js for Tailwind v3, or look for the CSS-based config that indicates Tailwind v4. Use whichever version the project already has configured, and prefer the latest stable version only for new setups.

Is there a required Tailwind utility class ordering convention?▼

No strict ordering convention is required. Write classes in a sensible, readable grouping such as layout, spacing, typography, color, then state, without enforcing anything more rigid.

How should I verify mobile responsive layout on UI work?▼

Verify at a real small viewport around 390px wide using a dev browser tool like Playwright rather than shrinking a desktop window. Check proactively on any new components, modals, forms, or cards for squished inputs, overflow, and touch-sized buttons.

Do I need to test both light and dark mode for UI changes?▼

Yes, if the project supports both light and dark mode, verify both themes on any UI work. Do not assume the theme active during development is the only one that matters.

Related Skills

Explore More Software Engineering Skills→
brivarobrivaro

prowler-ui

Enforce Prowler UI development patterns for Next.js, React, and Tailwind CSS projects.

Community
Intermediate
petrkindlmannpetrkindlmann
64

cypress-automation

Automate end-to-end and component testing with Cypress for TypeScript frontend applications.

Community
Advanced
CaneproCanepro

webapp-testing

Automate end-to-end browser tests for web application UI regressions.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

web-component-design

Standardizes UI component patterns across React, Vue, and Svelte for design systems.

Official
Advanced