skills.rest
weihung0831
weihung0831COMMUNITY
Explore all skills by this author →
GitHub

ck:frontend-development

Guide React/TypeScript frontend development with modern architectural patterns.

Updated Aug 23, 2026
Search Tags:#typescript#development#best practices#performance#frontend#react
One-click install
npx skills add https://github.com/weihung0831/claudekit --skill ck-frontend-development-weihung0831
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-development
Source: https://github.com/weihung0831/claudekit/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/weihung0831/claudekit --skill ck-frontend-development-weihung0831

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines and patterns for building robust, performant, and maintainable React applications using modern best practices.

Core Features & Use Cases

  • Component Development: Create new components following established patterns for type safety and reusability.
  • Data Fetching: Implement data fetching using useSuspenseQuery for seamless integration with Suspense.
  • File Organization: Structure your project logically with features/ and components/ directories.
  • Use Case: When starting a new feature, use this Skill to set up the correct directory structure, API service, hooks, and components, ensuring consistency from the outset.

Quick Start

Create a new React component for user profile display following the React.FC pattern.

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 a new React feature with TypeScript for maintainability?▼

Structure React features by organizing projects logically into `features/` and `components/` directories. This ensures modularity and consistency from the outset when setting up directory structures, API services, and hooks.

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

The best way to fetch data with Suspense is implementing `useSuspenseQuery` from TanStack Query. This approach provides seamless integration with React Suspense boundaries for robust data fetching.

How do I set up Vite import aliases for React component modularity?▼

Set up Vite import aliases to enforce modularity across your React project. This Skill guides utilizing these aliases to maintain clean imports and logical file organization within `features/` and `components/` directories.

Does this React development pattern enforce strict TypeScript standards?▼

Yes, this React development pattern enforces strict TypeScript standards. It guides component creation using the `React.FC` pattern to ensure type safety and reusability across your application.

When should I use TanStack Query instead of standard useEffect for data fetching?▼

Use TanStack Query over standard `useEffect` when you need seamless Suspense integration. Implement data fetching with `useSuspenseQuery` for modern architectural patterns and performance optimization.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
4

vite-syntax-resolve-css

Configure Vite resolve and CSS options to prevent import misconfigurations.

Official
Intermediate
petrkindlmannpetrkindlmann
64

cypress-automation

Automate end-to-end and component testing with Cypress for TypeScript frontend applications.

Community
Advanced
locdinh209locdinh209

frontend-dev-guidelines

Guide React/TypeScript frontend development with Suspense, lazy loading, and TanStack Query.

Community
Advanced
imrim12imrim12

pinia

Manage Vue application state with Pinia stores, getters, and actions.

Community
Intermediate