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.