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.
Best use case
astro-frontend-ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using astro-frontend-ui should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/astro-frontend-ui/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How astro-frontend-ui Compares
| Feature / Agent | astro-frontend-ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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.Related Skills
astropy-fundamentals
Work with astronomical data using Astropy for FITS file I/O, coordinate transformations, physical units, precise time handling, and catalog operations. Use when processing telescope images, matching celestial catalogs, handling time-series observations, or building photometry/spectroscopy pipelines. Ideal for astronomy research requiring proper unit handling, coordinate frame transformations, and astronomical time scales.
astrology-interpretation-guide
Comprehensive astrology expert covering natal charts, transits, houses, aspects, and astrological traditions from Western to Vedic
astro-page-generator
Generate Astro page components with islands architecture. Triggers on "create astro page", "generate astro component", "astro file", ".astro page".
astro-monorepo
Guidelines for working on the Astro framework monorepo - covers build system, testing, coding conventions, and contribution workflow. Use when contributing to withastro/astro.
astro-testing
Testing and QA gate for Astro lead gen sites. Manual + E2E + A11y + Performance. FAIL = no deploy.
astro-security
Security patterns for Astro lead generation websites on Cloudflare. Forms, headers, bot protection, GDPR. Use for any production lead gen site.
astro-navigation
Navigation patterns for Astro sites. Header, footer, mobile menu, breadcrumbs, skip links. Use for all navigation implementation.
ring:dev-refactor-frontend
Analyzes frontend codebase against Ring standards and generates refactoring tasks for ring:dev-cycle-frontend. Dispatches frontend-specific agents in ANALYSIS mode.
rcr-frontend
Component development rules specific to Red Cliff Record. Use when working with React components, Tailwind CSS styling, Radix/Shadcn primitives, icons, buttons, forms, or frontend code in this project. Triggers on component files, styling questions, design tokens, Tailwind v4, Shadcn, Radix, TanStack Forms, Lucide icons, or UI primitive usage patterns (sizing, spacing, layout).
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
Frontend Verification & Testing
Verify and test Angular 18 frontend changes using Chrome DevTools MCP. Automatically check console errors, network requests, and visual rendering after implementing tasks or when fixing UI bugs. Use when creating components, debugging visual issues, validating API integration, or ensuring UI requirements are met. File types: .ts, .html, .css, .scss
frontend-trends-2026
Collection of 2026 Frontend Design Formulas (Liquid Glass, Bento, Neo-Brutalism, Eco-Dark).