---
name: jnzader/frontend-layer
source: https://app.decimal.ai/s/jnzader-frontend-layer@1/SKILL.md
source_sha256: c431ef5a6cc7
---

<!-- L1:START -->
# frontend-layer

This skill covers the frontend layer of the application, focusing on UI components and interactions.

**Trigger**: When working in frontend/ — adding, modifying, or debugging UI components and interactions.
<!-- L1:END -->

<!-- L2:START -->
## Quick Reference

| Task               | Pattern                          |
|--------------------|----------------------------------|
| Create a new component | `export const NewComponent = () => { ... }` |

## Critical Patterns (Summary)
- **Component Structure**: Each component should be a functional component returning JSX.
- **Error Handling**: Use ErrorBoundary to catch and display errors gracefully.
<!-- L2:END -->

<!-- L3:START -->
## Critical Patterns (Detailed)

### Component Structure

Each component should be a functional component returning JSX.

```typescript
// apps/web/src/components/NewComponent.tsx
export const NewComponent = () => {
  return <div>New Component</div>;
};
```

### Error Handling

Use ErrorBoundary to catch and display errors gracefully.

```typescript
// apps/web/src/components/ErrorBoundary.tsx
import React from 'react';

export class ErrorBoundary extends React.Component {
  // Error handling logic
}
```

## When to Use

- When creating reusable UI components.
- When implementing error handling for user interactions.

## Commands

```bash
npm run start
npm run build
```

## Anti-Patterns

### Don't: Modify shared state directly

Directly modifying shared state can lead to unpredictable UI behavior.

```typescript
// BAD
state.sharedValue = newValue; // This breaks the state management
```
<!-- L3:END -->