skills.rest
PedroHBO
PedroHBOCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Provide structured React and Angular UI patterns for components, state, performance, and accessibility.

1|1|Updated Mar 26, 2026
Search Tags:#performance#accessibility#react#angular#state-management#frontend-patterns
One-click install
npx skills add https://github.com/PedroHBO/opencode-config-skills --skill frontend-patterns-pedrohbo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/PedroHBO/opencode-config-skills/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/PedroHBO/opencode-config-skills --skill frontend-patterns-pedrohbo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Frontend-patterns provides a structured, reusable set of patterns and best practices for building maintainable and accessible UIs across React and Angular, including state management, performance optimizations, and UI conventions.

Core Features & Use Cases

  • Reusable component patterns for React and Angular (composition, hooks, standalone components)
  • State management guidance using React Context/useReducer and Angular signals/store patterns
  • Performance and accessibility guidelines, with practical examples and checklists
  • OpenCode usage examples, templates, and reference materials to sustain quality

Quick Start

Start by applying this pattern library to your UI components to establish a consistent baseline.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
What are the best frontend patterns for unifying React and Angular UI development?▼

The best frontend patterns for unifying React and Angular UI development include reusable component composition, hooks, standalone components, and standardized UI conventions to establish a consistent maintainable baseline across modern web apps.

How do I manage state in React and Angular using modern frontend patterns?▼

Manage state in React and Angular using frontend patterns like React Context and useReducer alongside Angular signals and store patterns, providing structured guidance for robust and maintainable state management across both frameworks.

Does this frontend pattern library include accessibility and performance optimization guidelines?▼

Yes, this frontend pattern library includes accessibility and performance optimization guidelines, offering practical examples and checklists to sustain UI quality and ensure robust, accessible modern web applications.

How do I apply frontend patterns to improve component reusability across different frameworks?▼

Apply frontend patterns by leveraging component composition, React hooks, and Angular standalone components to improve reusability, ensuring a structured and unified approach to building maintainable user interfaces.

Can I use these frontend patterns for large scale web applications?▼

Yes, you can use these frontend patterns for large scale web applications because they provide structured state management and performance optimizations that sustain quality and maintainability across complex modern UIs.

Related Skills

Explore More Software Engineering Skills→
hackefellerhackefeller
1

react-patterns

Standardize React component design, naming, and state management patterns.

Official
Basic
Ab-aswiniAb-aswini
2

performance-profiling

Runs Lighthouse audits to analyze Core Web Vitals and identify performance bottlenecks.

Community
Intermediate
SAPSAP
294

best-practices

Audits Angular 21+ code quality and standards for specified paths.

Official
Intermediate
tech-leads-clubtech-leads-club
5.0k

nx-generate

Generate libraries and applications using Nx generators in a monorepo.

Official
Intermediate