seri-component

What problem does it solve?

This skill bridges the design-to-code gap by converting Figma UI components into production-ready Next.js App Router modules that faithfully reproduce the reference.

Core Features & Use Cases

• Design-to-code: Generate reusable Next.js components from Figma references.
• Pixel-perfect fidelity: Ensure typography, spacing, and color usage align with the design.
• Component orchestration: Build screens and UI modules and compose them into routes for the Seri pharmacy app.

Quick Start

Start by asking me to build a component from the Figma reference, e.g., "Create a Login component from the LoginScreen in figma-design." I will locate the reference, scaffold a Next.js page with the required 'use client' directive, and apply the project's Seri conventions to produce a production-ready component under src/app/{route}/page.tsx.