Does it provide performance optimization tips?

Yes, the skill includes instructions to avoid unnecessary re-renders and suggests implementation patterns like lazy loading for heavy components and images.

How does it improve web accessibility?

It enforces the use of semantic HTML tags, ensures keyboard navigability, and provides guidance on adding ARIA labels where functionality isn't visually obvious.

Can this skill help with mobile-first design?

Yes, it specifically uses relative units like rem and em and utilizes CSS Grid/Flexbox to ensure components function on screens from 320px wide up to desktop.

What frameworks does the Frontend Architect skill support?

The skill is framework-agnostic and provides best practices compatible with React, Vue, Svelte, and vanilla HTML/CSS/JS environments.

How does it handle component logic?

It promotes keeping components small and single-purpose, recommending that state be kept local whenever possible or 'lifted up' only when necessary.

Frontend Architect

Name: Frontend Architect
Author: k1lgor

byk1lgor

0•

Herramientas de Diseño

Architects maintainable, accessible, and responsive user interfaces using modern framework best practices.

The Frontend Architect skill empowers Claude to act as a senior UI engineer, focusing on the creation of high-quality, production-ready components and layouts. It provides specific guidance on component composition, state management optimization, and modern styling techniques using CSS Grid and Flexbox. By prioritizing accessibility (A11y) and performance through lazy loading and efficient rendering, this skill ensures that web applications are not only visually appealing but also inclusive and fast across all device sizes, from mobile to desktop.

Características Principales

01Performance optimization through lazy loading and efficient state management patterns.

02Cross-framework support for React, Vue, Svelte, and vanilla web environments.

03Component-driven design focusing on single-responsibility and composition over inheritance.

04Automated accessibility (A11y) enhancements via semantic HTML and ARIA standards.

050 GitHub stars

06Mobile-first responsive layout implementation using CSS Grid and Flexbox.

Casos de Uso

01Building a reusable, accessible component library for a design system.

02Refactoring legacy fixed-width layouts into modern, fluid responsive grid systems.

03Optimizing state logic and rendering cycles to eliminate UI performance bottlenecks.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add k1lgor/virtual-company 12-frontend-architect

For use in Claude.ai and ChatGPT

Download Skill