skills.rest
asalhamed
asalhamedCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Builds FP-first UI components for Vue/Nuxt, React/Next.js, Svelte, Leptos, and plain HTML projects.

Updated Apr 4, 2026
Search Tags:#ui#frontend#react#vue#ddd#component#fp
One-click install
npx skills add https://github.com/asalhamed/dev-agents --skill frontend-dev-asalhamed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/asalhamed/dev-agents/tree/main/frontend-dev
Command: npx skills add https://github.com/asalhamed/dev-agents --skill frontend-dev-asalhamed

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Build FP-first frontend UI components to ensure pure rendering and predictable behavior.

Core Features & Use Cases

  • Reusable presentational components across frameworks (Vue/Nuxt, React/Next.js, Svelte, Leptos, plain HTML)
  • Enforces unidirectional data flow, domain-language naming, and separation of concerns
  • Accessibility and testing guidance embedded in the workflow

Quick Start

Implement a UI component following the project’s FP-first patterns.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I build pure UI components with predictable behavior in React?▼

To build pure UI components in React, enforce unidirectional data flow and strict separation of concerns between UI rendering and API calls. This functional programming approach ensures predictable behavior by maintaining pure rendering.

What is the best way to enforce domain-driven design naming in frontend development?▼

Enforcing domain-language naming in frontend development involves mapping presentational component names directly to ubiquitous domain terms. This pattern ensures strict separation of concerns and unidirectional data flow across Vue, React, or Svelte projects.

Does this functional programming frontend approach work with Vue and Svelte?▼

Yes, this functional programming frontend approach works with Vue/Nuxt, Svelte, Leptos, and plain HTML projects. It applies unidirectional data flow and pure presentational components universally across these frameworks to ensure predictable rendering.

How do I separate API calls from UI components in frontend state management?▼

To separate API calls from UI components, you extract data fetching logic into isolated modules and pass data down through unidirectional data flow. This strict separation of concerns ensures presentational components remain pure and predictable.

Why should I use pure components for frontend state management integration?▼

You should use pure components for state management integration to guarantee predictable rendering and eliminate side effects. By enforcing unidirectional data flow, presentational components receive state as props without mutating external data directly.

Related Skills

Explore More Software Engineering Skills→
v4lheruv4lheru

pact-frontend-patterns

Provide React frontend patterns for scalable, accessible UI components.

Community
Intermediate
tyronerosstyroneross
1

native-testing

Scan native Apple UI components via accessibility APIs for compliance violations.

Community
Advanced
masssi164masssi164

flutter-architecting-apps

Architect Flutter apps with UI-Logic-Data layered separation.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

oop-encapsulation

Apply encapsulation with private fields and validated mutators in Java, Python, and TypeScript.

Official
Basic