# Frontend Pages Components

> Build responsive frontend pages, reusable components, layouts, and styling using modern best practices.

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

---


# Frontend Page & Component Development

## Instructions

1. **Page Structure**
   - Semantic HTML5 structure (header, main, section, footer)
   - Clear content hierarchy
   - Accessibility-first markup (ARIA where needed)

2. **Layout System**
   - Use Flexbox and Grid appropriately
   - Responsive layouts for mobile, tablet, and desktop
   - Consistent spacing and alignment

3. **Components**
   - Reusable and composable UI components
   - Props-driven or data-driven design
   - Separation of structure, style, and behavior

4. **Styling**
   - Modern CSS (Flexbox, Grid, variables)
   - Utility-first or component-based styling
   - Scalable class naming (BEM / Tailwind / CSS Modules)

5. **Responsiveness**
   - Mobile-first approach
   - Breakpoints for key screen sizes
   - Fluid typography and spacing

6. **Interactivity**
   - Hover, focus, and active states
   - Smooth transitions and subtle animations
   - Keyboard and screen-reader friendly

## Best Practices
- Write clean, readable, and maintainable code
- Avoid inline styles unless necessary
- Use design tokens for colors and spacing
- Optimize for performance and accessibility
- Keep components small and single-purpose

## Example Structure

```html
<main class="page">
  <header class="page-header">
    <h1 class="page-title">Page Title</h1>
  </header>

  <section class="content-grid">
    <article class="card">
      <h2 class="card-title">Component Title</h2>
      <p class="card-text">
        This is a reusable UI component.
      </p>
      <button class="btn-primary">Action</button>
    </article>
  </section>

  <footer class="page-footer">
    <p>© 2026 Your Company</p>
  </footer>
</main>