frontend-components

Generate React 19 dashboard components with SWR data fetching and shadcn/ui styling.

Updated Aug 23, 2026

Search Tags:#Recharts #React #frontend #Next.js #dashboard #shadcn/ui #SWR

One-click install

npx skills add https://github.com/TheKeithStewart/claude-workflows --skill frontend-components-thekeithstewart

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: frontend-components
Source: https://github.com/TheKeithStewart/claude-workflows/tree/main/example-orchestrator-workflow/.claude/skills/frontend-components
Command: npx skills add https://github.com/TheKeithStewart/claude-workflows --skill frontend-components-thekeithstewart

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the development of React 19, Next.js 15, and shadcn/ui frontend components, ensuring consistency and adherence to project standards. It eliminates guesswork in data fetching, charting, and styling, allowing you to focus on features.

Core Features & Use Cases

Standardized Component Creation: Generate new dashboard components with pre-configured state, SWR data fetching, and robust error handling.
Recharts & Tailwind Integration: Implement complex data visualizations and consistent styling effortlessly using project-specific patterns.
UI Patterns & Best Practices: Access guidelines for dialogs, state management, TypeScript, and common UI elements like loading skeletons and error alerts.
Use Case: Rapidly develop a new sentiment trend chart for the dashboard, complete with SWR data fetching, Recharts visualization, and adherence to the project's sentiment color scheme and styling.

Quick Start

Create a new React component for a "User Activity Feed" in the app/ directory, ensuring it uses SWR for data fetching and shadcn/ui for its card layout.