skills.rest
abdoulayesow
abdoulayesowCOMMUNITY
Explore all skills by this author →
GitHub

seri-component

Convert Figma UI components into Next.js App Router pages with Tailwind classes.

Updated Aug 27, 2026
Search Tags:#react#next.js#figma#tailwind#design-to-code#ui-component
One-click install
npx skills add https://github.com/abdoulayesow/pharmacy-guinea-app-002-2026 --skill seri-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seri-component
Source: https://github.com/abdoulayesow/pharmacy-guinea-app-002-2026/tree/main/.claude/skills/seri-component
Command: npx skills add https://github.com/abdoulayesow/pharmacy-guinea-app-002-2026 --skill seri-component

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about seri-component

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

FAQPage Schema
How do I convert Figma designs to Next.js UI components?▼

Converting Figma designs to Next.js UI components involves providing a Figma reference to generate a Next.js App Router page with strict Tailwind classes and accurate typography, spacing, and color tokens.

How does design-to-code handle pixel-perfect fidelity in Tailwind?▼

Design-to-code ensures pixel-perfect fidelity by enforcing strict Tailwind classes alongside standardized conventions for typography, spacing, and color tokens to match the Figma reference exactly.

When do I need the 'use client' directive for Next.js App Router pages?▼

You need the 'use client' directive for Next.js App Router pages when generating interactive components from Figma designs to properly enable client-side functionality.

Can I generate reusable React components for a pharmacy app from Figma?▼

Yes, you can generate reusable React components for a pharmacy app from Figma by orchestrating interactive screens and UI modules into standardized Next.js routes under the src/app directory.

What is the best way to structure Next.js routes from Figma UI modules?▼

The best way to structure Next.js routes from Figma UI modules is to scaffold production-ready pages under src/app/{route}/page.tsx, applying standardized conventions and composing reusable components together.

Related Skills

Explore More Software Engineering Skills→
RonnasaydRonnasayd
1

figma-design-system-to-tailwind

Convert Figma design systems into Tailwind CSS v4 configurations and component mappings.

Community
Advanced
applewaveapplewave
1

phase-6-ui-integration

Automate UI implementation and API integration workflows connecting frontend components to backend services.

Community
Advanced
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced