# Astro Frontend UI

> 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.

- Skill: `diegosouzapw/astro-frontend-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/astro-frontend-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/astro-frontend-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/astro-frontend-ui

---


# 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.