What does this skill help with?

It provides the specific architectural patterns and code locations needed to add or modify top-level views and panels in the mkbrowser application.

Does this skill follow a specific React pattern?

Yes, it follows a centralized state management pattern where tab buttons update a global currentView state to toggle between components like Browse, Search, and Settings.

Where should new page components be located?

Following the pattern, secondary page components should be located in the src/components/ directory, similar to the SearchResultsView.tsx implementation.

Where are application page names defined?

Page names are centrally managed in the src/store/types.ts file under the AppView type definition.

How is navigation handled between different pages?

Navigation is managed by updating the currentView in the global AppState using the setCurrentView function, which triggers a re-render of the panel.

App Page Architecture

Name: App Page Architecture
Author: Clay-Ferguson

byClay-Ferguson

0•

Herramientas para Desarrolladores

Standardizes the creation, navigation, and state management of top-level application panels within the mkbrowser environment.

This skill provides a structured pattern for managing high-level views and panels in Electron-based applications. It guides the implementation of navigation tabs, global state updates for view switching, and standardized component placement. By following these architectural patterns, users can ensure UI consistency when adding new functional areas like search results or settings panels to the mkbrowser application.

Características Principales

01Coordinates tab-based navigation logic

02Manages global state for page navigation

030 GitHub stars

04Ensures consistent React state updates for view switching

05Provides location guidance for component placement

06Defines standardized application view patterns

Casos de Uso

01Refactoring existing UI panels to follow the established tab-navigation pattern

02Adding a new functional panel like 'Analytics' or 'History' to the application

03Implementing state-driven view switching for dynamic UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add clay-ferguson/mkbrowser pages

For use in Claude.ai and ChatGPT

Download Skill