skills.rest
Sanssin
SanssinCOMMUNITY
Explore all skills by this author →
GitHub

inite-component

Create and modify React components with Bootstrap 5 and react-i18next.

Updated Dec 14, 2024
Search Tags:#frontend#react#routing#css#component#bootstrap#i18next
One-click install
npx skills add https://github.com/Sanssin/Inite --skill inite-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: inite-component
Source: https://github.com/Sanssin/Inite/tree/main/docs/skills/inite-component
Command: npx skills add https://github.com/Sanssin/Inite --skill inite-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures React components in the INITE project follow a consistent structure, styling, translation, and lifecycle handling so simulations and UI parts integrate predictably and are maintainable.

Core Features & Use Cases

  • Component pattern: Functional components with hooks, mandatory cleanup in useEffect for intervals/listeners/RAF, and default export conventions.
  • Styling & i18n: Enforce Bootstrap 5 usage, react-i18next for all UI text, and separate kebab-case CSS files per component.
  • Simulation support: Provide a SimulationFrame iframe wrapper pattern for standalone HTML5 simulations and a SimulationList pattern for registering and linking simulations.
  • Developer checklist: Route registration in App.js, translation key additions, and a quick checklist for producing production-ready components.

Quick Start

Create a new functional React component that uses useTranslation from react-i18next, places styles in a separate kebab-case CSS file, includes useEffect cleanup for timers or RAF, exports default, and add its route to App.js.

Frequently Asked Questions about inite-component

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

FAQPage Schema
How do I standardize React components for consistent UI and simulation integration?▼

Standardize React components by enforcing functional components with hooks, Bootstrap 5 styling, react-i18next translation keys, separate kebab-case CSS files, default exports, and useEffect cleanup for intervals and RAF.

How do I wrap standalone HTML5 simulations in a React application?▼

Wrap standalone HTML5 simulations using the SimulationFrame iframe wrapper pattern to ensure predictable integration within your React UI while maintaining consistent component lifecycle handling.

Do I need to register new React component routes in App.js?▼

Yes, new React components require route registration in App.js. The developer checklist also mandates adding react-i18next translation keys and verifying useEffect cleanup before production deployment.

Why does my React component leak memory with intervals and requestAnimationFrame?▼

React components leak memory when useEffect lacks proper cleanup for intervals, event listeners, or requestAnimationFrame. You must enforce effect cleanup to ensure maintainable simulation integration.

What is the best way to manage CSS and translations in a React frontend project?▼

Manage CSS and translations by placing styles in separate kebab-case CSS files per component and utilizing react-i18next for all UI text to ensure consistent application structure.

Can I use Bootstrap 5 with react-i18next for building simulation pages?▼

Yes, you can use Bootstrap 5 with react-i18next to build simulation pages. Enforcing Bootstrap 5 styling alongside translation keys ensures predictable UI integration and maintainable auxiliary components.

Related Skills

Explore More Software Engineering Skills→
emaginebremaginebr
1

frontend-design

Generate React 18 frontend components with react-bootstrap and i18next.

Official
Intermediate
avgarciaavgarcia

frontend-feature-dev

Scaffold Angular frontend features with standalone components, Signals, lazy loading, and Jest tests.

Community
Advanced
Vishnugupta2711Vishnugupta2711
1

shadcn-ui

Guide developers to integrate and customize shadcn/ui components in React projects.

Community
Advanced
endorphin-aiendorphin-ai
3

frontend-mean

Develop React frontends for MEAN stack applications with Vite and Tailwind CSS.

Official
Intermediate