skills.rest
iflytek
iflytekOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-conventions

Enforce React frontend coding conventions and Feature-Sliced Design patterns.

4.9k|780|Updated Mar 11, 2026
Search Tags:#state management#React#dependency management#TypeScript#coding conventions#internationalization#architecture patterns
One-click install
npx skills add https://github.com/iflytek/skillhub --skill frontend-conventions-iflytek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-conventions
Source: https://github.com/iflytek/skillhub/tree/main/.agents/skills/frontend-conventions
Command: npx skills add https://github.com/iflytek/skillhub --skill frontend-conventions-iflytek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of coding conventions, architecture patterns, and testing rules to ensure consistent and efficient development of the SkillHub React frontend.

Core Features & Use Cases

  • Feature-Sliced Design: Organizes code into pages, features, entities, and shared components for maintainability.
  • Data Fetching: Standardizes data fetching with TanStack Query and openapi-fetch.
  • State Management: Utilizes TanStack Query and Zustand for state management.
  • Component Composition: Encourages the use of Radix UI primitives and class variance authority for UI components.
  • API Type Generation: Generates API types from OpenAPI contracts for consistency.
  • Styling: Adheres to Tailwind CSS for styling and cn() utility for conditional class merging.
  • Internationalization: Supports i18next and react-i18next for translations.
  • Build & Development: Provides a suite of commands for development and production tasks.
  • Frontend Dependencies: Lists key dependencies like React, React Router, and Tailwind CSS.

Quick Start

To apply frontend conventions, follow the guidelines in the SKILL.md file and ensure your code adheres to the defined architecture and patterns.

Frequently Asked Questions about frontend-conventions

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

FAQPage Schema
What is Feature-Sliced Design in React and how does it organize code?▼

Feature-Sliced Design is an architecture pattern that organizes React code into pages, features, entities, and shared components to ensure maintainability and consistent frontend development.

How do I standardize data fetching and state management in a React app?▼

Standardize data fetching and state management by using TanStack Query for server state, openapi-fetch for requests, and Zustand for client state to ensure consistent React frontend conventions.

Can I generate API types from OpenAPI contracts for TypeScript?▼

Yes, you can generate API types directly from OpenAPI contracts. This ensures type consistency across your React components and standardizes data fetching with openapi-fetch.

What is the best way to manage conditional CSS classes with Tailwind CSS?▼

The best way to manage conditional CSS classes with Tailwind CSS is by using the cn() utility for conditional class merging alongside Radix UI primitives and class variance authority.

How do I add internationalization to a React application using i18next?▼

Add internationalization to a React application by integrating i18next and react-i18next for translations, adhering to standard frontend coding conventions for multilingual support.

Do I need TypeScript to use these React coding conventions?▼

Yes, TypeScript is required. Enforcing these React coding conventions, architecture patterns, and testing rules requires existing knowledge of TypeScript and related libraries.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
provectusprovectus
10

react-feature-sliced-design

Enforce Feature-Sliced Design architecture for React/TypeScript applications.

Official
Advanced
MileniumTickMileniumTick

frontend-react

Create scalable React frontends with TanStack, Tailwind, and Eden API client.

Community
Advanced
sametozkalesametozkale

redux

Connect json-render's StateStore interface to Redux stores for React applications.

Community
Basic