skills.rest
Donnadieu
DonnadieuCOMMUNITY
Explore all skills by this author →
Website𝕏@OverviewEffect6GitHub

frontend

Enforce React and TypeScript UI patterns for the Continuum platform.

2|3|Updated Jan 3, 2026
Search Tags:#typescript#frontend#react#shadcn/ui#tailwind css#ui development
One-click install
npx skills add https://github.com/Donnadieu/continuum --skill frontend-donnadieu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/Donnadieu/continuum/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/Donnadieu/continuum --skill frontend-donnadieu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines React/TypeScript UI development by providing pre-defined patterns, component structures, and styling guidelines specific to the Continuum platform.

Core Features & Use Cases

  • Pattern Enforcement: Ensures consistency in styling, data fetching, and component architecture.
  • Accelerated Development: Reduces boilerplate and decision-making for common UI tasks.
  • Use Case: When building a new feature that requires a data table with sorting and filtering, invoke this skill to get guidance on the correct React Query setup, component structure, and styling using Tailwind CSS and shadcn/ui.

Quick Start

Use the frontend skill to create a new React component for displaying user profiles.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I structure a React component with Tailwind CSS and shadcn/ui?▼

Structure React components using predefined patterns that enforce Tailwind CSS and shadcn/ui styling guidelines. This ensures consistency in architecture and reduces boilerplate for new UI features.

What is the best way to set up React Query for data fetching in TypeScript?▼

Set up React Query by following project-specific patterns for data fetching. This provides the correct TypeScript integration and component structure needed to execute queries efficiently.

Does this approach support Supabase integration for TypeScript apps?▼

Yes, Supabase integration is supported within the TypeScript UI development workflow. It provides predefined patterns to connect frontend components directly to your Supabase backend.

How do I create a data table with sorting and filtering in React?▼

Create a data table by applying enforced component structures alongside React Query for data management. Tailwind CSS and shadcn/ui handle the styling for sorting and filtering interfaces.

Can I use Vitest for testing React components built with Tailwind CSS?▼

Yes, Vitest is supported for testing React components. The patterns ensure your Tailwind CSS styled components are structured correctly to integrate with Vitest testing workflows.

Why enforce specific UI patterns for React and TypeScript development?▼

Enforcing specific UI patterns accelerates development by reducing decision-making and boilerplate. It maintains architectural consistency across styling, data fetching, and component creation.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
kibertoadkibertoad
1

add-api-query

Automate data fetching and mutation with API contracts, typed HTTP client, and React Query.

Community
Intermediate
thehivegroup-aithehivegroup-ai

angular-tailwind-standards

Integrate Tailwind CSS with Angular components using CSS-first styling.

Official
Intermediate