skills.rest
p-iknow
p-iknowCOMMUNITY
Explore all skills by this author →
Website𝕏@p__stackGitHub

frontend-code-quality

Apply Toss Frontend Fundamentals to refactor React/TypeScript components.

1|Updated Feb 15, 2026
Search Tags:#typescript#frontend#react#readability#code-quality#coupling#cohesion
One-click install
npx skills add https://github.com/p-iknow/fullstack-forge --skill frontend-code-quality-p-iknow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-code-quality
Source: https://github.com/p-iknow/fullstack-forge/tree/main/.claude/skills/frontend-code-quality
Command: npx skills add https://github.com/p-iknow/fullstack-forge --skill frontend-code-quality-p-iknow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Apply Toss Frontend Fundamentals to improve the quality of React/TypeScript code by focusing on readability, predictability, cohesion, and coupling.

Core Features & Use Cases

  • Guidelines for evaluating readability of components and hooks.
  • Predictability rules to avoid hidden side effects and ensure consistent return types.
  • Cohesion and coupling principles to structure domain-based components and minimize props drilling.
  • Reference materials and before/after examples to guide incremental improvements.

Quick Start

Review a React/TypeScript component and apply the four principles to guide refactoring.

Frequently Asked Questions about frontend-code-quality

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

FAQPage Schema
What makes React and TypeScript code readable and maintainable?▼

Predictability in React components avoids hidden side effects and ensures consistent return types. Following structured principles during code reviews helps catch unpredictable behaviors early and guides incremental refactoring.

How do I refactor React components to reduce coupling and improve cohesion?▼

Reduce coupling and improve cohesion by structuring domain-based React components. This minimizes props drilling and organizes related logic together, making the frontend codebase significantly easier to maintain.

How do I review React component readability and predictability?▼

Apply Toss Frontend Fundamentals to evaluate React and TypeScript components against readability and predictability rules. This provides concrete references to identify code smells and guide structured refactoring.

Can I use these code quality rules for existing TypeScript projects?▼

These code quality rules suit existing TypeScript projects by guiding incremental refactoring. Use the before and after examples to progressively apply readability and coupling principles without rewriting the entire codebase.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
VictorSmaniottoVictorSmaniotto

code-analyzer

Analyze PHP code for smells, complexity, duplications, and pattern violations.

Community
Intermediate
cyhinversecyhinverse

lint-and-validate

Run automated linters and type checkers on Node.js/TypeScript and Python repositories.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

bugfix-quick

Fix software bugs via a four-step TDD workflow with test verification.

Community
Basic