frontend-dev-guidelines

Define React frontend architecture with component patterns and routing guidelines.

Updated Aug 23, 2026

Search Tags:#typescript #frontend #react #routing #patterns #Suspense

One-click install

npx skills add https://github.com/Pygmalione/visuana-ultima --skill frontend-dev-guidelines-pygmalione

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/Pygmalione/visuana-ultima/tree/main/.claude/skills/frontend-development
Command: npx skills add https://github.com/Pygmalione/visuana-ultima --skill frontend-dev-guidelines-pygmalione

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a practical, opinionated blueprint for building scalable frontend applications. It codifies patterns that reduce complexity, accelerate delivery, and improve maintainability across teams.

Core Features & Use Cases

Component patterns: React.FC with TypeScript, lazy loading, Suspense boundaries, and clear prop interfaces.
Architecture guidance: Features directory, import aliases, and separation of concerns for data, UI, and routing.
Best practices for styling and routing: MUI v7 usage, TanStack Router integration, and accessible UI patterns.
Use Case: You’re starting a new React project and want a production-grade structure that minimizes churn and maximizes team velocity.

Quick Start

Create a new React component following the Quick Start checklist in the body and spin up a Suspense-based data fetch using useSuspenseQuery.