frontend-development

Develop Next.js/React/TypeScript interfaces for Clarin CRM with the emerald/slate design system.

Updated Feb 12, 2026
One-click install
npx skills add https://github.com/ricardoalejandro/clarin --skill frontend-development-ricardoalejandro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/ricardoalejandro/clarin/tree/main/.github/skills/frontend-development
Command: npx skills add https://github.com/ricardoalejandro/clarin --skill frontend-development-ricardoalejandro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures the creation of beautiful, polished, and highly usable Next.js/React/TypeScript interfaces for Clarin CRM, adhering strictly to the emerald/slate design system.

Core Features & Use Cases

  • UI Development: Build or modify dashboard pages, components, API calls, WebSocket listeners, and UI styling.
  • Design Enforcement: Guarantees visual excellence, micro-interactions, accessibility, and adherence to the specified design system.
  • Use Case: When adding a new feature like a lead management kanban board, use this Skill to ensure it's visually consistent, interactive, and follows all design guidelines.

Quick Start

Use the frontend-development skill to create a new dashboard page for managing user roles.

Frequently Asked Questions about frontend-development

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

FAQPage Schema
How do I build a React dashboard page with a consistent UI design system?

To build a React dashboard page with a consistent UI design system, use a Next.js and TypeScript interface that enforces strict visual guidelines like an emerald and slate color palette. This approach guarantees visual excellence, handles micro-interactions, and ensures accessibility across all new components.

Can I integrate WebSocket listeners into a Next.js frontend component?

Yes, you can integrate WebSocket listeners into a Next.js frontend component to handle real-time data updates. Developing these interfaces within a structured TypeScript environment ensures that real-time interactions remain visually polished and functionally consistent with the broader CRM design system.

What is the best way to manage API calls in a Next.js TypeScript application?

The best way to manage API calls in a Next.js TypeScript application is to build structured interfaces that enforce strict design system guidelines. This method ensures that data fetched via API integrations is rendered with polished UI styling, proper micro-interactions, and full accessibility compliance.

How do I style a React kanban board with Tailwind CSS and micro-interactions?

To style a React kanban board with Tailwind CSS and micro-interactions, develop the component using an enforced emerald and slate design system. This ensures the interactive board maintains visual excellence, accessibility, and strict adherence to the CRM's specified UI styling standards.

Does this frontend development approach support adding accessible UI components to an existing CRM?

Yes, this frontend development approach supports adding accessible UI components to an existing CRM by enforcing a strict emerald and slate design system. It covers the creation and modification of dashboard pages, API integrations, and WebSocket handling while focusing on accessibility and visual polish.