Why does it fetch documentation before coding?

The 'Docs First' principle ensures the AI uses the most current syntax and patterns for Tailwind and Alpine.js, significantly reducing hallucinations and the use of deprecated methods.

What build tool does this skill use?

This skill is fully optimized for Vite, including specific configurations for TypeScript path aliases, environment variables, and build optimizations.

Does it automatically format my code?

Yes, the skill includes hooks that automatically run Prettier and check for console logs every time you edit a supported frontend file.

Can I use this skill for React projects?

No, this skill is specifically optimized for Alpine.js and Tailwind CSS workflows. For React-based projects, you should use the frontend-app or frontend-lp skills.

Does it support e-commerce specific components?

Yes, it includes specialized workflows and patterns for product cards, checkout forms, price formatting, and interactive cart state management.

Frontend E-commerce Workflow

Name: Frontend E-commerce Workflow
Author: petrogurcak

bypetrogurcak

0•

E-commerce Solutions

Implements a documentation-first workflow for building high-performance e-commerce interfaces using Vite, TypeScript, Tailwind CSS, and Alpine.js.

This skill enforces a mandatory 'docs-first' development methodology for creating modern, lightweight e-commerce frontends. By requiring the retrieval of live documentation via MCP before any implementation, it ensures that Vite configurations, Tailwind layouts, and Alpine.js components adhere to the latest industry standards and best practices. It is specifically optimized for building interactive shopping experiences, featuring structured checklists for responsive product grids, type-safe cart logic, and high-performance build configurations while avoiding the overhead of heavy JavaScript frameworks.

Key Features

01Responsive Tailwind CSS layout generation with mobile-first breakpoints

02Docs-first implementation strategy via integrated MCP documentation fetching

03Strict TypeScript 5.7+ configuration with automated type-checking hooks

04Optimized Alpine.js 3.x reactivity patterns for interactive shopping components

050 GitHub stars

06Automated code formatting and console log cleanup via post-edit hooks

Use Cases

01Building responsive product galleries and interactive shopping cart systems

02Developing lightweight, SEO-friendly e-commerce UI components without React

03Scaffolding Vite and TypeScript projects with strict performance and quality standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petrogurcak/skills frontend-workflow

For use in Claude.ai and ChatGPT

Download Skill