How does this skill handle environment variables?

It enforces the use of build-tool environment systems while strictly prohibiting the storage of secrets like API keys on the client-side to prevent security leaks.

What component architecture does it support?

It follows the Atomic Design pattern, organizing components into a clear hierarchy of Atoms, Molecules, Organisms, Templates, and Pages for better maintainability.

Does this skill provide specific testing guidelines?

Yes, it mandates specific unit test coverage targets, such as 70% for Atoms and Utils, and 60% for Organisms, ensuring high code quality.

How is data flow managed with this skill?

The skill enforces a single source of truth and unidirectional data flow, utilizing React hooks and immutable update patterns to ensure predictable UI states.

Frontend Technical Architecture & Design Rules

Name: Frontend Technical Architecture & Design Rules
Author: shinpr

byshinpr

•

152

设计工具

Establishes production-ready frontend architecture, security protocols, and data flow patterns for React applications.

关于

This skill provides a comprehensive framework for building high-quality React applications using TypeScript, ensuring consistent environment variable management, component hierarchy based on Atomic Design, and secure data handling. It guides Claude in implementing modern state management patterns, unidirectional data flow, and rigorous quality assurance standards, including specific test coverage targets and build commands, to deliver performant and maintainable frontend code suitable for professional environments.

主要功能

152 GitHub stars
Secure environment variable management for browser-side constraints
Type-safe API integration with automated validation guards
Atomic Design component hierarchy implementation (Atoms to Pages)
Unidirectional data flow and immutable state update patterns
Standardized quality check workflows with specific test coverage targets

使用场景

Enforcing consistent security and state management best practices across a frontend codebase
Setting up a new production-ready React project with TypeScript and strict architectural rules
Defining mandatory quality gates and testing requirements for professional web development

关于

主要功能

152 GitHub stars
Secure environment variable management for browser-side constraints
Type-safe API integration with automated validation guards
Atomic Design component hierarchy implementation (Atoms to Pages)
Unidirectional data flow and immutable state update patterns
Standardized quality check workflows with specific test coverage targets

使用场景

Enforcing consistent security and state management best practices across a frontend codebase
Setting up a new production-ready React project with TypeScript and strict architectural rules
Defining mandatory quality gates and testing requirements for professional web development