error-handling: Implement consistent error handling across the application. Use when adding try-catch blocks, error boundaries, or custom error classes.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: error-handling description: Implement consistent error handling across the application. Use when adding try-catch blocks, error boundaries, or custom error classes.
Error Handling Skill
Purpose
Ensure consistent, informative error handling.
Backend Error Handling
Reference: patterns/backend-errors.md
Custom Error Classes
// templates/error-class.ts
export class AppError extends Error {
constructor(
public code: string,
message: string,
public statusCode: number = 500,
public details?: unknown
) {
super(message);
this.name = 'AppError';
}
}
export class ValidationError extends AppError {
constructor(message: string, details?: unknown) {
super('VALIDATION_ERROR', message, 400, details);
}
}
export class NotFoundError extends AppError {
constructor(resource: string) {
super('NOT_FOUND', `${resource} not found`, 404);
}
}
Error Handler Middleware
function errorHandler(err, req, res, next) {
logger.error(err);
if (err instanceof AppError) {
return res.status(err.statusCode).json({
error: {
code: err.code,
message: err.message,
details: err.details
}
});
}
return res.status(500).json({
error: {
code: 'INTERNAL_ERROR',
message: 'An unexpected error occurred'
}
});
}
Frontend Error Handling
Reference: patterns/frontend-errors.md
Error Boundaries
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) {
logError(error, info);
}
render() {
if (this.state.hasError) {
return <ErrorFallback onReset={() => this.setState({ hasError: false })} />;
}
return this.props.children;
}
}
Async Error Handling
async function fetchWithError<T>(url: string): Promise<T> {
const response = await fetch(url);
if (!response.ok) {
const error = await response.json();
throw new ApiError(error.code, error.message);
}
return response.json();
}
Logging Guidelines
| Level | Use For |
|---|---|
| error | Exceptions, failures |
| warn | Recoverable issues |
| info | Important events |
| debug | Development info |
More by vneseyoungster
View allYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Topic Analysis Skill: Deep analysis of abstract topics, concepts, or technologies through multi-agent research and brainstorming. Produces comprehensive documentation with Mermaid diagrams, converted to a styled standalone HTML report.
Extract design assets and metadata from Figma using the Figma REST API. Supports exporting frames/components as images, extracting node metadata, design tokens, and file structure. Use with ai-multimodal skill for comprehensive UI research.
Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files (transcription with timestamps, summarization, speech understanding, music/sound analysis up to 9.5 hours), understand images (captioning, object detection, OCR, visual Q&A, segmentation), process videos (scene detection, Q&A, temporal analysis, YouTube URLs, up to 6 hours), extract from documents (PDF tables, forms, charts, diagrams, multi-page), generate images (text-to-image, editing, composition, refinement). Use when working with audio/video files, analyzing images or screenshots, processing PDF documents, extracting structured data from media, creating images from text prompts, or implementing multimodal AI features. Supports multiple models (Gemini 2.5/2.0) with context windows up to 2M tokens.
