frontend-pages-components
Build responsive frontend pages, reusable components, layouts, and styling using modern best practices.
Best use case
frontend-pages-components is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Build responsive frontend pages, reusable components, layouts, and styling using modern best practices.
Teams using frontend-pages-components should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-pages-components/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-pages-components Compares
| Feature / Agent | frontend-pages-components | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Build responsive frontend pages, reusable components, layouts, and styling using modern best practices.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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>Related Skills
frontend_mastery
Advanced React patterns, performance optimization, and state management rules.
frontend
Apply distinctive frontend design to React + TailwindCSS apps. Use when building UI components, pages, or improving visual design. Breaks generic "AI slop" patterns.
frontend-web-dev-expert
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
frontend-ui-tailwind-standards
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
frontend-svelte
Technical knowledge for SvelteKit 5 development. Build reactive applications with Svelte's compile-time magic. Expert in SvelteKit, stores, and reactive patterns. Activate for Svelte development, performance optimization, or modern web apps. This skill provides MCP usage patterns and Svelte 5 conventions. Use when implementing Svelte components or SvelteKit routes.
frontend-specialist
Master of UI/UX, React, TypeScript, and modern CSS.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a...
frontend-shadcn
Frontend development using Vite + React + shadcn/ui + Tailwind CSS + React Router v7. Use when creating new frontend projects, adding UI components, implementing routing, styling with Tailwind, or working with shadcn/ui component library.
frontend-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.