What tech stack is this skill optimized for?

This skill is specifically designed for modern web applications using Vite as a build tool, TypeScript for type safety, Tailwind CSS for styling, and Alpine.js for lightweight interactivity.

Does this skill help with code quality?

Yes, it includes automated PostToolUse hooks that run TypeScript checks, apply Prettier formatting, and scan for leftover console logs after file edits.

How does the 'Docs First' principle work?

The skill prevents the AI from 'hallucinating' code by requiring it to fetch official documentation using MCP tools before writing Tailwind, Alpine, or Vite configurations.

Can I use this skill to build marketing landing pages?

No, this skill is optimized for interactive apps and dashboards. For landing pages or marketing sites, you should use the 'frontend-lp' skill instead.

Vite & Alpine Frontend App Builder

Name: Vite & Alpine Frontend App Builder
Author: petrogurcak

bypetrogurcak

0•

デザインツール

Accelerates the development of interactive web applications and dashboards using a docs-first workflow with Vite, TypeScript, Tailwind CSS, and Alpine.js.

This skill provides a structured, documentation-driven methodology for building robust web applications, admin panels, and e-commerce backends. It enforces high-quality standards by requiring documentation retrieval via MCP tools before code generation, ensuring that implementations follow the latest framework patterns. The skill includes specialized workflows for Alpine.js state management, responsive Tailwind layouts, and Vite optimization, while integrated hooks automatically handle TypeScript linting, Prettier formatting, and code cleanup to maintain a production-grade codebase.

主な機能

010 GitHub stars

02Automated hooks for TypeScript type-checking and Prettier formatting on every edit.

03Docs-first workflow that mandates fetching official documentation before code generation.

04Specialized state machine patterns for complex Alpine.js interactive components.

05Structured checklists for responsive Tailwind CSS layouts and e-commerce UI elements.

06Built-in console-log-check to prevent debugging code from reaching production.

ユースケース

01Developing a custom e-commerce backend featuring interactive product grids and cart logic.

02Creating internal tools and web apps that require strict TypeScript types and optimized Vite builds.

03Building a data-driven admin dashboard with complex state and reactive CRUD interfaces.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petrogurcak/skills frontend-app

For use in Claude.ai and ChatGPT