skills.rest
ebongard
ebongardCOMMUNITY
Explore all skills by this author →
GitHub

add-frontend-page

Add standardized React pages with routes, navigation, dark-mode styling, i18n keys, and WebSocket hooks.

34|5|Updated Jan 15, 2026
Search Tags:#frontend#react#routing#i18n#tailwind#websocket#dark-mode
One-click install
npx skills add https://github.com/ebongard/renfield --skill add-frontend-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-frontend-page
Source: https://github.com/ebongard/renfield/tree/main/.claude/skills/add-frontend-page
Command: npx skills add https://github.com/ebongard/renfield --skill add-frontend-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide removes uncertainty and repetitive setup when adding new frontend pages to Renfield by enforcing project conventions for routing, navigation, styling, translations, and WebSocket connectivity so pages are consistent and production-ready.

Core Features & Use Cases

  • Routing & Navigation: Shows how to register a new route in App.jsx and add the page to the main navigation in Layout.jsx so users can reach the feature.
  • Dark Mode Styling: Enforces Tailwind dark: variants and reusable component classes (.card, .input, .btn-primary) to ensure components look correct in both light and dark themes.
  • Internationalization (i18n): Requires using react-i18next for all user-facing text and adding translation keys to both en.json and de.json to support the household's primary German locale and English.
  • WebSocket Integration: Documents the frontend WebSocket endpoints and message patterns for chat, device, and satellite connections so interactive features integrate reliably.

Quick Start

Create a new React page component, register its route in App.jsx, add a navigation entry in Layout.jsx, add translation keys to both en.json and de.json, and follow dark-mode classes and WebSocket references.

Frequently Asked Questions about add-frontend-page

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

FAQPage Schema
How do I add a new React page with routing and navigation to an existing project?▼

To add a React page, you create a new page component, register its route in App.jsx, and add a corresponding navigation entry in Layout.jsx so users can access the feature.

How do I configure dark mode styling using Tailwind in a React application?▼

Configure dark mode styling by applying Tailwind dark: variants alongside reusable component classes like .card, .input, and .btn-primary to ensure components render correctly in both light and dark themes.

How do I add internationalization translations for multiple locales using react-i18next?▼

Add internationalization support by using react-i18next for all user-facing text and inserting the corresponding translation keys into both the en.json and de.json locale files.

Can I use WebSocket hooks for real-time chat and device connections in my React frontend?▼

Yes, you can integrate WebSocket hooks by following documented frontend WebSocket endpoints and message patterns designed for chat, device, and satellite connections to ensure reliable interactive features.

What do I need to set up before adding i18n-ready frontend pages to my React app?▼

Before adding i18n-ready frontend pages, you need a React environment configured with Tailwind for styling, react-i18next for translations, and established routing and WebSocket connection protocols.

Why are my React frontend pages not displaying correctly in dark mode?▼

Dark mode display issues occur when pages fail to adhere to Tailwind dark: variants and lack reusable component classes, which are required to ensure components look correct in both light and dark themes.

Related Skills

Explore More Software Engineering Skills→
Peo051Peo051

GREENBITE_AI_LANDING_PAGE_SKILL

Build and deploy a GreenBite AI landing page with React, Vite, and Tailwind CSS.

Community
Intermediate
victorhramos-devvictorhramos-dev

ais-api-rest

Automate REST API endpoints and WebSocket events for AIS data in Laravel.

Community
Advanced
ACHVMRACHVMR

smelteros-ui-patterns

Provide reusable UI patterns and templates for SmelterOS frontend development.

Official
Intermediate
seb1nseb1n
147

Frontend Design

Generate responsive HTML, CSS, and React, Vue, or Svelte components with WCAG accessibility and dark mode.

Community
Advanced