fe-coder

Structure layouts, hierarchies, and components for user interfaces.

Updated Aug 23, 2026

Search Tags:#layout #frontend #components #ui design #interface #visual craft

Ready to run

npx skills add https://github.com/MiguelAguiarDEV/baymax --skill fe-coder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fe-coder
Source: https://github.com/MiguelAguiarDEV/baymax/tree/main/skills/fe-coder
Command: npx skills add https://github.com/MiguelAguiarDEV/baymax --skill fe-coder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating structured, hierarchical, and component-based user interfaces with a deliberate and consistent visual design, moving beyond generic templates.

Core Features & Use Cases

Layout and Hierarchy Structuring: Defines the foundational structure and visual flow of interfaces.
Component Design: Focuses on building reusable and contextually relevant UI components.
Use Case: For a new SaaS dashboard, this Skill would help define the overall layout, the design system's color palette and typography, and the structure of key components like data tables and navigation menus, ensuring a cohesive and professional look.

Quick Start

Use the fe-coder skill to structure the layout for a new admin panel dashboard.

Frequently Asked Questions about fe-coder

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

FAQPage Schema

How do I design a SaaS dashboard layout with consistent components?▼

Design a SaaS dashboard layout by defining domain concepts, a color world, and a signature element before structuring component hierarchies. This approach ensures your interface uses intentional visual craft and consistency rather than relying on generic templates.

What is the best way to structure admin panel interfaces?▼

The best way to structure admin panel interfaces is to apply deliberate visual craft to layout and hierarchy. This process requires producing domain concepts and rejecting default templates before proposing a structurally consistent direction.

Can I use this approach for settings pages and data interfaces?▼

Yes, you can use this interface design approach for settings pages and data interfaces. It focuses on building reusable, contextually relevant UI components tied to the specific user, task, and context of your data-heavy application.

How does visual craft improve UI component design?▼

Visual craft improves UI component design by enforcing deliberate decisions tied to user and task context. By defining a color world and a signature element before proposing a direction, you build reusable components with precise visual consistency.

Do I need to define a color world before building interface layouts?▼

Yes, you need to define a color world before building interface layouts. Producing domain concepts, a color world, and a signature element is required prior to proposing a direction to ensure structured, hierarchical, and deliberate visual design.