Frontend Development

Provides architectural guidance for authenticated Vite and React dashboard interfaces.

11|2|Updated Dec 25, 2025

Search Tags:#frontend #react #dashboard #vite #spa #docklift

Ready to run

npx skills add https://github.com/SSujitX/docklift --skill frontend-development-ssujitx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Frontend Development
Source: https://github.com/SSujitX/docklift/tree/main/.agent/skills/frontend_development
Command: npx skills add https://github.com/SSujitX/docklift --skill frontend-development-ssujitx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured reference for maintaining and extending the Docklift dashboard, ensuring consistent UI patterns and API integration across the Vite + React application.

Core Features & Use Cases

UI Component Standards: Provides clear guidelines on the AppShell, navigation, and shared components like log viewers and terminal views.
API Integration Patterns: Defines the correct usage of authenticated fetch calls, stream processing, and state management for project deployments.
Use Case: When adding a new page to the dashboard, use this guide to ensure the route is correctly registered in the router, the layout adheres to the AppShell constraints, and API calls follow the established security and error-handling protocols.

Quick Start

Use the Frontend Development skill to retrieve the standard implementation pattern for adding a new authenticated route and sidebar navigation item to the dashboard.

Frequently Asked Questions about Frontend Development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add a new authenticated route and sidebar item to a Vite and React dashboard?▼

To add an authenticated route to a Vite and React dashboard, register the route in the router, apply the AppShell layout constraints, and follow established secure API fetching patterns for the new page.

What is the standard pattern for authenticated API integration in a React SPA?▼

The standard pattern for authenticated API integration in a React SPA involves using authenticated fetch calls, stream processing, and consistent state management to ensure secure data fetching and error handling.

How do I maintain consistent UI components across a React dashboard application?▼

Maintain consistent UI components in a React dashboard by adhering to AppShell constraints and using shared component guidelines for elements like log viewers and terminal views.

Does this frontend development guide cover state management and stream processing?▼

Yes, this frontend development guide establishes patterns for state management and stream processing to ensure secure data fetching and consistent API interactions within the application.

What's the best way to structure navigation in a Vite and React dashboard?▼

The best way to structure navigation in a Vite and React dashboard is to follow the AppShell constraints and register new sidebar navigation items alongside correctly configured routes.

Why do my React dashboard API calls fail to follow consistent security protocols?▼

React dashboard API calls may lack consistency if they do not follow established security and error-handling protocols defined for authenticated fetch calls and stream processing.