frontend

Orchestrate React 19+, Next.js 15+, and Vite 6+ frontend development tasks.

3|Updated Apr 12, 2026

Search Tags:#typescript #best practices #frontend #react #nextjs #vite #tailwind

Ready to run

npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill frontend-mauriciodelrio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill frontend-mauriciodelrio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many frontend projects lack a unified, step‑by‑step guidance that covers architecture, component patterns, rendering strategies, styling, data fetching, testing, performance, and security, leading to inconsistent code and missed best practices.

Core Features & Use Cases

Comprehensive Index: Orchestrates 20+ specialized sub‑skills for React, Next.js, and Vite frontends.
Cross‑Reference Checks: Enforces mandatory external skill checks for governance, risk, and compliance before any action.
Project Type Detection: Automatically identifies Next.js App Router, Vite SPA, or other frameworks and applies the appropriate guidelines.
Workflow Automation: Guides agents through detection, action mapping, mandatory skill activation, and final validation.

Quick Start

Use the frontend skill to automatically configure a new React project with Next.js, Tailwind CSS, and strict TypeScript settings.

Frequently Asked Questions about frontend

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

FAQPage Schema

How do I set up a new React project with Next.js and Tailwind CSS using TypeScript strict mode?▼

To set up a React project with Next.js, Tailwind CSS, and TypeScript strict mode, use a frontend skill that automatically detects the framework and applies structured guidelines for architecture, components, and styling to ensure best practices.

What's the best way to enforce frontend best practices across React and Vite projects?▼

Enforcing frontend best practices across React and Vite projects requires a unified guide that orchestrates specialized sub-skills for architecture, rendering, and data fetching, while running mandatory compliance checks before final validation.

Does this frontend development guide work with Next.js App Router and Vite 6?▼

Yes, this frontend development guide works with Next.js App Router and Vite 6 by automatically detecting the project type and applying the appropriate guidelines for React 19+, TypeScript strict mode, and Tailwind CSS.

How does project type detection work for React and Next.js frontend tasks?▼

Project type detection for React and Next.js frontend tasks works by automatically identifying whether the project uses Next.js App Router, Vite SPA, or other frameworks, then mapping the detected type to the appropriate architecture and rendering guidelines.

What areas of frontend development does this unified guide cover?▼

This unified frontend development guide covers architecture, component patterns, rendering strategies, styling, data fetching, testing, performance, and security, orchestrating over 20 specialized sub-skills for comprehensive task management.

Can I use this guide to handle both frontend architecture and security compliance checks?▼

Yes, you can use this guide to handle both frontend architecture and security compliance checks, as it enforces mandatory external skill checks for governance, risk, and compliance before completing any development action.