skills.rest
k1lgor
k1lgorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-architect

Generate accessible, responsive UI component designs across frameworks.

2|Updated Feb 3, 2026
Search Tags:#accessibility#frontend#react#responsive#state-management#ui-design#component-design
One-click install
npx skills add https://github.com/k1lgor/virtual-company --skill frontend-architect-k1lgor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-architect
Source: https://github.com/k1lgor/virtual-company/tree/main/skills/12-frontend-architect
Command: npx skills add https://github.com/k1lgor/virtual-company --skill frontend-architect-k1lgor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds accessible, responsive UI components across frameworks.

Core Features & Use Cases

  • Component Design Best Practices: keep components small and single-purpose; promote composition over deep inheritance; address state lifting only when necessary.
  • Accessibility & Responsiveness: semantic HTML, ARIA labeling, keyboard navigation, and responsive layouts that adapt from mobile to desktop.
  • Cross-Framework Guidance: applicable to React, Vue, Svelte, and similar ecosystems; provides framework-agnostic patterns and tooling recommendations.

Quick Start

Provide a UI feature request, and I will generate a component design, state management plan, and accessibility improvements.

Frequently Asked Questions about frontend-architect

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

FAQPage Schema
How do I design accessible and responsive React UI components?▼

To design accessible and responsive React UI components, use semantic HTML, ARIA labeling, and keyboard navigation. Structure components to be small and single-purpose, ensuring responsive layouts adapt properly from mobile to desktop screens.

What is the best way to manage state in frontend component design?▼

The best way to manage state in frontend component design is promoting composition over deep inheritance and addressing state lifting only when necessary. This keeps components maintainable and single-purpose across web applications.

Does this UI component design approach work with Vue and Svelte?▼

Yes, this UI component design approach works with Vue and Svelte. It provides framework-agnostic patterns and tooling recommendations, ensuring cross-framework compatibility for accessible and responsive layouts.

How do I ensure keyboard navigation and ARIA labeling in web applications?▼

To ensure keyboard navigation and ARIA labeling in web applications, apply structured guidelines for semantic HTML and accessibility improvements. This enforces maintainability and proper interaction patterns across responsive layouts.

When should I lift state up in component design?▼

You should lift state up in component design only when necessary for shared logic. Keeping components small and promoting composition over deep inheritance maintains cross-framework compatibility and structural maintainability.

Related Skills

Explore More Design & Creative Skills→
wfvuewfvue
3

setting-up-tauri-projects

Initialize Tauri v2 projects across macOS, Windows, and Linux.

Community
Intermediate
asalhamedasalhamed

ui-designer

Translate UX research into UI specifications with design tokens and accessibility guidance.

Community
Advanced
masumi-networkmasumi-network
11

building-components

Guide development of accessible, composable UI components with semantic HTML and ARIA.

Official
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced