skills.rest
Ayub-Khan
Ayub-KhanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-development

Provide structured frontend patterns for scalable, accessible user interfaces.

Updated Apr 23, 2026
Search Tags:#testing#performance#accessibility#frontend#react#angular#vue
One-click install
npx skills add https://github.com/Ayub-Khan/immortal_agent_swarm --skill frontend-development-ayub-khan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/Ayub-Khan/immortal_agent_swarm/tree/main/.agents/skills/frontend-development
Command: npx skills add https://github.com/Ayub-Khan/immortal_agent_swarm --skill frontend-development-ayub-khan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often suffers from fragmented patterns, inconsistent component design, and accessibility oversights across frameworks. This skill consolidates proven patterns, tooling strategies, and testing practices to help teams ship scalable and accessible frontends faster.

Core Features & Use Cases

  • Cross-framework component design patterns (Container/Presentational, Compound Components, Render Props) and standardized state management strategies.
  • Styling strategies including Tailwind, CSS Modules, and CSS-in-JS, with guidance for design systems and theming.
  • Accessibility-first development with semantic markup, ARIA roles, keyboard navigation, and focus management.
  • Performance optimization techniques such as memoization, code-splitting, virtualization, and bundle analysis to maintain snappy UIs.
  • Use Case: A dashboard app that requires fast interactions, accessible components, and maintainable code across multiple teams.

Quick Start

Install and configure a minimal frontend scaffold, wire a small component into a page, and verify basic accessibility and performance metrics.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
What are the best practices for building scalable UI components in React and Angular?▼

Accessible frontend development requires semantic markup, ARIA roles, and keyboard navigation. Implementing focus management alongside these standards ensures interfaces are usable for screen readers and keyboard-only users.

How do I optimize frontend performance and maintain fast UI interactions?▼

Frontend performance optimization uses memoization, code-splitting, and virtualization. Bundle analysis helps maintain snappy UIs by reducing load times and ensuring fast user interactions in complex applications.

Can I use Tailwind and CSS Modules together in a cross-framework design system?▼

Tailwind and CSS Modules can be used together within a design system. Styling strategies including CSS-in-JS provide flexible theming options while maintaining cross-framework consistency for multi-team dashboard apps.

When should I use compound components over render props for state management?▼

Compound components offer implicit state sharing for tightly coupled UI elements, while render props provide explicit logic injection. Choosing between them depends on your component architecture and reusability needs.

What testing strategies should I implement for a multi-framework frontend project?▼

Testing strategies for multi-framework projects should cover component logic, accessibility standards, and performance budgets. Consistent testing ensures maintainable code and reliable UI behavior across React, Angular, and Vue environments.

Related Skills

Explore More Software Engineering Skills→
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
fsollafsolla

ddia-systems

Evaluate data system architectures across replication, partitioning, and consistency models.

Community
Advanced
ltaooltaoo

timeless

Build web UIs with vanilla JS and store-driven state management.

Community
Intermediate
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced