frontend-agent

Name: frontend-agent
Availability: InStock
Author: SUN-Underwriting

Develop React and Next.js frontend components with Tailwind CSS and shadcn/ui.

Updated Aug 23, 2026

Search Tags:#typescript #frontend #react #ui/ux #next.js #shadcn/ui #tailwind css

Ready to run

npx skills add https://github.com/SUN-Underwriting/SunFlowCRM_DB --skill frontend-agent-sun-underwriting

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-agent
Source: https://github.com/SUN-Underwriting/SunFlowCRM_DB/tree/main/.agent/skills/frontend-agent
Command: npx skills add https://github.com/SUN-Underwriting/SunFlowCRM_DB --skill frontend-agent-sun-underwriting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of user interfaces and frontend components, ensuring design fidelity, accessibility, and performance.

Core Features & Use Cases

UI Development: Build interactive and responsive user interfaces using React, Next.js, and Tailwind CSS.
Component Creation: Leverage shadcn/ui and FSD-lite architecture for maintainable and reusable components.
Design System Alignment: Ensure code strictly adheres to design tokens and accessibility standards.
Use Case: Develop a new dashboard widget, ensuring it matches the existing design system, is fully accessible, and performs optimally across all devices.

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 accessible React components with Tailwind CSS?▼

Build accessible React components with Tailwind CSS by enforcing WCAG 2.1 AA standards and using shadcn/ui. This approach ensures your UI components maintain strict design token adherence while remaining fully accessible across all devices.

What is FSD-lite architecture for frontend development?▼

FSD-lite architecture for frontend development is a streamlined structural approach that creates maintainable and reusable React components. It organizes your Next.js codebase logically, ensuring design system alignment and performance optimization across interactive user interfaces.

Can I use Next.js with shadcn/ui for dashboard widgets?▼

Yes, you can use Next.js with shadcn/ui to develop dashboard widgets. This combination allows you to build interactive, responsive user interfaces that match your existing design tokens and perform optimally across all devices.

How do I manage client-side state and form validation in TypeScript?▼

Manage client-side state and form validation in TypeScript by leveraging React components within a Next.js environment. This process ensures type-safe API integration and robust state handling while maintaining strict accessibility standards.

Does this frontend agent enforce design token adherence?▼

Yes, the frontend agent enforces strict design token adherence. It aligns your React and Tailwind CSS code directly with your design system, ensuring visual consistency and maintaining accessibility standards across all generated UI components.

What's the best way to optimize React UI performance for multiple devices?▼

Optimize React UI performance for multiple devices by utilizing TypeScript, Next.js, and Tailwind CSS. This stack enables performance optimization and responsive design, ensuring your interactive user interfaces perform optimally across all platforms.