# Frontend Skill

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

- Skill: `majiayu000/frontend-skill` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-skill/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-skill

---


# 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
```html
<main class="layout">
  <header class="navbar">Navigation</header>
  <section class="content">
    <Card />
  </section>
</main>