What architecture pattern does this skill use?

It utilizes the Atomic Design methodology (Atoms, Molecules, Organisms, etc.) to ensure component reusability and organized project structure.

Can I use this with any frontend framework?

While the principles are broad, this specific skill is optimized for TypeScript-based React applications using modern hooks and functional components.

How does this skill improve frontend security?

It enforces rules that prevent secrets like API keys from being bundled into client-side code and mandates the use of backend proxies for sensitive operations.

How does it handle environment variables?

It moves away from unsafe process.env usage in favor of build-tool specific systems (like import.meta.env) combined with a type-safe configuration layer.

What are the testing requirements defined by this skill?

The skill sets a minimum unit test coverage requirement of 60%, with higher targets for critical components like Atoms and Utils.

Frontend Technical Specification

Name: Frontend Technical Specification
Author: shinpr

byshinpr

•

142

デザインツール

Establishes standardized frontend architecture, security protocols, and testing requirements for production-ready React applications.

概要

This skill equips Claude with a robust framework for frontend development, focusing on TypeScript-based React applications. It provides comprehensive guidelines for environment variable management, securing client-side applications against credential leaks, and implementing Atomic Design patterns. By enforcing specific data flow principles and quality check requirements—such as mandatory testing coverage and Biome-based linting—this skill ensures that AI-generated frontend code is scalable, secure, and maintainable. It is ideal for developers seeking to maintain high engineering standards across complex web projects.

主な機能

Standardizes React architecture using Function Components and Atomic Design principles.
Implements strict security rules to prevent the exposure of API keys and secrets in client-side code.
Integrates quality assurance workflows including linting, type-checking, and specific test coverage targets.
Enforces type-safe environment variable management via centralized configuration layers.
Defines unified data flow patterns using React Query/SWR and immutable state updates.
142 GitHub stars

ユースケース

Initializing a new React project with standardized architectural rules and security baselines.
Automating CI/CD quality gates by defining mandatory build and testing command sequences.
Refactoring existing frontend code to follow Atomic Design and type-safe data fetching patterns.

概要

主な機能

Standardizes React architecture using Function Components and Atomic Design principles.
Implements strict security rules to prevent the exposure of API keys and secrets in client-side code.
Integrates quality assurance workflows including linting, type-checking, and specific test coverage targets.
Enforces type-safe environment variable management via centralized configuration layers.
Defines unified data flow patterns using React Query/SWR and immutable state updates.
142 GitHub stars

ユースケース

Initializing a new React project with standardized architectural rules and security baselines.
Automating CI/CD quality gates by defining mandatory build and testing command sequences.
Refactoring existing frontend code to follow Atomic Design and type-safe data fetching patterns.