OpenSkillIndex← back to search
claude-code

Awesome-omni-skill frontend-pages-components

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

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/frontend-pages-components" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-pages-components && rm -rf "$T"
manifest: skills/development/frontend-pages-components/SKILL.md
source content

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

<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>