skills.rest
kristijorgji
kristijorgjiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-component-guidelines

Enforce React component structure, translations, Storybook, and test coverage.

Updated Jun 17, 2025
Search Tags:#testing#linting#react#component#i18n#storybook#guidelines
One-click install
npx skills add https://github.com/kristijorgji/react_ts_vite_tailwind_sb --skill frontend-component-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-component-guidelines
Source: https://github.com/kristijorgji/react_ts_vite_tailwind_sb/tree/main/.agents/skills/frontend-component-guidelines
Command: npx skills add https://github.com/kristijorgji/react_ts_vite_tailwind_sb --skill frontend-component-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about frontend-component-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize React component file structure across my codebase?▼

To standardize React component file structure, enforce a consistent naming convention like ComponentName.tsx, ComponentName.stories.tsx, and ComponentName.test.tsx within your src/c/components directory to improve maintainability and reduce duplication.

What's the best way to manage translations in React components?▼

Manage translations in React components by utilizing a translation system like react-i18next for all user-facing strings, ensuring you update locale files automatically whenever translation keys change during component updates.

Do I need Storybook and unit tests for new React components?▼

Yes, you need Storybook stories and unit tests for new React components. Mocking i18n within these tests ensures components remain isolated, verifiable, and aligned with project conventions for reliable UI development.

How do I organize shared components versus page components in React?▼

Organize React components by placing reusable UI elements in shared component directories and specific page-level components in their respective pages directory, reducing duplication and improving discoverability across the project.

Why does my React component linting fail during code review?▼

React component linting fails during code review when components lack required Storybook stories, unit tests, or proper i18n integration, violating established frontend guidelines meant to ensure UX consistency and maintainability.

Can I use react-i18next mocks for Storybook stories?▼

Yes, you can and should use react-i18next mocks for Storybook stories and unit tests to isolate component rendering behavior, ensuring your UI documentation and test coverage remain accurate without external translation dependencies.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
carlos18bpcarlos18bp
1

frontend-unit-test-coverage

Analyze Jest or Vitest coverage reports and implement unit tests for Pinia stores, composables, and UI components.

Community
Intermediate
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
RamonsDkaRamonsDka
1

nx-generate

Scaffold libraries and applications using Nx workspace generators.

Community
Intermediate