frontend-specialist

Plan and design frontend interfaces across React, Vue, Angular, and Svelte.

1|Updated Apr 23, 2026
One-click install
npx skills add https://github.com/mtsatryan/openclaw-ai-agents --skill frontend-specialist-mtsatryan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-specialist
Source: https://github.com/mtsatryan/openclaw-ai-agents/tree/main/frontend-specialist
Command: npx skills add https://github.com/mtsatryan/openclaw-ai-agents --skill frontend-specialist-mtsatryan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend projects often struggle with inconsistent UI, accessibility gaps, and maintenance bottlenecks across frameworks. This Skill provides expert guidance to design scalable UI systems and reusable components.

Core Features & Use Cases

  • Framework-agnostic frontend architecture for React, Vue, Angular, and Svelte
  • Reusable component library design with design tokens and theming
  • Accessibility, performance budgeting, and responsive design best practices
  • Real-world use cases: enterprise dashboards, UI migration, prototyping new interfaces
  • Testing and documentation guidelines (unit/integration tests, Storybook-style docs)

Quick Start

Describe your UI requirements and ask this skill to generate a responsive, accessible React component library with TypeScript and theming.

Frequently Asked Questions about frontend-specialist

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

FAQPage Schema
How do I design a reusable component library with TypeScript and theming?

To design a reusable component library with TypeScript, define design tokens for theming and establish consistent state management patterns. This ensures scalable UI systems with type-safe props and maintainable visual consistency across your application.

What is the best way to plan frontend architecture across React and Vue?

The best way to plan frontend architecture across React and Vue is using a framework-agnostic approach. This strategy standardizes accessibility improvements, responsive styling, and state management patterns while accommodating different rendering paradigms.

How do I set up accessibility and performance budgets for a web UI?

Set up accessibility and performance budgets for web UIs by integrating automated checks during development and enforcing performance constraints. Apply these budgets early in your UI systems to prevent regressions and ensure responsive design compliance.

Does this approach work for enterprise dashboard migration to Svelte and Angular?

Yes, this approach works for enterprise dashboard migration to Svelte and Angular. It provides expert guidance to design scalable UI systems, ensuring consistent components and accessibility improvements during complex production project migrations.

How do I generate documentation and testing guidelines for a UI component library?

Generate documentation and testing guidelines for a UI component library by creating Storybook-style docs alongside unit and integration tests. This ensures your reusable components are validated for functionality and clearly documented for team consumption.