frontend-philosophy

Codify React/Preact conventions for scaffolding, components, state, and reviews.

1|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/1337hero/claude-toolkit --skill frontend-philosophy-1337hero
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-philosophy
Source: https://github.com/1337hero/claude-toolkit/tree/main/skills/frontend-philosophy
Command: npx skills add https://github.com/1337hero/claude-toolkit --skill frontend-philosophy-1337hero

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Standardizes frontend design philosophy and coding conventions for React/Preact applications, reducing ambiguity and ensuring consistency across projects.

Core Features & Use Cases

  • Enforced conventions: DHH-inspired simplicity, 8-section component pattern, consistent file organization.
  • State management discipline: TanStack Query as the single source of truth for server data; avoid client-side duplication.
  • Anti-pattern prevention: no useCallback, no useEffect for state synchronization, no barrel files, no TypeScript; supports quick scaffolding and reviews.

Quick Start

Follow the Frontend Philosophy to scaffold a new React/Preact project or refactor components using the 8-section pattern and TanStack Query conventions.

Frequently Asked Questions about frontend-philosophy

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

FAQPage Schema
What is the 8-section component pattern for React and Preact?

It is a strict file organization convention for React and Preact that enforces consistent project architecture. The pattern standardizes component development by codifying exactly how sections within a component file should be ordered and structured.

How do I manage server state in React without duplicating client state?

Use TanStack Query as the single source of truth for server data to prevent client-side duplication. This approach eliminates the need for useEffect in state synchronization and enforces strict state management discipline across your React components.

Does this React architecture convention require TypeScript?

No, this React and Preact architecture convention explicitly enforces a no-TypeScript environment. It applies to scaffolding and code reviews by favoring DHH-inspired simplicity using standard JavaScript without type annotations.

How do I prevent anti-patterns like useCallback and barrel files in my React project?

Apply standardized frontend conventions that explicitly prohibit useCallback and barrel files to prevent anti-patterns. This philosophy also restricts using useEffect for state synchronization, ensuring a clean and scalable React project architecture.

Can I use this component pattern for scaffolding new Preact applications?

Yes, you can use these frontend conventions to scaffold new Preact applications. The philosophy applies directly to project structure decisions and component development across both React and Preact ecosystems to ensure scalable architecture.