# Frontend Layer

> This layer manages the user interface and user experience of the application. Trigger: When working in frontend/ — adding, modifying, or debugging UI components and interactions.

- Skill: `jnzader/frontend-layer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jnzader/frontend-layer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jnzader/frontend-layer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: JNZader (https://skillmd.com/u/jnzader)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jnzader/frontend-layer

---


<!-- 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 -->