skills.rest
allenlin90
allenlin90COMMUNITY
Explore all skills by this author →
GitHub

frontend-code-quality

Enforces frontend code quality standards for React applications via ESLint and naming conventions.

1|Updated Jan 2, 2025
Search Tags:#frontend#react#eslint#code-quality#coding-standards#lint#project-structure
One-click install
npx skills add https://github.com/allenlin90/eridu-services --skill frontend-code-quality-allenlin90
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-code-quality
Source: https://github.com/allenlin90/eridu-services/tree/main/.agent/skills/frontend-code-quality
Command: npx skills add https://github.com/allenlin90/eridu-services --skill frontend-code-quality-allenlin90

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures frontend code quality standards are consistently applied across React applications by defining shared linting rules, file structures, and naming conventions.

Core Features & Use Cases

  • Establishes linting rules (ESLint 9) with a shared configuration to prevent common anti-patterns.
  • Enforces consistent file organization, absolute imports, and naming conventions to improve maintainability and collaboration.
  • Use case: A large React codebase is aligned under a single quality standard across teams and packages.

Quick Start

Configure ESLint with the shared rule set and run pnpm lint to enforce frontend code quality across the project.

Frequently Asked Questions about frontend-code-quality

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

FAQPage Schema
How do I enforce React code quality standards across multiple teams?▼

To enforce React code quality across teams, you can apply a shared configuration that defines consistent linting rules, file structure organization, absolute imports, and naming conventions to improve maintainability and collaboration.

What's the best way to set up ESLint 9 for a large React codebase?▼

Setting up ESLint 9 for a large React codebase involves establishing a shared rule set to prevent common anti-patterns and aligning the project under a single quality standard across multiple packages and teams.

Can I organize React file structure and imports using a shared coding standard?▼

Yes, you can enforce consistent file organization and absolute imports using a shared coding standard. This standardizes component patterns across multiple packages to improve maintainability and collaboration.

Does this frontend coding standard apply to monorepos with multiple packages?▼

Yes, this frontend coding standard is designed for large React codebases and applies to linting setup, file structure organization, and component patterns across multiple packages and teams.

Why do I need shared linting rules and naming conventions in React projects?▼

Shared linting rules and naming conventions prevent common anti-patterns and ensure consistent code quality standards are applied across React applications, improving maintainability and collaboration.

How do I run lint checks after configuring the shared ESLint rules?▼

After configuring ESLint with the shared rule set, you run pnpm lint to enforce frontend code quality across the project.

Related Skills

Explore More Software Engineering Skills→
nrwlnrwl
27

link-workspace-packages

Link workspace packages across npm, yarn, pnpm, and bun monorepos.

Official
Intermediate
GolferGeekGolferGeek

Quality Gates

Run npm lint, format, test, and build before commits.

Community
Advanced
ValyntValynt

lint-and-format

Automate ESLint, Prettier, and type-checking across a TypeScript monorepo.

Official
Advanced
shwilliamsonshwilliamson

css-standards

Enforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.

Community
Basic