What is the recommended testing approach?

It implements a tiered testing strategy using Vitest or Jest for unit tests, Playwright for integration flows, and Cypress for critical path end-to-end testing.

Which CSS frameworks are supported?

The skill includes specific breakpoint configurations and mobile-first best practices optimized for Tailwind CSS and Twind, though the principles apply to any utility-first framework.

How does this skill improve component organization?

It enforces Atomic Design principles, categorizing components into Atoms, Molecules, Organisms, Templates, and Pages to ensure high reusability and clean separation of concerns.

Does this skill help with web application performance?

Yes, it provides specific guidance for code splitting, lazy loading resources, and utilizing React memoization techniques to reduce re-renders and improve load speeds.

How are engineering standards enforced?

The skill integrates linting configurations and Git hooks (via Husky) to automate code quality checks and commit message formatting before code reaches the repository.

Frontend General Principles

Name: Frontend General Principles
Author: Genuineh

byGenuineh

0•

デザインツール

Implements industry-standard frontend engineering practices to build scalable, high-performance web applications with structured design patterns.

This skill equips Claude with a comprehensive framework for modern frontend development, moving beyond simple code generation to enforce high-level architectural standards. It guides the creation of components using Atomic Design principles, implements mobile-first responsive layouts using Tailwind-compatible breakpoints, and applies advanced performance optimizations like code splitting and React memoization. By integrating engineering best practices—including automated linting, Git hooks, and a multi-level testing strategy—this skill ensures that frontend projects are maintainable, performant, and production-ready.

主な機能

01Comprehensive testing strategy covering Unit, Integration, and E2E testing

02Mobile-first responsive design patterns with Tailwind/Twind breakpoints

030 GitHub stars

04Standardized engineering workflows using Husky and strict linting rules

05Atomic Design architecture for component decoupling and reusability

06Performance optimization via lazy loading, code splitting, and memoization

ユースケース

01Optimizing existing web applications for Core Web Vitals and resource loading

02Scaffolding a new frontend project with a scalable component hierarchy

03Enforcing consistent engineering standards and testing across a frontend team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add genuineh/fus frontend-general-principles

For use in Claude.ai and ChatGPT

主な機能

01Comprehensive testing strategy covering Unit, Integration, and E2E testing

02Mobile-first responsive design patterns with Tailwind/Twind breakpoints

030 GitHub stars

04Standardized engineering workflows using Husky and strict linting rules

05Atomic Design architecture for component decoupling and reusability

06Performance optimization via lazy loading, code splitting, and memoization

ユースケース

01Optimizing existing web applications for Core Web Vitals and resource loading

02Scaffolding a new frontend project with a scalable component hierarchy

03Enforcing consistent engineering standards and testing across a frontend team