Skills
.Work. You
Rest

frontend-component-guidelines

Community

Standardize React component quality.

Software Engineering#testing#linting#react#component#i18n#storybook#guidelines
Authorkristijorgji
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This set of frontend component guidelines helps teams standardize React component structure, translations, tests, and documentation to improve maintainability and UX consistency.

Core Features & Use Cases

  • Enforces a clear Component File Structure in src/c/components (e.g., ComponentName.tsx, ComponentName.stories.tsx, ComponentName.test.tsx).
  • Promotes the use of a translation system (react-i18next) for all user-facing strings, and updates locale files when keys change.
  • Requires Storybook stories and unit tests for new components, with mocks for i18n as needed.
  • Guides placement (pages vs shared components) and naming conventions to reduce duplication and improve discoverability.

Quick Start

Review the repository's components to ensure alignment with the frontend component guidelines.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-component-guidelines
Download link: https://github.com/kristijorgji/react_ts_vite_tailwind_sb/archive/main.zip#frontend-component-guidelines

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.