skills.rest
atstaeff
atstaeffCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Implement modern frontend design patterns for Vue.js and Angular development.

2|Updated Feb 8, 2026
Search Tags:#typescript#testing#state management#frontend#angular#patterns#vue.js
One-click install
npx skills add https://github.com/atstaeff/ai-agents --skill frontend-patterns-atstaeff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/atstaeff/ai-agents/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/atstaeff/ai-agents --skill frontend-patterns-atstaeff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidance and code examples for implementing modern, maintainable, and scalable frontend patterns in Vue.js and Angular applications, helping developers avoid common pitfalls and write higher-quality code.

Core Features & Use Cases

  • Reusable Logic: Implement composable functions (Vue) and injectable services (Angular) for stateful logic.
  • State Management: Utilize Pinia (Vue) and NgRx Signals (Angular) for type-safe state management.
  • Type Safety: Enforce data integrity with Zod for form validation and TypeScript best practices.
  • Component Architecture: Understand and apply smart vs. dumb component patterns.
  • Routing Security: Implement route guards for authentication and authorization.
  • Testing: Examples for component testing with Testing Library and E2E testing with Playwright.
  • Use Case: Refactor a large Vue component by extracting stateful logic into a composable, improving reusability and testability.

Quick Start

Apply the composable pattern to extract reusable stateful logic into a composable function in Vue.js.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I extract reusable stateful logic in Vue.js to avoid prop drilling?▼

To avoid prop drilling in Vue.js, extract reusable stateful logic into composable functions. This pattern encapsulates state and behavior, improving component reusability and testability.

What is the best way to manage type-safe state in Angular using NgRx Signals?▼

Type-safe state management in Angular uses NgRx Signals to handle reactive state predictably. This approach enforces TypeScript types, ensuring data integrity and preventing runtime state errors.

How do I validate forms with Zod and TypeScript in frontend applications?▼

Validate frontend forms with Zod by defining TypeScript schemas that enforce data integrity. Zod parses user inputs against these schemas, ensuring type-safe validation before submission.

When should I use smart vs dumb component architecture in Vue.js and Angular?▼

Use smart vs dumb component architecture to separate state management from presentation. Smart components handle logic and services, while dumb components focus purely on rendering UI.

Does this frontend pattern guide cover testing strategies with Testing Library and Playwright?▼

Yes, this guide covers testing strategies using Testing Library for component testing and Playwright for E2E testing. These frameworks ensure reliable validation of component logic and user flows.

How do I implement route guards for authentication in Angular and Vue.js?▼

Implement route guards in Angular and Vue.js to secure routing based on authentication status. Guards intercept navigation, verifying user authorization before granting access to protected routes.

Related Skills

Explore More Software Engineering Skills→
pauljbernardpauljbernard
5

Frontend Framework Mastery

Provide expert frontend development guidance across React, Vue.js, Angular, and modern JavaScript frameworks.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
aaravminaaravmin
1

clerk-vue-patterns

Integrate Clerk authentication into Vue 3 apps with composables, router guards, and Pinia.

Community
Intermediate
diego-tobalinadiego-tobalina
1

frontend-patterns

Design React/Next.js frontend architecture with component composition and state management.

Community
Advanced