frontend-design-patterns
CommunityDesign scalable UI with proven frontend patterns.
Design & Creative#frontend#api-integration#design-patterns#data-flow#atomic-design#ui-architecture#component-design
Authordanghungtb26
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
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-design-patterns Download link: https://github.com/danghungtb26/admin-react-typescript-template/archive/main.zip#frontend-design-patterns Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.