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

Ready to run

npx skills add https://github.com/Donnadieu/continuum --skill frontend-donnadieu

💬 Prompt for ChatGPT / Claude Chat▼

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.