skills.rest
Posteriot
PosteriotCOMMUNITY
Explore all skills by this author →
GitHub

frontend-designer

Convert HTML/CSS/JS mockups into structured Next.js App Router pages with Tailwind styling.

Updated Dec 13, 2025
Search Tags:#nextjs#tailwind#app-router#ui-implementation#design-validation#frontend-consistency#mockup-conversion
One-click install
npx skills add https://github.com/Posteriot/makalah-app --skill frontend-designer-posteriot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-designer
Source: https://github.com/Posteriot/makalah-app/tree/main/.codex/skills/project/frontend-designer
Command: npx skills add https://github.com/Posteriot/makalah-app --skill frontend-designer-posteriot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill translates raw HTML/CSS/JS mockups and legacy design patterns into a coherent Next.js frontend so teams avoid inconsistent pages and mismatched interactions.

Core Features & Use Cases

  • Context gathering: Reads the provided mockup sources and historical UI references to preserve the established look and feel.
  • Next.js mapping & implementation: Chooses App Router routes, builds shared layouts/components, and rewrites behaviors into Tailwind-styled React with appropriate hooks.
  • Design correction & validation: Harmonizes spacing, typography, color, illustration, and responsiveness while running lint/build checks to ensure functionality.
  • Use case: When a designer hands over a .development mockup folder, use this skill to rebuild the screen in src/app with verified interactions and consistent tokens.

Quick Start

Use the frontend-designer skill to translate the provided mockup assets into a consistent Next.js App Router page with Tailwind styling and shared components.

Frequently Asked Questions about frontend-designer

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

FAQPage Schema
How do I convert HTML/CSS mockups into Next.js App Router pages?▼

You can convert HTML/CSS mockups into Next.js App Router pages by mapping raw source files into structured routes. This process rebuilds static layouts into Tailwind-styled React components with appropriate hooks.

What is the best way to ensure frontend consistency when implementing design mockups?▼

Ensuring frontend consistency when implementing design mockups involves harmonizing spacing, typography, and color against historical UI references. This process preserves the established look and feel while applying shared layouts and reusable components.

Does this mockup conversion process handle Tailwind styling and React hooks?▼

Yes, the mockup conversion process handles Tailwind styling and React hooks by rewriting raw HTML/CSS/JS behaviors into functional React components. It translates static interactions into App Router pages using appropriate Tailwind classes and hooks.

How do I validate design implementation and check for errors in a Next.js project?▼

To validate design implementation in Next.js, you run lint and build checks after converting mockups. This verifies that the generated App Router pages, Tailwind styling, and React interactions function correctly without errors.

Can I use this approach to correct typography, color, and layout mismatches in my frontend?▼

Yes, you can correct typography, color, and layout mismatches in your frontend by applying reference-guided design checks. The skill harmonizes these visual elements and ensures responsiveness while translating mockups into Next.js pages.

What are the limitations of translating legacy design patterns into a Next.js frontend?▼

A limitation of translating legacy design patterns into a Next.js frontend is that the source must be raw HTML/CSS/JS mockups. The process specifically targets App Router structures and Tailwind styling, requiring established UI references for consistent results.

Related Skills

Explore More Design & Creative Skills→
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
forcedotcomforcedotcom
803

building-ui-bundle-frontend

Enforce routing, styling, and module restrictions for Salesforce UI bundle frontend modifications.

Official
Intermediate
Aqsagull99Aqsagull99

nextjs-skill

Build Next.js 16+ apps with App Router, server components, and API routes.

Community
Intermediate
suhwansuhwan

phase-3-mockup

Generate HTML/CSS/JS mockups with a Next.js conversion plan.

Community
Advanced