skills.rest
Kwondongkyun
KwondongkyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-fundamentals

Enforce readability, predictability, cohesion, and low coupling in React and Next.js components.

Updated Aug 23, 2026
Search Tags:#refactoring#frontend#react#readability#coupling#cohesion#predictability
One-click install
npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-fundamentals-kwondongkyun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-fundamentals
Source: https://github.com/Kwondongkyun/claude-code-settings/tree/main/skills/frontend-fundamentals
Command: npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-fundamentals-kwondongkyun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Good frontend code is hard to maintain when readability is poor, behavior is unclear, and structure is inconsistent. This Skill guides teams to write or refactor React/Next.js components by enforcing four design principles: readability, predictability, cohesion, and coupling.

Core Features & Use Cases

  • Enforces four core principles to steer frontend architecture and refactoring decisions.
  • Provides concrete rules for naming, early returns, and separation of concerns to reduce complexity.
  • Includes practical patterns and examples to apply during daily development and code reviews.

Quick Start

Refactor a component to prioritize readability, predictable behavior, cohesive modules, and minimal coupling.

Frequently Asked Questions about frontend-fundamentals

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

FAQPage Schema
How do I refactor React components to improve readability and predictability?▼

Refactoring React components for readability and predictability involves enforcing naming conventions, early returns, and separation of concerns to reduce complexity and make behavior clear.

What's the best way to organize React and Next.js component folders for low coupling?▼

Organizing React and Next.js component folders for low coupling requires applying cohesion principles, ensuring modules focus on a single concern while minimizing dependencies between separate components.

What are the core principles for writing clean React frontend code?▼

Core principles for writing clean React frontend code include enforcing readability, predictability, cohesion, and low coupling to guide architecture decisions and simplify daily development.

Can I use these frontend refactoring rules during code reviews?▼

Yes, these frontend refactoring rules are designed to be applied during code reviews, providing concrete patterns and examples to evaluate naming, conditional rendering, and separation of concerns.

When should I use early returns in React conditional rendering?▼

Early returns in React conditional rendering should be used to reduce complexity and improve readability by handling edge cases first, making the main component logic easier to follow.

Why does my Next.js component structure feel hard to maintain?▼

Next.js component structure feels hard to maintain when readability is poor, behavior is unclear, and structure is inconsistent, requiring refactoring toward cohesion and minimal coupling.

Related Skills

Explore More Software Engineering Skills→
marduk191marduk191
9

vercel-react-best-practices

Apply React and Next.js performance best practices during implementation and code reviews.

Community
Advanced
Moisesjr20Moisesjr20
1

react-best-practices

Validate TSX components against React best practices and output a prioritized checklist.

Community
Advanced
Camilo8902Camilo8902

repo-structure-linter

Validate repository structure and naming conventions for Next.js, NestJS, Python, and React.

Community
Intermediate
p-iknowp-iknow
1

frontend-code-quality

Apply Toss Frontend Fundamentals to refactor React/TypeScript components.

Community
Intermediate