# Frontend
> Creates modern web UIs with Tailwind CSS. Three modes – Simple HTML pages (no JS), Dashboards/Admin Panels with TailAdmin (Alpine.js + ApexCharts), and Websites/Landing Pages with Tailwind CSS CDN. Use this skill for "create a dashboard", "landing page", "admin UI", "frontend", "website", "build a UI", "portfolio page", "create an HTML page", "simple website", "static page", "build me a form" or when a responsive HTML page with Tailwind CSS is needed. Do not use for complex SPAs with React/Vue/Angular.
- Skill: `mgoericke/frontend-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add mgoericke/frontend-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mgoericke/frontend-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mgoericke (https://skillmd.com/u/mgoericke)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/mgoericke/frontend-2
---
# Frontend Skill
Creates modern, responsive web UIs with **Tailwind CSS**.
> **Philosophy:** Three modes for different requirements:
> **Simple** → Pure HTML + Tailwind CSS CDN (no JavaScript, no build tool)
> **Dashboard** → TailAdmin (HTML + Tailwind CSS + Alpine.js)
> **Website** → Tailwind CSS CDN (no build tool, optional JS)
---
## What This Skill Does
1. **Asks for the mode** – Simple HTML, Dashboard/Admin UI, or Website/Landing Page
2. **Generates HTML** – Responsive, semantically correct, styled with Tailwind CSS
3. **Adds interactivity** – Alpine.js for dashboards, optional for websites, none for simple
4. **Saves the files** – In the project or at a desired path
## How to Use
```
Create a simple contact form
```
```
Create a dashboard for order overview
```
```
/frontend Admin panel with KPI cards and table
```
```
Create a landing page for my SaaS product
```
```
Build me a portfolio page
```
---
## Instructions
### Step 1 – Ask for mode
The three modes use different technology stacks and layouts. Clarify the mode beforehand to use the right stack:
| Mode | When to use | Technology |
|------|-------------|------------|
| **Simple** | Simple HTML pages, forms, static content, quick prototypes | HTML + Tailwind CSS CDN (no JavaScript) |
| **Dashboard** | Admin panels, dashboards, data-rich UIs, tables, charts | TailAdmin + Alpine.js + ApexCharts |
| **Website** | Landing pages, marketing pages, portfolios, SaaS pages | Tailwind CSS CDN (optional JS) |
If `$ARGUMENTS` clearly indicate the mode (e.g. "Dashboard", "Admin", "simple form", "landing page"), start directly.
Otherwise ask.
---
## Simple Mode (Pure HTML)
For simple, static pages without JavaScript. Perfect for forms, simple dashboards, admin UIs, and quick prototypes.
> **Philosophy:** Not every interface needs a framework.
> Sometimes a well-designed HTML page is enough.
### Simple Skeleton
```html
{{TITLE}}
```
### Simple Style Rules
- **Tailwind CSS via CDN** – no local build, no npm
- **No JavaScript** – unless the user explicitly asks for it
- **Semantic HTML** – ``, ``, `