frontend-architect

What This Skill Does

The frontend-architect skill transforms your AI agent into a senior-level frontend engineering lead. It is designed to handle complex architectural decisions, implementation patterns, and performance tuning across the modern web ecosystem including React, Next.js, Vue, and Angular. The skill focuses on scalable component design using Atomic Design principles, robust state management strategies (Zustand, Redux, Pinia, NgRx), and micro-frontend orchestration. It acts as a bridge between high-level requirements and production-grade code, ensuring that your frontend applications are not only functional but also performant, maintainable, and accessible.

Installation

To integrate this expert architecture layer, run the following command in your terminal: clawhub install openclaw/skills/skills/anton-abyzov/sw-frontend-architect

Use Cases

Use this skill when you are scaffolding a new enterprise-grade application, migrating legacy frontend code to modern frameworks, or optimizing existing systems for core web vitals. It is ideal for defining directory structures, choosing between server-side vs. client-side rendering strategies, implementing design tokens for a company-wide design system, or debugging complex state synchronization issues in multi-tenant environments. Whether you are building a dashboard with heavy data visualization requirements or a complex e-commerce platform, this skill provides the architectural blueprint.

Example Prompts

1. "Design an Atomic Design component structure for a Next.js 14 dashboard using Tailwind CSS and Radix UI. Start by outlining the atoms and molecules."
2. "I have a performance bottleneck with large lists in my React application. Provide a guide on implementing virtual scrolling using TanStack Virtual and explain how to optimize memoization for child items."
3. "Help me architect a micro-frontend solution using Module Federation for a Vue 3 application. Explain how to manage shared dependencies and design a shell application that handles authentication."

Tips & Limitations

To ensure the best results, use the incremental chunking strategy described in the skill metadata. When working on large features, request one layer (e.g., 'Routing' or 'State Management') at a time. This prevents the model from exceeding context limits or generating fragmented code. Always clarify your specific framework version, as architectural patterns for Next.js 14 (App Router) differ significantly from older Page Router implementations. The skill provides architectural guidance and code generation but requires human oversight to integrate with your specific CI/CD pipelines.