frontend-design-patterns

Name: frontend-design-patterns
Availability: InStock
Author: danghungtb26

Decompose UI screens into reusable components with atomic design and API cores.

3|Updated Apr 5, 2024

Search Tags:#frontend #api-integration #design-patterns #data-flow #atomic-design #ui-architecture #component-design

Ready to run

npx skills add https://github.com/danghungtb26/admin-react-typescript-template --skill frontend-design-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design-patterns
Source: https://github.com/danghungtb26/admin-react-typescript-template/tree/main/.agents/skills/frontend-design-patterns
Command: npx skills add https://github.com/danghungtb26/admin-react-typescript-template --skill frontend-design-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams design and decompose UI screens into reusable components in alignment with project conventions. It clarifies data flow and API integration across front-end architectures.

Core Features & Use Cases

Systematic approach to break down screens (lists, forms, dashboards, detail views) into modular components with clear data flow.
Guidance on applying atomic design, form/logic separation, and API cores/hooks structure to support maintainable codebases.
Real-world scenario: plan a new feature by outlining component boundaries and API interactions before coding.

Quick Start

Outline the target screen, identify core components (atoms, molecules, containers), map data flow between components, and sketch the required API cores and hooks.

Frequently Asked Questions about frontend-design-patterns

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

FAQPage Schema

How do I decompose a frontend UI screen into reusable components?▼

Decomposing a frontend UI screen involves outlining the target view, identifying core components using atomic design principles, and mapping data flow between containers and UI elements to ensure modularity and maintainability.

What is the best way to structure API integration and data flow for frontend dashboards?▼

The best way to structure API integration for frontend dashboards is using a cores/hooks structure, which separates data-fetching logic from presentation, ensuring clear boundaries and maintainable data flow across your UI architecture.

When do I need to use atomic design principles for component design?▼

You need atomic design principles when planning new frontend features that require breaking down complex screens like lists, forms, and detail views into distinct atoms, molecules, and containers for scalable component design.

How to plan component boundaries before coding a new frontend feature?▼

To plan component boundaries before coding, outline the target screen, separate form and logic, identify reusable atoms and molecules, and sketch the required API cores and hooks interactions to establish clear architectural conventions.

Does separating form and logic work for common frontend views like lists and forms?▼

Yes, separating form and logic works effectively for common frontend views like lists and forms by isolating UI presentation from business logic, which streamlines API integration and supports a highly maintainable codebase.

What are the limitations of using basic design patterns for UI architecture?▼

A limitation of using basic UI architecture design patterns is that they provide only foundational guidance for component decomposition and data flow mapping, requiring your team to manually implement the actual cores/hooks structure and API integration code.