# Frontend UI Builder

> Build responsive frontend pages and reusable UI components with clean layouts and modern styling.

- Skill: `majiayu000/frontend-ui-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-ui-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-ui-builder/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/frontend-ui-builder

---


# Frontend UI Builder

## Instructions

### 1. Page & Layout Structure

- Use semantic HTML (`header`, `main`, `section`, `footer`)
- Full-width or container-based layouts
- Clear visual hierarchy
- Grid or Flexbox-based positioning

### 2. Components

- Build reusable UI components (buttons, cards, navbars)
- Consistent spacing and typography
- Component-first mindset
- Easy to scale and modify

### 3. Styling

- Mobile-first CSS approach
- Use Flexbox and CSS Grid
- CSS variables for colors, spacing, and fonts
- Clean hover, focus, and active states

### 4. Responsiveness

- Works across mobile, tablet, and desktop
- Breakpoints for layout changes
- Fluid typography and spacing

## Best Practices

- Keep components reusable and isolated
- Follow mobile-first design principles
- Maintain a consistent spacing system
- Ensure accessible color contrast
- Avoid inline styles
- Use clear and predictable class names

## Example Structure

```html
<header class="navbar">
  <div class="container">
    <h1 class="logo">Brand</h1>
    <nav class="nav-links">
      <a href="#">Home</a>
      <a href="#">Features</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="card-grid">
    <div class="card">
      <h2>Card Title</h2>
      <p>Reusable component content.</p>
      <button class="btn-primary">Action</button>
    </div>
  </section>
</main>
```