skills.rest
RogerioSobrinho
RogerioSobrinhoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-principles

Enforce separation of concerns and layered architecture in component-based frontend projects.

Updated Mar 26, 2026
Search Tags:#ui#architecture#accessibility#frontend#patterns#state-management#api-integration
One-click install
npx skills add https://github.com/RogerioSobrinho/codeme-copilot --skill frontend-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-principles
Source: https://github.com/RogerioSobrinho/codeme-copilot/tree/main/skills/frontend-principles
Command: npx skills add https://github.com/RogerioSobrinho/codeme-copilot --skill frontend-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clarifies frontend architecture to prevent tangled UI code by enforcing separation of concerns and well-defined layering.

Core Features & Use Cases

  • Clean Architecture for Frontend: separation into Presentation, State/Application, Domain, Data layers with dependency rule.
  • Smart / Dumb Component Split: rules and patterns.
  • State Management Decision: when to lift state, and when to use feature/global stores.
  • API Integration Pattern: guidelines for repositories, services, HTTP clients, and error handling.
  • Authentication Flow: token storage, refresh, logout flows.
  • Loading & Error States: consistent async state handling.
  • Accessibility Baseline and Performance Baseline.

Quick Start

Apply these frontend principles to initialize a new project by aligning architecture, components, and API patterns with the guidelines.

Frequently Asked Questions about frontend-principles

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

FAQPage Schema
How do I separate concerns and enforce layering in frontend architecture?▼

Frontend architecture separation of concerns is enforced by splitting code into Presentation, State/Application, Domain, and Data layers with a strict dependency rule. This prevents tangled UI code and clarifies module boundaries.

When should I lift state or use a global store for state management?▼

State management decisions depend on scope: lift state when sharing across nearby components, but use feature or global stores for complex, cross-cutting application state. This ensures clear data flow and prevents prop drilling.

What is the best way to structure API integration and error handling in React or Angular?▼

API integration patterns structure network calls using repositories, services, and dedicated HTTP clients. This approach centralizes data fetching and standardizes error handling across component-based stacks like React and Angular.

How do I manage authentication flows including token storage and refresh?▼

Authentication flows are managed by standardizing token storage, refresh, and logout procedures. Defining these flows within the architecture layer ensures secure session handling and consistent user authentication.

Do these frontend architecture guidelines work with Flutter and other component-based stacks?▼

Yes, these frontend architecture guidelines apply to Flutter and other component-based stacks. They define smart and dumb component rules, accessibility baselines, and performance guidelines that translate across frameworks.

How do I handle loading and error states consistently during async operations?▼

Loading and error states are handled consistently by applying standardized async state guidelines. This ensures the UI provides reliable feedback during data fetching and uniform error messaging across the application.

Related Skills

Explore More Software Engineering Skills→
jwilgerjwilger

atomic-design

Organize UI components into atoms, molecules, organisms, and templates.

Community
Basic
yunseo-kimyunseo-kim
1

gitlab-ci-patterns

Generate GitLab CI/CD pipeline patterns for build, test, and deploy stages.

Community
Intermediate
grvpanchalgrvpanchal

server-api

Centralize frontend API communication with typed services and an HTTP client.

Community
Advanced
karchthokarchtho

react-state-management

Identify and implement React state management strategies across local, global, and server state.

Community
Intermediate