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
- Asks for the mode – Simple HTML, Dashboard/Admin UI, or Website/Landing Page
- Generates HTML – Responsive, semantically correct, styled with Tailwind CSS
- Adds interactivity – Alpine.js for dashboards, optional for websites, none for simple
- 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{TITLE}}</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->
<!-- Content here -->
</body>
</html>
Simple Style Rules
- Tailwind CSS via CDN – no local build, no npm
- No JavaScript – unless the user explicitly asks for it
- Semantic HTML –
<header>, <main>, <footer>, <nav>, <section>
- Responsive – Mobile-first with
sm:, md:, lg: breakpoints
- Accessibility –
alt attributes, aria-label where meaningful, sufficient contrast
Simple Tailwind Class Guidelines
| Element |
Classes |
| Container |
max-w-4xl mx-auto px-4 py-8 |
| Cards |
bg-white rounded-lg shadow-md p-6 |
| Buttons |
bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg |
| Forms |
border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent |
| Tables |
w-full border-collapse with divide-y divide-gray-200 |
| H1 |
text-3xl font-bold |
| H2 |
text-xl font-semibold |
Dashboard Mode (TailAdmin)
Reference
Available Dashboard Variants
| Variant |
URL |
Use Case |
| eCommerce |
https://demo.tailadmin.com/ |
Shop overview, revenue, orders |
| Analytics |
https://demo.tailadmin.com/analytics |
Traffic, conversions, metrics |
| Marketing |
https://demo.tailadmin.com/marketing |
Campaigns, reach, ROI |
| CRM |
https://demo.tailadmin.com/crm |
Contacts, deals, pipeline |
| Stocks |
https://demo.tailadmin.com/stocks |
Financial data, prices, portfolio |
Dashboard Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{TITLE}}</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body class="bg-gray-100 text-gray-900" x-data="dashboardData()">
<!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->
<!-- Sidebar -->
<aside class="fixed left-0 top-0 z-50 flex h-screen w-64 flex-col bg-white shadow-lg">
<!-- Navigation -->
</aside>
<!-- Main Content -->
<main class="ml-64 p-6">
<!-- Header -->
<!-- KPI Cards -->
<!-- Charts -->
<!-- Tables -->
</main>
<script>
function dashboardData() {
return {
sidebarOpen: true,
// Dashboard state
}
}
</script>
</body>
</html>
Dashboard Components
Detailed patterns → references/dashboard-patterns.md
| Component |
Description |
| KPI Cards |
Metric + trend indicator (↑/↓) + sparkline |
| Charts |
Line, Bar, Area, Donut via ApexCharts |
| Sidebar |
Fixed navigation on left, collapsible, with icons |
| Tables |
Sortable, with pagination and search field |
| Forms |
Input groups, selects, toggles, date picker |
| Modals |
Overlay dialogs for details/editing |
| Alerts |
Toast notifications, status banners |
Alpine.js Interactions
Alpine.js is used for all interactive elements:
<!-- Toggle Sidebar -->
<button @click="sidebarOpen = !sidebarOpen">Menu</button>
<!-- Tabs -->
<div x-data="{ activeTab: 'overview' }">
<button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-blue-500' : ''">Overview</button>
<div x-show="activeTab === 'overview'">...</div>
</div>
<!-- Dropdown -->
<div x-data="{ open: false }">
<button @click="open = !open">Options</button>
<div x-show="open" @click.away="open = false">...</div>
</div>
Website Mode (Tailwind CSS)
Reference
Proven Patterns (inspired by Tailwind Showcase)
| Pattern |
Inspired by |
Use Case |
| SaaS Landing Page |
Salient |
Software products, B2B |
| Portfolio |
Spotlight |
Personal pages, freelancers |
| Conference/Event |
Keynote |
Events, meetups |
| Podcast/Media |
Transmit |
Audio, video, content |
| Mobile App Promo |
Pocket |
App download pages |
Website Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{TITLE}}</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900">
<!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-white/80 backdrop-blur-md shadow-sm z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="#" class="text-xl font-bold">Logo</a>
<div class="hidden md:flex space-x-8">
<a href="#features" class="text-gray-600 hover:text-gray-900">Features</a>
<a href="#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
<a href="#contact" class="text-gray-600 hover:text-gray-900">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header>...</header>
<!-- Features -->
<section id="features">...</section>
<!-- Pricing / CTA -->
<section id="pricing">...</section>
<!-- Footer -->
<footer>...</footer>
</body>
</html>
Available Sections
Detailed patterns → references/website-patterns.md
| Section |
Description |
| Hero |
Large title + subtitle + CTA button, optionally with image/video |
| Features Grid |
3-4 columns with icons and descriptions |
| Testimonials |
Customer quotes with avatar and name |
| Pricing |
Pricing tables with highlight for recommended plan |
| CTA |
Call-to-action banner with button |
| FAQ |
Accordion with frequently asked questions |
| Team |
Team introduction with photos and roles |
| Stats |
Key figures in large font (e.g. "10,000+ Customers") |
| Footer |
Links, social media, copyright |
Common Conventions
Style Rules
- Responsive – Mobile-first with
sm:, md:, lg: breakpoints
- Semantic HTML –
<header>, <main>, <footer>, <nav>, <section>
- Accessibility –
alt attributes, aria-label where meaningful, sufficient contrast
- Dark Mode – Optional via
class="dark" and dark: prefix (only on request)
- No custom CSS – Exclusively Tailwind utility classes
Tailwind Class Guidelines
| Element |
Classes |
| Container |
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 |
| Cards |
bg-white rounded-xl shadow-md p-6 |
| Buttons (primary) |
bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg transition |
| Buttons (secondary) |
border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-2.5 px-5 rounded-lg transition |
| Inputs |
border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full |
| Tables |
w-full border-collapse divide-y divide-gray-200 |
| H1 |
text-4xl sm:text-5xl font-bold tracking-tight |
| H2 |
text-2xl sm:text-3xl font-semibold |
Storage Location
Derive filename from the page purpose (kebab-case):
dashboard.html
landing-page.html
admin-panel.html
portfolio.html
Storage location depending on context:
- Standalone: Project root
- Spring Boot:
src/main/resources/static/
- Quarkus:
src/main/resources/META-INF/resources/
Images
- Placeholders with
https://placehold.co/ or inline SVG icons
- For icons: Heroicons as inline SVG (https://heroicons.com)
Co-Author
<!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->
Additional Resources
1---2name: frontend-23description: 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.4---56# Frontend Skill78Creates modern, responsive web UIs with **Tailwind CSS**.910> **Philosophy:** Three modes for different requirements:11> **Simple** → Pure HTML + Tailwind CSS CDN (no JavaScript, no build tool)12> **Dashboard** → TailAdmin (HTML + Tailwind CSS + Alpine.js)13> **Website** → Tailwind CSS CDN (no build tool, optional JS)1415---1617## What This Skill Does18191. **Asks for the mode** – Simple HTML, Dashboard/Admin UI, or Website/Landing Page202. **Generates HTML** – Responsive, semantically correct, styled with Tailwind CSS213. **Adds interactivity** – Alpine.js for dashboards, optional for websites, none for simple224. **Saves the files** – In the project or at a desired path2324## How to Use2526```27Create a simple contact form28```2930```31Create a dashboard for order overview32```3334```35/frontend Admin panel with KPI cards and table36```3738```39Create a landing page for my SaaS product40```4142```43Build me a portfolio page44```4546---4748## Instructions4950### Step 1 – Ask for mode5152The three modes use different technology stacks and layouts. Clarify the mode beforehand to use the right stack:5354| Mode | When to use | Technology |55|------|-------------|------------|56| **Simple** | Simple HTML pages, forms, static content, quick prototypes | HTML + Tailwind CSS CDN (no JavaScript) |57| **Dashboard** | Admin panels, dashboards, data-rich UIs, tables, charts | TailAdmin + Alpine.js + ApexCharts |58| **Website** | Landing pages, marketing pages, portfolios, SaaS pages | Tailwind CSS CDN (optional JS) |5960If `$ARGUMENTS` clearly indicate the mode (e.g. "Dashboard", "Admin", "simple form", "landing page"), start directly.61Otherwise ask.6263---6465## Simple Mode (Pure HTML)6667For simple, static pages without JavaScript. Perfect for forms, simple dashboards, admin UIs, and quick prototypes.6869> **Philosophy:** Not every interface needs a framework.70> Sometimes a well-designed HTML page is enough.7172### Simple Skeleton7374```html75<!DOCTYPE html>76<html lang="en">77<head>78 <meta charset="UTF-8">79 <meta name="viewport" content="width=device-width, initial-scale=1.0">80 <title>{{TITLE}}</title>81 <script src="https://cdn.tailwindcss.com"></script>82</head>83<body class="bg-gray-50 text-gray-900">84 <!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->85 <!-- Content here -->86</body>87</html>88```8990### Simple Style Rules9192- **Tailwind CSS via CDN** – no local build, no npm93- **No JavaScript** – unless the user explicitly asks for it94- **Semantic HTML** – `<header>`, `<main>`, `<footer>`, `<nav>`, `<section>`95- **Responsive** – Mobile-first with `sm:`, `md:`, `lg:` breakpoints96- **Accessibility** – `alt` attributes, `aria-label` where meaningful, sufficient contrast9798### Simple Tailwind Class Guidelines99100| Element | Classes |101|---------|---------|102| Container | `max-w-4xl mx-auto px-4 py-8` |103| Cards | `bg-white rounded-lg shadow-md p-6` |104| Buttons | `bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg` |105| Forms | `border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent` |106| Tables | `w-full border-collapse` with `divide-y divide-gray-200` |107| H1 | `text-3xl font-bold` |108| H2 | `text-xl font-semibold` |109110---111112## Dashboard Mode (TailAdmin)113114### Reference115116- **Demo:** https://demo.tailadmin.com/117- **License:** MIT (Open Source, Free Edition)118- **Technology:** HTML + Tailwind CSS + Alpine.js + ApexCharts119120### Available Dashboard Variants121122| Variant | URL | Use Case |123|---------|-----|----------|124| eCommerce | https://demo.tailadmin.com/ | Shop overview, revenue, orders |125| Analytics | https://demo.tailadmin.com/analytics | Traffic, conversions, metrics |126| Marketing | https://demo.tailadmin.com/marketing | Campaigns, reach, ROI |127| CRM | https://demo.tailadmin.com/crm | Contacts, deals, pipeline |128| Stocks | https://demo.tailadmin.com/stocks | Financial data, prices, portfolio |129130### Dashboard Skeleton131132```html133<!DOCTYPE html>134<html lang="en">135<head>136 <meta charset="UTF-8">137 <meta name="viewport" content="width=device-width, initial-scale=1.0">138 <title>{{TITLE}}</title>139 <script src="https://cdn.tailwindcss.com"></script>140 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>141 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>142</head>143<body class="bg-gray-100 text-gray-900" x-data="dashboardData()">144 <!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->145146 <!-- Sidebar -->147 <aside class="fixed left-0 top-0 z-50 flex h-screen w-64 flex-col bg-white shadow-lg">148 <!-- Navigation -->149 </aside>150151 <!-- Main Content -->152 <main class="ml-64 p-6">153 <!-- Header -->154 <!-- KPI Cards -->155 <!-- Charts -->156 <!-- Tables -->157 </main>158159 <script>160 function dashboardData() {161 return {162 sidebarOpen: true,163 // Dashboard state164 }165 }166 </script>167</body>168</html>169```170171### Dashboard Components172173Detailed patterns → [references/dashboard-patterns.md](references/dashboard-patterns.md)174175| Component | Description |176|-----------|-------------|177| **KPI Cards** | Metric + trend indicator (↑/↓) + sparkline |178| **Charts** | Line, Bar, Area, Donut via ApexCharts |179| **Sidebar** | Fixed navigation on left, collapsible, with icons |180| **Tables** | Sortable, with pagination and search field |181| **Forms** | Input groups, selects, toggles, date picker |182| **Modals** | Overlay dialogs for details/editing |183| **Alerts** | Toast notifications, status banners |184185### Alpine.js Interactions186187Alpine.js is used for all interactive elements:188189```html190<!-- Toggle Sidebar -->191<button @click="sidebarOpen = !sidebarOpen">Menu</button>192193<!-- Tabs -->194<div x-data="{ activeTab: 'overview' }">195 <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'border-blue-500' : ''">Overview</button>196 <div x-show="activeTab === 'overview'">...</div>197</div>198199<!-- Dropdown -->200<div x-data="{ open: false }">201 <button @click="open = !open">Options</button>202 <div x-show="open" @click.away="open = false">...</div>203</div>204```205206---207208## Website Mode (Tailwind CSS)209210### Reference211212- **Showcase:** https://tailwindcss.com/showcase213- **Technology:** HTML + Tailwind CSS CDN (no build tool, no npm)214215### Proven Patterns (inspired by Tailwind Showcase)216217| Pattern | Inspired by | Use Case |218|---------|-------------|----------|219| **SaaS Landing Page** | Salient | Software products, B2B |220| **Portfolio** | Spotlight | Personal pages, freelancers |221| **Conference/Event** | Keynote | Events, meetups |222| **Podcast/Media** | Transmit | Audio, video, content |223| **Mobile App Promo** | Pocket | App download pages |224225### Website Skeleton226227```html228<!DOCTYPE html>229<html lang="en">230<head>231 <meta charset="UTF-8">232 <meta name="viewport" content="width=device-width, initial-scale=1.0">233 <title>{{TITLE}}</title>234 <script src="https://cdn.tailwindcss.com"></script>235</head>236<body class="bg-white text-gray-900">237 <!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->238239 <!-- Navigation -->240 <nav class="fixed top-0 w-full bg-white/80 backdrop-blur-md shadow-sm z-50">241 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">242 <a href="#" class="text-xl font-bold">Logo</a>243 <div class="hidden md:flex space-x-8">244 <a href="#features" class="text-gray-600 hover:text-gray-900">Features</a>245 <a href="#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>246 <a href="#contact" class="text-gray-600 hover:text-gray-900">Contact</a>247 </div>248 </div>249 </nav>250251 <!-- Hero Section -->252 <header>...</header>253254 <!-- Features -->255 <section id="features">...</section>256257 <!-- Pricing / CTA -->258 <section id="pricing">...</section>259260 <!-- Footer -->261 <footer>...</footer>262</body>263</html>264```265266### Available Sections267268Detailed patterns → [references/website-patterns.md](references/website-patterns.md)269270| Section | Description |271|---------|-------------|272| **Hero** | Large title + subtitle + CTA button, optionally with image/video |273| **Features Grid** | 3-4 columns with icons and descriptions |274| **Testimonials** | Customer quotes with avatar and name |275| **Pricing** | Pricing tables with highlight for recommended plan |276| **CTA** | Call-to-action banner with button |277| **FAQ** | Accordion with frequently asked questions |278| **Team** | Team introduction with photos and roles |279| **Stats** | Key figures in large font (e.g. "10,000+ Customers") |280| **Footer** | Links, social media, copyright |281282---283284## Common Conventions285286### Style Rules287288- **Responsive** – Mobile-first with `sm:`, `md:`, `lg:` breakpoints289- **Semantic HTML** – `<header>`, `<main>`, `<footer>`, `<nav>`, `<section>`290- **Accessibility** – `alt` attributes, `aria-label` where meaningful, sufficient contrast291- **Dark Mode** – Optional via `class="dark"` and `dark:` prefix (only on request)292- **No custom CSS** – Exclusively Tailwind utility classes293294### Tailwind Class Guidelines295296| Element | Classes |297|---------|---------|298| Container | `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` |299| Cards | `bg-white rounded-xl shadow-md p-6` |300| Buttons (primary) | `bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg transition` |301| Buttons (secondary) | `border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-2.5 px-5 rounded-lg transition` |302| Inputs | `border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full` |303| Tables | `w-full border-collapse divide-y divide-gray-200` |304| H1 | `text-4xl sm:text-5xl font-bold tracking-tight` |305| H2 | `text-2xl sm:text-3xl font-semibold` |306307### Storage Location308309Derive filename from the page purpose (kebab-case):310311```312dashboard.html313landing-page.html314admin-panel.html315portfolio.html316```317318Storage location depending on context:319- **Standalone**: Project root320- **Spring Boot**: `src/main/resources/static/`321- **Quarkus**: `src/main/resources/META-INF/resources/`322323### Images324325- Placeholders with `https://placehold.co/` or inline SVG icons326- For icons: Heroicons as inline SVG (https://heroicons.com)327328### Co-Author329330```html331<!-- Co-Author: Claude (claude-sonnet-4-6, Anthropic) – generated via frontend -->332```333334---335336## Additional Resources337338- Tailwind CSS Docs: https://tailwindcss.com/docs339- Tailwind CDN: https://cdn.tailwindcss.com340- TailAdmin Demo: https://demo.tailadmin.com/341- Alpine.js Docs: https://alpinejs.dev/342- ApexCharts Docs: https://apexcharts.com/343- Heroicons: https://heroicons.com/
mgoericke