skills.rest
lagarcess
lagarcessCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Patterns

Define standardized React and Next.js component patterns with TypeScript, Tailwind, and state management.

1|Updated Apr 4, 2026
Search Tags:#typescript#react#nextjs#tailwind#zustand#design-system#react-query
One-click install
npx skills add https://github.com/lagarcess/argus --skill frontend-patterns-lagarcess
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Patterns
Source: https://github.com/lagarcess/argus/tree/main/.agent/skills/frontend-patterns
Command: npx skills add https://github.com/lagarcess/argus --skill frontend-patterns-lagarcess

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a consistent, production-oriented set of frontend conventions to reduce ad hoc UI implementations, prevent performance regressions, and speed development of the Argus web application.

Core Features & Use Cases

  • Tech Stack Conventions: Defines Next.js 14+ App Router structure, TypeScript strict mode, and Tailwind CSS dark-mode-first styling.
  • State & Data Patterns: Recommends React Query for server state and Zustand for client state with examples for chart and backtest data flows.
  • Component & Design Guidance: Enforces functional components, co-location of types and styles, lazy loading, React.memo for heavy charts, and design tokens for consistent UI (accent colors, spacing, typography).
  • Use Case: Rapidly build an authenticated backtesting dashboard that displays equity curves, strategy cards, and interactive parameter controls while following performance and styling conventions.

Quick Start

Scaffold a TypeScript Next.js strategy card component with Tailwind styling, React Query for fetching backtest results, Zustand for client state, and NextAuth-protected routes.

Frequently Asked Questions about Frontend Patterns

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

FAQPage Schema
What are the best frontend patterns for building a Next.js dashboard with charts?▼

The best frontend patterns for a Next.js dashboard involve using the App Router, Tailwind dark-mode styling, and React.memo for heavy charts. This approach enforces TypeScript strict mode and functional components to prevent performance regressions.

How do I manage state in a Next.js TypeScript backtest application?▼

To manage state in a Next.js TypeScript backtest application, use React Query for server state and Zustand for client state. This pattern standardizes data flows for charts and interactive parameter controls.

Does this Next.js component convention support Tailwind dark-mode and NextAuth?▼

Yes, these Next.js component conventions support Tailwind dark-mode-first styling and NextAuth-protected routes. They provide standardized design tokens for spacing and typography within authenticated dashboard applications.

How do I scaffold a React strategy card component with React Query and Zustand?▼

To scaffold a React strategy card component with React Query and Zustand, co-locate types and styles, implement lazy loading, and apply design tokens. This ensures consistent UI and performance for backtest results.

Why use React Query and Zustand together for React server and client state?▼

Using React Query and Zustand together separates server state from client state in React applications. React Query handles fetching backtest results while Zustand manages interactive UI state, preventing ad hoc implementations.

Related Skills

Explore More Software Engineering Skills→
kingdoubleglazingkingdoubleglazing

frontend-dev

Standardize React/Next.js frontend development with TypeScript, Tailwind, and Vitest.

Community
Intermediate
0xjc65eth0xjc65eth
4

code-writer

Generate TypeScript/React/Next.js code scaffolds for CYPHER V3 with Zod validation.

Community
Intermediate
buildworksaibuildworksai

react-best-practices

Enforce React and TypeScript frontend patterns with TanStack Query and Zustand.

Community
Intermediate
mahamaneharouna9-cpumahamaneharouna9-cpu

state-management-expert

Analyze React projects to recommend state management libraries and optimize performance.

Community
Advanced