Frontend Skill

Build frontend user interfaces including pages, components, layouts, and styling. Use for UI development and presentation layers.

majiayu000 Updated 567 repo stars

File contents

Frontend Skill – UI Pages & Components

Instructions

  1. Pages & Routing

    • Create structured pages and routes
    • Organize UI by feature or domain
    • Support responsive layouts
  2. Component Development

    • Build reusable, composable components
    • Separate presentation and logic
    • Manage component state cleanly
  3. Layout Structure

    • Implement consistent layouts
    • Use grid and flexbox appropriately
    • Ensure responsiveness across devices
  4. Styling

    • Apply modern CSS or styling frameworks
    • Maintain consistent design tokens
    • Support theming and accessibility

Best Practices

  • Use reusable and modular components
  • Follow mobile-first design principles
  • Keep styles consistent and maintainable
  • Ensure accessibility standards
  • Optimize UI for performance

Example Structure

<main class="layout">
  <header class="navbar">Navigation</header>
  <section class="content">
    <Card />
  </section>
</main>

majiayu000/claude-skill-registry-data/tree/main/development/frontend-skill commit fbd6e8e9f6

Frequently asked questions

npx skillmds@latest add majiayu000/frontend-skill