ck:frontend-development

Guide React/TypeScript frontend development with Suspense and TanStack Router.

Updated Jan 11, 2026
One-click install
npx skills add https://github.com/felix-howard/ella --skill ck-frontend-development-felix-howard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/felix-howard/ella/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/felix-howard/ella --skill ck-frontend-development-felix-howard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and set of patterns to build robust, performant, and maintainable React/TypeScript frontends using modern best practices.

Core Features & Use Cases

  • Component Development: Guidelines for creating new React components with TypeScript, lazy loading, and Suspense.
  • Data Fetching: Standardized patterns for fetching data using useSuspenseQuery and TanStack Router.
  • File Organization: Best practices for structuring feature and component directories.
  • Use Case: When starting a new feature, follow the checklist to ensure components are lazy-loaded, data is fetched with Suspense, and the code is organized correctly within the features/ directory.

Quick Start

Use the frontend development skill to create a new React component following the outlined best practices.

Frequently Asked Questions about ck:frontend-development

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

FAQPage Schema
How do I structure React components with TypeScript and lazy loading?▼

To structure React components with TypeScript and lazy loading, follow structured file organization best practices by placing components within a `features/` directory. This enforces lazy loading and TypeScript best practices for maintainable frontends.

What is the best way to fetch data in React using Suspense?▼

The best way to fetch data in React using Suspense is to implement standardized patterns with `useSuspenseQuery` and TanStack Router integration. This approach handles asynchronous states declaratively while optimizing frontend performance.

How do I optimize React frontend performance with TypeScript?▼

You optimize React frontend performance with TypeScript by applying performance optimization techniques, utilizing Suspense-based data fetching, and enforcing lazy loading for new components. Structured file organization also maintains long-term performance.

Does this frontend development pattern integrate TanStack Router with useSuspenseQuery?▼

Yes, this frontend development pattern integrates TanStack Router with `useSuspenseQuery` for data fetching. It provides standardized patterns to fetch data declaratively, ensuring robust and performant React/TypeScript frontends.

When do I need to use Suspense-based data fetching in React?▼

You need to use Suspense-based data fetching in React when building modern frontends that require robust asynchronous state management. It simplifies data loading flows by declaratively handling loading states within your component tree.