skills.rest
jhd3197
jhd3197COMMUNITY
Explore all skills by this author →
WebsiteGitHub

cachibot-frontend-view

Create React+TypeScript frontend views with routing, Zustand stores, and Tailwind styling.

18|2|Updated Feb 6, 2026
Search Tags:#typescript#frontend#react#routing#tailwind#zustand#ui-component
One-click install
npx skills add https://github.com/jhd3197/CachiBot --skill cachibot-frontend-view
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cachibot-frontend-view
Source: https://github.com/jhd3197/CachiBot/tree/main/.claude/skills/cachibot-frontend-view
Command: npx skills add https://github.com/jhd3197/CachiBot --skill cachibot-frontend-view

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear, repeatable workflow to add new frontend views and components to CachiBot's React+TypeScript UI so teams can ship consistent interfaces without breaking routing, state, or styling conventions.

Core Features & Use Cases

  • View scaffolding: step-by-step guidance to create a new view component, export it, and wire it into the views index.
  • Navigation & routing: instructions to add a sidebar navigation button and render the view in the MainLayout routing switch.
  • State & persistence: recommended Zustand store pattern with localStorage persistence and TypeScript types to maintain consistent client-side state.
  • Use Case: Add a dashboard, logs panel, or settings tab that integrates with existing BotView types, API client helpers, and the project's Tailwind dark-first styling.

Quick Start

Use the cachibot-frontend-view skill to add a new view component, export it from the views index, add the BotView union entry, add a navigation button in the BotSidebar, and render the view in MainLayout.

Frequently Asked Questions about cachibot-frontend-view

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

FAQPage Schema
How do I add a new view to a React and TypeScript frontend project?▼

To add a new view, create the component, export it from the views index, add a BotView union entry, add a sidebar navigation button, and render the view in the MainLayout routing switch using React Router v7.

How does state persistence work with Zustand in a TypeScript UI?▼

Zustand state persistence in a TypeScript UI uses a recommended store pattern with localStorage to maintain consistent client-side state, ensuring types are preserved across page reloads within the frontend codebase.

Does this workflow support React 19 and Tailwind dark-first styling?▼

Yes, the workflow satisfies requirements for React 19, TypeScript strict mode, and Tailwind dark-first styling, ensuring newly scaffolded UI components integrate with existing project conventions.

What is the best way to wire sidebar navigation for a new React page?▼

The best way to wire sidebar navigation is to add a navigation button in the BotSidebar component and connect the corresponding view in the MainLayout routing switch using React Router v7.

Can I use lucide-react icons when scaffolding frontend UI components?▼

Yes, you can use lucide-react icons when scaffolding frontend UI components, as the workflow is designed to satisfy the project's lucide-react icon requirements alongside Tailwind dark-first styling.

Related Skills

Explore More Software Engineering Skills→
lagarcesslagarcess
1

Frontend Patterns

Define standardized React and Next.js component patterns with TypeScript, Tailwind, and state management.

Community
Intermediate
jhd3197jhd3197
18

cachibot-full-stack-entity

Generate full-stack CRUD entities with SQLite, FastAPI, TypeScript, and Zustand.

Community
Advanced
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
george-popescugeorge-popescu

react

Define React 19 development conventions for components, hooks, state, routing, and testing.

Community
Advanced