skills.rest
u9401066
u9401066COMMUNITY
Explore all skills by this author →
GitHub

frontend-ddd

Organize React projects into DDD layers with naming rules and Vitest setup.

1|Updated Nov 27, 2025
Search Tags:#vitest#testing#architecture#frontend#react#components#ddd
One-click install
npx skills add https://github.com/u9401066/medical-deidentification --skill frontend-ddd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ddd
Source: https://github.com/u9401066/medical-deidentification/tree/main/.claude/skills/frontend-ddd
Command: npx skills add https://github.com/u9401066/medical-deidentification --skill frontend-ddd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps frontend teams design scalable Domain-Driven Design (DDD) architectures, clearly separate concerns across domains (domain, application, infrastructure, presentation, shared), and align component organization with testing configurations.

Core Features & Use Cases

  • Frontend DDD architecture guidance: define domain boundaries and layers (domain/entities, value-objects, events; application/use cases; infrastructure; presentation components; shared).
  • Component organization and naming conventions: consistent folder structure and component ownership aligning with domains.
  • Testing setup: integrated vitest configurations and testing best practices for React components.
  • Use Case: A team migrating a monolith frontend to a structured DDD layout to improve maintainability and enable scalable testing.

Quick Start

Start by outlining a React project's frontend architecture using DDD principles, naming conventions, and a starter testing configuration.

Frequently Asked Questions about frontend-ddd

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

FAQPage Schema
How do I structure a React project using domain-driven design?▼

Structure a React project using domain-driven design by separating code into domain, application, infrastructure, presentation, and shared layers. This approach enforces clear boundaries, consistent naming conventions, and component ownership to improve maintainability across scalable frontends.

What is the best way to organize frontend components by domain?▼

Organize frontend components by aligning folder structures and component ownership with specific domains. This DDD methodology ensures that presentation components are grouped logically, reducing coupling and making large React applications easier to navigate and scale.

How do I configure vitest for a React DDD architecture?▼

Configure vitest for a React DDD architecture by applying the starter testing setup and best practices provided. This integrates testing directly into your domain layers, ensuring that use cases and presentation components are validated within the structured layout.

Can I use frontend DDD to migrate a monolith application?▼

Yes, frontend DDD is designed to help teams migrate monolith frontends into a structured layout. This migration improves maintainability and enables scalable testing by enforcing strict layer separation and clear domain boundaries.

Do I need external dependencies to scaffold a frontend DDD structure?▼

No, you do not need external dependencies to scaffold the architecture. The Skill provides dependency-free scaffolding to outline your project structure, detailing required layers and naming rules without requiring additional libraries.

Related Skills

Explore More Software Engineering Skills→
az9713az9713

dark-code-suite-init

Initialize a project with dark code prevention directories, CLAUDE.md section, and baseline audit.

Community
Intermediate
boomNDSboomNDS

architecture-patterns

Design backend architectures using Clean Architecture, Hexagonal Architecture, and Domain-Driven Design.

Community
Advanced
cenjiecenjie

frontend-testing

Implement frontend tests for React and Vue with Jest, Vitest, React Testing Library, and Cypress.

Community
Intermediate
joviconjovicon
13

analyze-architecture

Analyze NestJS project architecture against Clean Architecture and DDD boundaries.

Community
Advanced