skills.rest
djimontyp
djimontypCOMMUNITY
Explore all skills by this author →
Website𝕏@djimontypGitHub

frontend

Build React interfaces with shadcn/ui, semantic tokens, and WCAG AA compliance.

Updated Aug 23, 2026
Search Tags:#typescript#architecture#frontend#react#zustand#state-management#websocket
One-click install
npx skills add https://github.com/djimontyp/task-tracker --skill frontend-djimontyp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/djimontyp/task-tracker/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/djimontyp/task-tracker --skill frontend-djimontyp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solves?

This Skill eliminates the complexity of building scalable React applications by providing battle-tested architecture patterns and state management solutions.

Core Features & Use Cases

  • Modern React Architecture: TypeScript-first development with lazy-loaded pages and domain-driven feature organization.
  • Dual State Management: Clear separation between server state (TanStack Query) and client state (Zustand).
  • Real-time WebSocket Integration: Native WebSocket support with automatic reconnection and topic-based messaging.
  • Use Case: Imagine building a real-time dashboard that displays live metrics. Use this Skill to implement WebSocket connections that automatically update UI components when new data arrives.

Quick Start

Use the frontend skill to create a new React component that fetches user data from an API and displays it in a responsive card layout.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build a production-grade React application with TypeScript and enterprise patterns?▼

Build production-grade React applications using TypeScript-first architecture with lazy-loaded pages, domain-driven feature organization, and shadcn/ui components. This Skill provides battle-tested patterns for scalable, maintainable React interfaces with semantic color tokens, WCAG AA compliance, and 44px touch targets.

How do I manage both server and client state in React with TanStack Query and Zustand?▼

Separate server state management using TanStack Query from client state using Zustand for clear, maintainable state handling. This dual approach eliminates complexity by isolating API data fetching from UI state, reducing bugs and improving code organization in React applications.

Can I add real-time WebSocket integration to a React dashboard?▼

Yes. Implement native WebSocket support with automatic reconnection and topic-based messaging to build real-time dashboards. Components automatically update when new data arrives, enabling live metrics and reactive UI without manual polling.

What accessibility standards does shadcn/ui help me meet?▼

shadcn/ui components enforce WCAG AA compliance, semantic color tokens, ARIA labeling for icon buttons, and 44px touch targets by default. This ensures consistent, accessible UI across pages and components without manual accessibility audits.

How do I structure React components with a design system and shared UI library?▼

Organize components in dedicated code paths like frontend/src/shared/ui and frontend/src/shared/components, using shadcn primitives and design-system token integration. This structure enables consistent styling and reusable component patterns across your entire application.

What's the difference between this architecture approach and building React apps without established patterns?▼

Established architecture patterns with TypeScript, state separation, and shadcn/ui components eliminate inconsistency, accessibility issues, and state management bugs. This approach scales to enterprise applications where ad-hoc patterns fail.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
DrLuggelsDrLuggels
3

deployment-pipeline-design

Designs multi-stage CI/CD pipelines with approval gates and security scans.

Community
Advanced
ggombeeggombee
13

zustand-tanstack

Manage React local and server state with Zustand and TanStack Query.

Community
Intermediate
cdman28cdman28

frontend-developer

Build scalable frontend interfaces with reusable components, state management, and API integration.

Community
Advanced