skills.rest
JNZader-Vault
JNZader-VaultOFFICIAL
Explore all skills by this author →
GitHub

frontend-web

Create Astro projects with React, Mantine UI, and TanStack Query.

Updated Feb 2, 2026
Search Tags:#typescript#web development#frontend#react#astro#tanstack-query#mantine
One-click install
npx skills add https://github.com/JNZader-Vault/project-starter-framework --skill frontend-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-web
Source: https://github.com/JNZader-Vault/project-starter-framework/tree/main/.ai-config/skills/frontend/frontend-web
Command: npx skills add https://github.com/JNZader-Vault/project-starter-framework --skill frontend-web

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust and opinionated foundation for building modern, performant web frontends, streamlining development with pre-configured best practices and essential libraries.

Core Features & Use Cases

  • Astro SSR & React Islands: Leverage Astro's Server-Side Rendering with React for interactive islands.
  • Component Library Integration: Built with Mantine UI for a consistent and accessible user interface.
  • Data Fetching & State Management: Integrates TanStack Query for efficient data fetching and Zustand for global state management.
  • Type Safety & Validation: Utilizes Zod for robust data validation and TypeScript for type safety.
  • Use Case: Quickly scaffold a new dashboard application, ensuring all core frontend concerns like API interaction, state management, and UI consistency are handled from the start.

Quick Start

Use the frontend-web skill to create a new Astro project with React and Mantine UI.

Frequently Asked Questions about frontend-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a frontend with Astro and React islands?▼

Astro Server-Side Rendering enables React islands by rendering static content server-side and hydrating interactive React components only where needed. This pattern ensures efficient, performant web development while maintaining a component-based architecture.

What is the best way to manage data fetching and global state in a React web application?▼

Manage data fetching and global state by integrating TanStack Query for efficient server-state fetching and Zustand for lightweight global state management. This combination provides a robust, type-safe foundation for complex web applications handling API interactions.

Does Mantine UI work with Astro for building accessible web interfaces?▼

Mantine UI works with Astro and React to provide a consistent and accessible user interface. The component library integration supplies pre-configured best practices, allowing you to quickly scaffold dashboard applications with accessible UI components.

How do I validate API responses and ensure type safety in a TypeScript web frontend?▼

Validate API responses and ensure type safety by utilizing Zod for robust runtime data validation and TypeScript for compile-time type checking. This combination guarantees that API client patterns and React Query hooks handle data predictably.

Can I use this Astro and React stack to quickly scaffold a new dashboard application?▼

You can use this stack to quickly scaffold a new dashboard application. It handles core frontend concerns like API interaction, state management, and UI consistency from the start, streamlining development with pre-configured best practices.

Related Skills

Explore More Software Engineering Skills→
inkbox-aiinkbox-ai
33

inkbox-ts

Integrate the Inkbox TypeScript SDK to manage identities, mailboxes, vaults, and contacts.

Official
Advanced
AsreonnAsreonn
3

godot-setup-export

Generate Godot export presets, icons, splash screens, and CI/CD pipelines.

Community
Intermediate
hakushunhakushun

tanstack-query

Consolidate TanStack Query v5 guidance for React data fetching and migration.

Community
Advanced
AmidVoshakulAmidVoshakul

astro

Build content-rich web applications with Astro's islands architecture.

Community
Intermediate