# frontend-development

> Guidelines for building React UIs with TypeScript and TailwindCSS

- Author: Sajeel Ahmad
- Repository: Cjbuilds/Sheldon
- Version: 20260126231347
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/Cjbuilds/Sheldon
- Web: https://mule.run/skillshub/@@Cjbuilds/Sheldon~frontend-development:20260126231347

---

---
name: frontend-development
description: Guidelines for building React UIs with TypeScript and TailwindCSS
requires_context:
  - context/ui-design.md
  - context/api-design.md
---

# Frontend Development Skill

## Guidelines

- Use functional React components with hooks
- Type all props and state with TypeScript interfaces
- Use TailwindCSS utility classes for styling
- Handle loading, error, and empty states in data-fetching components
- Use fetch API with async/await for HTTP calls
- Keep components focused on a single responsibility

## Patterns

### Data Fetching

Use useEffect with async functions for data fetching. Track loading and error states. Provide retry capability on errors.

### Forms

Use controlled inputs with useState. Validate before submission. Display inline validation messages below fields.

### Component Organization

One component per file. Group by feature or page. Shared components go in a `components/` folder.

### State Management

Use React useState and useEffect for local state. Lift state to the nearest common parent when shared. No external state library needed for this project size.

### File Structure

```
client/
  src/
    components/
      ProjectCard.tsx
      TaskItem.tsx
      TaskForm.tsx
      TaskFilters.tsx
    pages/
      ProjectListPage.tsx
      ProjectDetailPage.tsx
    api/
      client.ts
    types/
      index.ts
    App.tsx
    main.tsx
```