frontend-ui-engineering

Detect frontend frameworks and design component hierarchies with accessibility and performance checks.

Updated Mar 31, 2026

Search Tags:#performance #accessibility #framework-detection #frontend-ui #component-hierarchy #ui-engineering

Ready to run

npx skills add https://github.com/Saturate/agents --skill frontend-ui-engineering-saturate

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/Saturate/agents/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/Saturate/agents --skill frontend-ui-engineering-saturate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI engineering becomes consistent and scalable by establishing a reusable, accessible, and high-performance component architecture that adapts to any framework. It guides teams to reduce fragmentation, improve accessibility, and tighten performance considerations across projects.

Core Features & Use Cases

Detect framework and project patterns to tailor UI guidance and kickoff architecture.
Define and enforce a clean component hierarchy (tokens/primitives, base components, composites, features, pages).
Enforce separation of concerns (container/smart vs presentation/dumb) and implement accessibility checks throughout.
Provide performance guidance including lazy loading, code-splitting, and efficient rendering strategies.
Verify outcomes with chrome-devtools and alignment with design-system patterns across stacks.

Quick Start

Evaluate your project to detect framework, map components, and begin implementing a reusable, accessible UI architecture.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema

How do I design a reusable and accessible component hierarchy for my frontend project?▼

To design a reusable component hierarchy, establish structured layers from tokens and primitives up to pages, enforcing separation of concerns between container and presentation components while integrating accessibility checks throughout the architecture.

Does this UI engineering approach work with both React and Vue frameworks?▼

Yes, this UI engineering approach works with React, Vue, Svelte, Angular, Next, and Nuxt. It applies framework-agnostic patterns by first detecting your project's framework to tailor specific UI guidance and architecture.

What is the best way to enforce separation of concerns in frontend UI components?▼

The best way to enforce separation of concerns is dividing components into smart containers managing logic and dumb presentation components handling rendering, mapped within a structured hierarchy from base primitives to feature composites.

How do I verify frontend performance and accessibility outcomes during UI development?▼

Verify frontend performance and accessibility outcomes using chrome-devtools to check alignment with design-system patterns, ensuring efficient rendering strategies like lazy loading and code-splitting function correctly across your stack.

Can I use this component architecture method for large scale projects across different stacks?▼

Yes, you can use this architecture method for large scale projects across different stacks. It reduces fragmentation and tightens performance considerations by establishing a consistent, adaptable component hierarchy across various frameworks.

What performance strategies should I include when building a frontend component hierarchy?▼

Include performance strategies like lazy loading, code-splitting, and efficient rendering patterns when building a component hierarchy. These strategies ensure high-performance UI delivery while maintaining strict accessibility standards.