Build the Astro frontend with Tailwind CSS v4 via the Vite plugin, a WPGraphQL data layer, and React islands (shadcn/ui) only where needed. Use when implementing or fixing frontend files under frontend/ for this WordPress headless repo.
Installs into .claude/skills of the current project.
Are you the author of Astro Frontend Ui?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/diegosouzapw-astro-frontend-ui)
---
name: astro-frontend-ui
description: Build the Astro frontend with Tailwind CSS v4 via the Vite plugin, a WPGraphQL data layer, and React islands (shadcn/ui) only where needed. Use when implementing or fixing frontend files under frontend/ for this WordPress headless repo.
---
# Astro Frontend UI
## Overview
Implement a fast Astro public site that consumes WordPress via `/graphql`, keeps client JS minimal, and follows the repo’s UI style requirements. Focus on file outputs under `frontend/` and a small GraphQL client.
## Workflow
1. Inspect existing `frontend/` files for Astro + Tailwind v4 setup and adjust only within that subtree.
2. Ensure `frontend/Dockerfile`, `package.json`, and `astro.config.mjs` align with Tailwind v4 via Vite and dev server on `0.0.0.0:4321`.
3. Implement `src/lib/cms.ts` with endpoint resolution and two GraphQL queries.
4. Build pages (`/`, `/blog`, `/blog/[slug]`) in Astro with card-based UI and graceful empty states.
5. Use React islands only for interactive widgets, and keep everything else server-rendered.
## Non-Negotiables
- Use Tailwind CSS v4 via the Vite plugin; do not use deprecated Astro Tailwind integration.
- Keep JS minimal and limit React to islands only.
- UI style: clean, card-based, generous spacing, 2xl radii, subtle shadows.
## Default Stack
- Use `react` + `react-dom` only for islands.
- Use shadcn/ui components (Button/Card/Dialog/Dropdown) when interaction is needed.
- Use `lucide-react` icons as needed.
- Use `sonner` for toasts if useful.
- Use `graphql-request` or an equivalent tiny GraphQL client.
## Required Outputs
- Create or update under `frontend/`:
- `Dockerfile`
- `package.json`
- `astro.config.mjs`
- `src/lib/cms.ts`
- `src/pages/index.astro`
- `src/pages/blog/index.astro`
- `src/pages/blog/[slug].astro`
- `src/components/*` (Header, Footer, PostCard, Hero, FeatureGrid, CTA)
## Data Layer
- CMS endpoint is `${PUBLIC_CMS_URL || ASTRO_PUBLIC_CMS_URL}/graphql`.
- Provide queries:
- list posts: `title`, `slug`, `excerpt`, `date`
- post by slug: `title`, `content`, `date`
- Handle empty states for no posts.
## Acceptance Checklist
- `http://localhost:8080/` renders home.
- `/blog` renders list or empty state.
- `/blog/<slug>` renders content when posts exist.
- No unnecessary client JS outside islands.
