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.

主要功能

01152 GitHub stars

02Secure environment variable management for browser-side constraints

03Type-safe API integration with automated validation guards

04Atomic Design component hierarchy implementation (Atoms to Pages)

05Unidirectional data flow and immutable state update patterns

06Standardized quality check workflows with specific test coverage targets

使用场景

01Enforcing consistent security and state management best practices across a frontend codebase

02Setting up a new production-ready React project with TypeScript and strict architectural rules

03Defining mandatory quality gates and testing requirements for professional web development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shinpr/ai-coding-project-boilerplate technical-spec

For use in Claude.ai and ChatGPT

Download Skill