skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-development

Codify frontend architecture, state management, and accessibility into a reusable blueprint.

Updated Feb 22, 2026
Search Tags:#architecture#accessibility#frontend#styling#rendering#patterns#state-management
One-click install
npx skills add https://github.com/ps-carvalho/cortex-agents --skill frontend-development-ps-carvalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/ps-carvalho/cortex-agents/tree/main/.opencode/skills/frontend-development
Command: npx skills add https://github.com/ps-carvalho/cortex-agents --skill frontend-development-ps-carvalho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Component architecture, state management, rendering strategies, styling, and accessibility for modern frontend applications are complex and often inconsistently implemented. This Skill provides a consolidated blueprint of patterns and best practices to standardize decision-making and accelerate delivery.

Core Features & Use Cases

  • Component Architecture: design principles like single responsibility, composition over inheritance, container/presentational, and compound components.
  • Framework Patterns: guidance for React, Vue, Angular, Svelte, and Laravel Frontend workflows; recommended patterns for hooks/composables, context, routing, SSR/CSR, and performance.
  • State Management & Styling: guidelines for local, shared, and global state, plus styling strategies (Tailwind, CSS Modules, CSS-in-JS, SCSS).
  • Accessibility & Performance: core accessibility practices and performance optimization techniques.

Quick Start

Outline a scalable component architecture and state strategy for a React project using the patterns described.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I design a scalable component architecture and state management strategy for a modern frontend application?▼

Scalable component architecture is achieved by applying single responsibility, composition over inheritance, and container/presentational patterns alongside defined local, shared, and global state management guidelines to standardize frontend delivery.

What's the best way to structure rendering strategies and routing for framework migrations across React, Vue, Angular, and Svelte?▼

Framework migrations across React, Vue, Angular, and Svelte are guided by standardized patterns for hooks, composables, SSR/CSR rendering strategies, and routing to ensure consistent cross-framework architecture decisions.

How do I choose between Tailwind, CSS Modules, CSS-in-JS, and SCSS for frontend styling?▼

Frontend styling strategies for Tailwind, CSS Modules, CSS-in-JS, and SCSS are selected by evaluating project-specific design principles and cross-cutting performance considerations to establish a consistent visual architecture.

Can I use this pattern-driven frontend architecture blueprint for Laravel Frontend workflows?▼

Yes, the pattern-driven frontend architecture blueprint provides explicit framework patterns, state management, and rendering strategy guidance specifically tailored for Laravel Frontend workflows alongside React, Vue, Angular, and Svelte.

When do I need to implement core accessibility practices during component architecture design?▼

Core accessibility practices must be integrated during component architecture design by applying consolidated blueprint patterns that address cross-cutting accessibility and performance optimization concerns simultaneously.

Why does state management complexity increase without standardized component architecture patterns?▼

State management complexity increases without standardized component architecture patterns because local, shared, and global state boundaries become inconsistently implemented, leading to fragmented rendering and unmanageable application scaling.

Related Skills

Explore More Software Engineering Skills→
TiraelTirael

c4-modeling

Automate C4 architecture model creation with LikeC4-guided rules and templates.

Community
Intermediate
hiddink-aihiddink-ai
1

react-best-practices

Enforce React and Next.js performance rules for rendering, data fetching, and bundles.

Official
Intermediate
EanLeeEanLee

gitlab-ci-patterns

Provide GitLab CI/CD pipeline patterns for automated testing, building, and deployment.

Community
Intermediate
huangzidahuangzida
2

source-driven-development

Resolve framework patterns from official documentation with cited sources.

Community
Advanced