frontend-standards

Validates React 19 and TypeScript frontend code against Learnix project standards.

2|1|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/Oleh-Bashtovyi/Learnix --skill frontend-standards-oleh-bashtovyi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-standards
Source: https://github.com/Oleh-Bashtovyi/Learnix/tree/main/.claude/skills/frontend-standards
Command: npx skills add https://github.com/Oleh-Bashtovyi/Learnix --skill frontend-standards-oleh-bashtovyi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures consistency and maintainability across the Learnix frontend by enforcing strict architectural patterns, coding styles, and state management rules for React 19 and TypeScript.

Core Features & Use Cases

  • Architectural Compliance: Provides clear rules for component co-location, folder structure, and API layer conventions to prevent technical debt.
  • Standardized Implementation: Guides developers on using TanStack Query for server state, Zustand for UI state, and Zod for form validation.
  • Use Case: When building a new student dashboard feature, use this Skill to verify the correct folder structure, ensure API calls are properly typed, and confirm that localization and styling follow the project's semantic token requirements.

Quick Start

Use the frontend-standards skill to validate your current component implementation against the project architecture and styling rules.

Frequently Asked Questions about frontend-standards

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

FAQPage Schema
How do I enforce React 19 and TypeScript frontend standards in my project?

To enforce React 19 and TypeScript frontend standards, you need strict architectural patterns, component co-location rules, and API layer conventions. This Skill provides those guidelines to ensure consistency and maintainability across your application.

What is the best way to manage server and UI state in a React 19 application?

The best way to manage state in a React 19 application is separating server and UI concerns. This Skill guides developers to use TanStack Query for server state and Zustand for UI state, ensuring standardized implementation.

How do I structure a new feature folder in a scalable React 19 project?

To structure a new feature folder in a scalable React 19 project, follow component co-location and folder structure rules. This Skill validates your implementation against project-specific ADRs to prevent technical debt.

Does this frontend standards skill support form validation and localization rules?

Yes, this frontend standards skill supports form validation and localization rules. It guides developers on using Zod for form validation and ensures localization follows the project's semantic token requirements for consistent styling.

Can I use this skill to verify my existing component architecture against project ADRs?

Yes, you can use this skill to verify your existing component architecture against project ADRs. It facilitates consistent implementation of components and API layers to ensure adherence to project-specific folder structures and styling conventions.

Why do I need architectural guidelines for TypeScript and React 19 development?

You need architectural guidelines for TypeScript and React 19 development to prevent technical debt. This Skill provides clear rules for component co-location, folder structure, and API layer conventions to ensure long-term maintainability.