skills.rest
habrahgithub
habrahgithubCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-implementation

Convert Figma designs into Next.js UI components with semantic HTML and Tailwind.

Updated Feb 1, 2026
Search Tags:#accessibility#frontend#react#figma#nextjs#responsive#tailwind
One-click install
npx skills add https://github.com/habrahgithub/node-backend-starter --skill frontend-ui-implementation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-implementation
Source: https://github.com/habrahgithub/node-backend-starter/tree/main/.codex/skills/frontend-ui-implementation
Command: npx skills add https://github.com/habrahgithub/node-backend-starter --skill frontend-ui-implementation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines the process of translating requirements or Figma designs into accessible, responsive, and production-ready frontend UIs by providing a clear workflow, implementation rules, and verification steps.

Core Features & Use Cases

  • Semantic structure first: Prioritize HTML5 landmarks and clear component boundaries for maintainability and accessibility.
  • Responsive, mobile-first styling: Use Tailwind or equivalent utility-first CSS with focus on breakpoint behaviors and usable tap targets.
  • Design fidelity and UX quality: Match layout, spacing, and interaction states from Figma while preserving existing project style language and adding purposeful motion.
  • Verification: Run lint/build, validate desktop and mobile layouts, and test key user flows manually or with Playwright when available.

Quick Start

Implement the target Next.js route or component to match the provided Figma layout using semantic HTML, mobile-first Tailwind styles, and ensure accessibility and explicit interaction states.

Frequently Asked Questions about frontend-ui-implementation

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

FAQPage Schema
How do I convert Figma designs into production-ready React components?▼

Convert Figma designs into production-ready React components by establishing semantic HTML5 landmarks, applying mobile-first Tailwind styling, and defining explicit loading, empty, error, and success interaction states to match layout fidelity.

What is the best way to ensure accessibility when building Next.js UI components?▼

The best way to ensure accessibility in Next.js UI components is prioritizing semantic HTML5 structure and landmarks alongside mobile-first Tailwind breakpoints, validating baselines through manual flow testing and automated lint and build checks.

How do I implement responsive mobile-first Tailwind styling for web pages?▼

Implement responsive mobile-first Tailwind styling by applying utility-first CSS classes that focus on breakpoint behaviors and usable tap targets, ensuring layouts adapt correctly across desktop and mobile views during manual verification.

Does this frontend UI implementation workflow support explicit interaction states?▼

Yes, the frontend UI implementation workflow supports explicit interaction states by requiring purposeful motion and distinct loading, empty, error, and success states within the defined component boundaries during route and page creation.

What are the limitations of translating requirements into UI without verification steps?▼

Without verification steps like lint, build, and Playwright testing, translating requirements into UI risks failing accessibility baselines, breaking responsive layouts, and missing explicit interaction states across the Next.js app-router project.

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
TrevorSTrevorS

playwright-e2e

Detect visual regressions in Svelte UI changes with Playwright screenshots.

Community
Intermediate
telum-aitelum-ai
2

visual-testing-web

Run visual regression tests across breakpoints and states with Playwright.

Official
Intermediate
snake14vsnake14v

UI/UX Pro Max

Generate React, Next.js and Tailwind UI components and layouts.

Community
Advanced