skills.rest
redis
redisOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend

Standardize React and Redux frontend patterns for RedisInsight UI components.

8.7k|482|Updated Jul 30, 2021
Search Tags:#typescript#theming#react#styled-components#redux#component-structure#ui-migration
One-click install
npx skills add https://github.com/redis/RedisInsight --skill frontend-redis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/redis/RedisInsight/tree/main/.ai/skills/frontend
Command: npx skills add https://github.com/redis/RedisInsight --skill frontend-redis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent, fragile frontend implementations by standardizing React component structure, styled-components usage, and Redux patterns for RedisInsight’s UI codebase.

Core Features & Use Cases

  • Component and folder conventions: Enforces a predictable per-component directory layout (components, hooks, utils, styles, tests) to keep code navigable as the app grows.
  • Styled-components best practices: Requires dedicated PascalCase .styles.ts files, semantic theme usage, layout-component-first styling, transient prop conventions, and avoids !important.
  • React and Redux implementation guidance: Promotes safe React performance practices (memoization, stable keys, effect cleanup), and consistent Redux Toolkit patterns (slices, thunks, selectors with reselect).
  • UI component and icon migration rules: Guides developers to use internal UI wrappers (uiSrc/components/ui) and Redis UI icons rather than Elastic UI or custom SVGs.

Quick Start

Follow the React/Redux frontend conventions in the frontend skill when editing a component under redisinsight/ui to ensure it uses styled-components, layout components, correct theme colors, and the recommended Redux Toolkit patterns.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I standardize React component folder structure to prevent maintainability regressions?▼

To standardize React component folder structure, enforce a predictable per-component directory layout containing components, hooks, utils, styles, and tests. This organization keeps code navigable and reduces fragile implementations as your application scales.

What are the best practices for using styled-components with React and semantic themes?▼

Styled-components best practices require dedicated PascalCase `.styles.ts` files, semantic theme usage, layout-component-first styling, and transient prop conventions. You should also avoid using `!important` to maintain style consistency.

How do I implement Redux Toolkit patterns consistently in a React application?▼

To implement Redux Toolkit patterns consistently, use slices, thunks, and selectors with reselect. This approach ensures safe React performance practices including memoization, stable keys, and effect cleanup for functional components with hooks.

Can I use custom SVGs or external UI libraries instead of internal UI wrappers?▼

You cannot use custom SVGs or external UI libraries like Elastic UI. UI component and icon migration rules require using internal `uiSrc/components/ui` wrappers and the Redis UI icon registry to ensure visual consistency.

Why does my React UI migration cause inconsistent styling across components?▼

React UI migration causes inconsistent styling when not applying Redis theme semantics and styled-components conventions. Standardizing on internal UI wrappers and dedicated PascalCase style files prevents these UI inconsistencies.

Related Skills

Explore More Software Engineering Skills→
karchthokarchtho

react-patterns

Guide React developers in applying modern component, hooks, and state management patterns.

Community
Advanced
jiaiyanjiaiyan
8

n-icon

Display and customize SVG icons with size, color, and depth in Vue/Nuive UI projects.

Community
Intermediate
guichefferguicheffer
3

styled-components-patterns

Implement styled-components v5.3.5 patterns with theme integration and TypeScript prop typing.

Community
Intermediate
Tasty-Maker-StudioTasty-Maker-Studio

component-patterns

Define React component structures, Ark UI wrappers, and TypeScript variant types.

Official
Intermediate