frontend-ui-implementation
CommunityTurn designs into production-ready React UIs.
Authorhabrahgithub
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-ui-implementation Download link: https://github.com/habrahgithub/node-backend-starter/archive/main.zip#frontend-ui-implementation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.