skills.rest
monam2
monam2COMMUNITY
Explore all skills by this author →
GitHub

Frontend Engineer

Organize frontend projects using domain-driven architecture under src/domains.

Updated Jan 18, 2026
Search Tags:#architecture#accessibility#frontend#storybook#domain-driven#design-systems#component-first
One-click install
npx skills add https://github.com/monam2/traders --skill frontend-engineer-monam2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Engineer
Source: https://github.com/monam2/traders/tree/main/.agent/skills/agent-frontend
Command: npx skills add https://github.com/monam2/traders --skill frontend-engineer-monam2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end teams often struggle with inconsistent architectures, conventions, and workflows, which lead to fragmented codebases and slower delivery. This Skill standardizes frontend practices across domains by enforcing Domain-Driven structure, SSOT principles, and accessibility guidelines, enabling faster, more reliable UI development.

Core Features & Use Cases

  • Domain-driven structure and domain-based file organization under src/domains to align pages, components, hooks, entities, and utilities across teams.
  • Component-first workflow including component spec definition, implementation, Storybook documentation, and page integration, with enforced import ordering and alias usage.
  • Accessibility-first guidelines with WCAG considerations, keyboard navigation, and screen reader support to ensure inclusive UI across domains.

Quick Start

Create a new domain page by following the Domain-Driven structure under src/domains and wire it into the app layout.

Frequently Asked Questions about Frontend Engineer

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

FAQPage Schema
How do I structure a multi-domain frontend application for scalable UI development?▼

Structure multi-domain frontend applications using a domain-driven architecture under src/domains to align pages, components, hooks, and entities. This standardizes UI development and ensures consistent component patterns across teams for scalable page composition.

What's the best way to document frontend components during development?▼

Document frontend components using a component-first workflow that includes Storybook documentation. This approach standardizes component spec definition, implementation, and page integration to ensure reliable UI development across domains.

How does domain-driven architecture improve frontend accessibility?▼

Domain-driven architecture improves frontend accessibility by enforcing accessibility-first guidelines with WCAG considerations across all domains. This ensures inclusive UI through standardized keyboard navigation and screen reader support within the component-first workflow.

Can I use this frontend architecture for projects requiring strict import ordering and aliasing?▼

Yes, this frontend architecture enforces strict import ordering and alias usage within a src-based structure. It standardizes workflows across teams by explicitly organizing domains, components, and shared hooks to prevent fragmented codebases.

Does this domain-driven frontend structure support both server and client components?▼

Yes, the domain-driven frontend structure includes explicit support for server and client components. This ensures scalable page composition while maintaining strict architectural boundaries and accessibility considerations across multi-domain applications.

When should I not use a domain-driven structure for my frontend project?▼

Avoid domain-driven frontend structure if your project lacks multiple domains or does not require consistent component patterns across teams. This architecture targets multi-domain applications needing standardized UI development, shared hooks, and scalable page composition.

Related Skills

Explore More Software Engineering Skills→
C0ntr0lledCha0sC0ntr0lledCha0s
3

managing-docs

Automate project documentation structure and governance with configurable tooling.

Community
Advanced
ncsound919ncsound919

frontend-design

Design frontend interfaces and components for React or HTML/CSS.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced
theodrosyimertheodrosyimer

react-patterns

Separate UI from business logic in React apps with components, hooks, and DI.

Community
Intermediate