skills.rest
emaginebr
emaginebrOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

1|Updated Apr 7, 2025
Search Tags:#web development#frontend#react#component generation#ui design#bootstrap
One-click install
npx skills add https://github.com/emaginebr/MonexUp --skill frontend-design-emaginebr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/emaginebr/MonexUp/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/emaginebr/MonexUp --skill frontend-design-emaginebr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of visually appealing and functional frontend interfaces for the MonexUp React application, ensuring consistency with the project's established design system and tech stack.

Core Features & Use Cases

  • Component Generation: Creates React components and pages adhering to project standards.
  • UI Pattern Implementation: Applies predefined patterns for forms, tables, and page layouts.
  • Internationalization: Integrates i18next for multi-language support.
  • Loading States: Implements react-loading-skeleton for a smooth user experience.
  • Use Case: Generate a new user profile editing page using react-bootstrap and FontAwesomeIcon for all interactive elements, ensuring all text is translatable via i18next.

Quick Start

Create a new React page for editing user profiles, following the established page structure and form patterns.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate React components that avoid generic AI aesthetics?▼

To generate React components avoiding generic AI aesthetics, this Skill produces distinctive, production-grade frontend interfaces using React 18, react-bootstrap 5, and Material-UI 6 for polished, creative code.

Can I use Bootstrap 5 and FontAwesome together in a React UI design?▼

Yes, you can use Bootstrap 5 and FontAwesome together in React UI design. The Skill strictly adheres to react-bootstrap 5, Bootstrap 5, and FontAwesome for all interactive elements.

How do I add internationalization to a React frontend application?▼

Add internationalization to a React frontend application by integrating i18next. This Skill ensures all text within generated web components and pages is fully translatable for multi-language support.

What's the best way to implement loading states in React web components?▼

Implement loading states in React web components using react-loading-skeleton. This Skill integrates it to provide a smooth user experience during data fetching operations.

Does this React component generation support react-router-dom v6?▼

Yes, this React component generation supports react-router-dom v6. It adheres strictly to react-router-dom v6 alongside React 18 for building compliant web pages and applications.

How do I create a React page for editing user profiles with predefined UI patterns?▼

Create a React page for editing user profiles with predefined UI patterns by specifying the page structure and form patterns. This Skill generates the page using react-bootstrap and FontAwesome for interactive elements.

Related Skills

Explore More Design & Creative Skills→
zenbuappszenbuapps

aibdd.auto.ts.it.starter

Initialize a React integration test scaffold with Vitest, React Testing Library, and MSW.

Official
Intermediate
zenbuappszenbuapps

react-router-v6

Document react-router-dom v6 APIs and v6-to-v7 migration guidance.

Official
Advanced
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate
deangilmoreremixdeangilmoreremix

frontend-design

Generate production-grade frontend interfaces with a unique aesthetic direction.

Community
Advanced