Skip to content
frontend logo

Frontend Architecture & UX

frontend

Defines frontend standards for Next.js App Router, React 19, React Query, shadcn/ui. Use when building components, pages, hooks, or frontend state management.

SKILL.md

Full skill instructions

Frontend Architecture & UX

Stack

  • Next.js App Router
  • React 19
  • React Query (the only remote state manager)
  • shadcn/​ui + Tailwind CSS

Core Architecture Rules

Rendering Model

  • Server Components by default
  • Client Components only for interactivity
  • No Client Component by convenience
  • Client Components must be explicitly justified

Client Component Boundaries

Client Components must not:

  • Import Server Components
  • Access environment variables
  • Perform direct data fetching
  • Contain business or domain logic

Client Components may only:

  • Handle user interaction
  • Manage local UI state
  • Consume hooks
  • Render presentation logic

Layered Responsibilities

  • UI Components

    • Pure presentation
    • No business rules
    • No data normalization
  • Hooks

    • Compose UI state
    • Integrate React Query
    • No business decisions
  • Domain / Services

    • Business rules
    • Decision making
    • Data validation
  • API Layer

    • HTTP adaptation
    • Contract enforcement
    • Error translation

Data & State Management

  • React Query is the only remote state manager
  • No direct data mutations without React Query
  • No fetch calls outside the API layer

React Query Rules

  • Every query must have a stable queryKey
  • Mutable objects are forbidden in queryKey
  • All mutations must explicitly invalidate or update cache
  • refetchOnWindowFocus is disabled by default
  • Errors must always be handled explicitly
  • Silent failures are forbidden

UX Best Practices

Accessibility

  • Accessibility first
  • ARIA roles where applicable
  • Full keyboard navigation support
  • Respect prefers-reduced-motion

Visual Consistency

  • Clear visual hierarchy
  • Consistent spacing and typography
  • Design tokens must be respected
  • Avoid layout shifts (CLS)

States Handling

Every async interaction must define:

  • Loading state (prefer skeletons over spinners)
  • Error state (user-friendly, not technical)
  • Empty state (intentional, not accidental)

Technical errors must never be shown directly to users.


Performance Rules

  • Minimize client-side JavaScript
  • Memoize only when measured or clearly justified
  • Defensive memoization is forbidden
  • Avoid unnecessary re-renders
  • Lazy-load non-critical components only
  • Dynamic imports must not affect critical rendering paths

Developer Experience (DX)

  • Reusable components over duplication
  • Clear, explicit naming
  • Prefer composition over configuration
  • Avoid deep prop drilling

Props Discipline

  • More than 5 props requires design reconsideration
  • Boolean explosion is forbidden (isA, isB, isC)
  • Prefer explicit components over conditional flags

Non-Negotiables

  • No business logic in UI
  • No direct backend calls from components
  • No architectural shortcuts
  • Predictability over flexibility

Architectural violations are treated as bugs.

More skills from diegosouzapw

mermaid-diagrams logo
diegosouzapw/awesome-omni-skill

mermaid-diagrams

Mermaid diagram creation for flowcharts, sequences, ERDs, and more. Generate diagrams from text in markdown files. Use for documentation, architecture diagrams, and visual representations. Triggers on mermaid, flowchart, sequence diagram, ERD, entity relationship, gantt chart, pie chart, class di...

62 1
View
tauri2-react-rust logo
diegosouzapw/awesome-omni-skill

tauri2-react-rust

Guides development of cross-platform desktop apps with Tauri 2, TypeScript, React, and Rust. Use when building Tauri apps, implementing IPC, designing Rust backend or TypeScript/React frontend, when researching or cloning a website (open site, snapshot elements), when verifying local dev or built...

62 1
View
fp-ts-errors logo
diegosouzapw/awesome-omni-skill

fp-ts-errors

Handle errors as values using fp-ts Either and TaskEither for cleaner, more predictable TypeScript code. Use when implementing error handling patterns with fp-ts.

62 0
View
ring:pre-dev-research logo
diegosouzapw/awesome-omni-skill

ring:pre-dev-research

Gate 0 research phase for pre-dev workflow. Dispatches 3 parallel research agents to gather codebase patterns, external best practices, and framework documentation BEFORE creating PRD/TRD. Outputs research.md with file:line references.

62 0
View
create-assistant logo
diegosouzapw/awesome-omni-skill

create-assistant

Create and configure Vapi voice AI assistants with models, voices, transcribers, tools, hooks, and advanced settings. Use when building voice agents, phone bots, customer support assistants, or any conversational AI that handles phone or web calls.

62 0
View
codex-headless logo
diegosouzapw/awesome-omni-skill

codex-headless

Delegiere Aufgaben an OpenAI Codex CLI im Headless-Mode. Nutzt ChatGPT Subscription (KEIN API Key). Nur Workspace-Zugriff, KEIN System-Zugriff. Auto-Accept mit --full-auto. Web-Recherche mit --search.

62 0
View
social-media-scheduler logo
diegosouzapw/awesome-omni-skill

social-media-scheduler

Generate a full week of social media content for any topic. Outputs platform-optimized posts for Twitter/X, LinkedIn, and Instagram with hashtags and posting times.

62 0
View
Data Privacy Compliance logo
diegosouzapw/awesome-omni-skill

Data Privacy Compliance

Data privacy and regulatory compliance specialist for GDPR, CCPA, HIPAA, and international data protection laws. Use when implementing privacy controls, conducting data protection impact assessments, ensuring regulatory compliance, or managing data subject rights. Expert in consent management, da...

62 0
View
triple-review logo
diegosouzapw/awesome-omni-skill

triple-review

Reviews a task using the TRIPLE protocol, as the review agent.

62 0
View
Tech Stack & Architecture Decision logo
diegosouzapw/awesome-omni-skill

Tech Stack & Architecture Decision

Define and document the technology stack and architecture decisions for a project. Use when the user needs to choose a tech stack, make architecture decisions, define infrastructure choices, or document technology selections. Triggers on requests like "define the tech stack", "choose technologies...

62 0
View
1k-architecture logo
diegosouzapw/awesome-omni-skill

1k-architecture

OneKey monorepo architecture and code organization. Use when understanding project structure, package relationships, import rules, or component organization. Triggers on architecture, structure, packages, imports, hierarchy, dependencies, monorepo, organization.

62 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View