frontend-agent

Develop React and Next.js user interfaces with TypeScript and FSD-lite architecture.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/magisph/rv-adv --skill frontend-agent-magisph
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-agent
Source: https://github.com/magisph/rv-adv/tree/main/.agent/skills/frontend-agent
Command: npx skills add https://github.com/magisph/rv-adv --skill frontend-agent-magisph

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of user interfaces and client-side logic, ensuring design fidelity, performance, and accessibility in web applications.

Core Features & Use Cases

  • UI Development: Build interactive user interfaces using React, Next.js, and Tailwind CSS.
  • Component Architecture: Implement features following the FSD-lite pattern for maintainable code.
  • Design System Integration: Ensure visual consistency by leveraging shadcn/ui and design tokens.
  • Use Case: Develop a new user profile page, ensuring it's responsive, accessible, and integrates seamlessly with existing design patterns.

Quick Start

Use the frontend-agent to create a new React component for a user profile card.

Frequently Asked Questions about frontend-agent

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

FAQPage Schema
How do I build React components that align with an existing design system?

To build React components that align with a design system, use shadcn/ui and Tailwind CSS to ensure visual consistency. This approach leverages design tokens to maintain UI fidelity and accessibility across web applications.

Can I use Next.js and TypeScript for structuring scalable frontend architecture?

Yes, you can use Next.js and TypeScript to structure scalable frontend architecture by implementing the FSD-lite pattern. This architectural approach separates client-side logic and UI features to maintain code maintainability as your web application grows.

What is the best way to create accessible user interfaces with React and Tailwind CSS?

The best way to create accessible user interfaces with React and Tailwind CSS is to integrate shadcn/ui components. This combination emphasizes performance and accessibility while handling state management and component styling natively.

Does this frontend development approach handle API integration and state management?

Yes, this frontend development approach handles API integration and state management within React applications. It develops client-side logic that connects interactive user interfaces with backend APIs while maintaining performance.

How do I add a responsive user profile page using React and shadcn/ui?

To add a responsive user profile page using React and shadcn/ui, construct the component using Tailwind CSS for styling. This ensures the interface integrates seamlessly with existing design patterns while remaining accessible across devices.

When should I use FSD-lite architecture for frontend web applications?

You should use FSD-lite architecture for frontend web applications when you need maintainable component creation and feature scaling. It structures client-side logic effectively for React and Next.js projects utilizing TypeScript.