skills.rest
gusperandio
gusperandioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

lab-feno-ui

Automate frontend UI tasks and enforce visual consistency in Next.js/React apps.

Updated Apr 28, 2026
Search Tags:#typography#ui#frontend#shadcn-ui#responsive-design#heroui#lab-feno
One-click install
npx skills add https://github.com/gusperandio/lab_feno --skill lab-feno-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lab-feno-ui
Source: https://github.com/gusperandio/lab_feno/tree/main/.codex/skills/lab-feno-ui
Command: npx skills add https://github.com/gusperandio/lab_feno --skill lab-feno-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes and accelerates frontend UI work for the Lab Feno project, consolidating design systems, components, and visual guidelines to deliver consistent interfaces quickly.

Core Features & Use Cases

  • UI composition with HeroUI v3 and shadcn/ui to assemble landing pages, sections, headers, heroes, and components.
  • Visual refinement and responsive design using Lab Feno's typography and imagery guidelines.
  • Reuse of custom components to maintain a coherent look and feel across pages and states.

Quick Start

Open the Lab Feno UI project and begin refining the landing pages and components following the existing UI language.

Frequently Asked Questions about lab-feno-ui

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

FAQPage Schema
How do I build responsive landing pages with shadcn/ui and HeroUI v3 in a Next.js app?▼

Compose HeroUI v3 and shadcn/ui components within Next.js or React apps to assemble landing pages, applying Lab Feno's responsive typography and visual guidelines for consistent frontend interfaces.

What is the best way to maintain visual consistency across frontend UI components in React?▼

Maintain visual consistency by reusing custom components and enforcing a standardized design language across pages and states, ensuring a coherent look and feel throughout the frontend UI.

Can I use this Skill to assemble headers and hero sections for existing Next.js projects?▼

Yes, you can assemble headers and hero sections for existing Next.js projects. The skill automates frontend UI composition by applying established design language and accessibility guidelines to your current components.

Does this UI automation approach support custom component libraries alongside shadcn/ui?▼

Yes, it supports custom component libraries alongside shadcn/ui and HeroUI v3. You can reuse custom components to maintain a coherent look and feel while aligning with established accessibility guidelines.

Why does frontend UI work slow down when managing multiple design systems?▼

Frontend UI work slows down without standardized systems due to fragmented components and inconsistent visual guidelines. Automating UI composition with defined libraries accelerates delivery and enforces visual consistency.

When should I not use automated UI composition for responsive typography?▼

Avoid automated UI composition when your project requires a completely different design language outside the specified HeroUI v3 or shadcn/ui ecosystem, or when strict custom accessibility guidelines override standard component behaviors.

Related Skills

Explore More Design & Creative Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
masermediagroup-stackmasermediagroup-stack
1

shadergradient

Integrate shader-based animated gradients into React/Next.js interfaces.

Community
Intermediate
vrcmsvrcms
1

design-system

Analyze codebase styling patterns to generate design tokens and audit visual consistency.

Community
Advanced
raiden076raiden076
2

frontend-design

Generate frontend design briefs and production-ready HTML, CSS, and JavaScript assets.

Community
Advanced