skills.rest
Jorge-Ivan
Jorge-IvanCOMMUNITY
Explore all skills by this author →
GitHub

page-layouts

Design web pages, navigation systems, and UI patterns with responsive layouts.

1|Updated Mar 14, 2026
Search Tags:#responsive design#navigation#component library#frontend development#ui design#page layout
One-click install
npx skills add https://github.com/Jorge-Ivan/uam-hogar-nazareth-web --skill page-layouts-jorge-ivan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-layouts
Source: https://github.com/Jorge-Ivan/uam-hogar-nazareth-web/tree/main/.claude/skills/page-layouts
Command: npx skills add https://github.com/Jorge-Ivan/uam-hogar-nazareth-web --skill page-layouts-jorge-ivan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexity of designing entire user interfaces, from individual pages to comprehensive navigation systems, ensuring consistency and adherence to design principles.

Core Features & Use Cases

  • Page Design: Create layouts for dashboards, authentication flows, settings pages, and more.
  • Navigation Systems: Implement sidebars, top navigation bars, footers, and mobile navigation.
  • UI Patterns: Incorporate common patterns like data tables, modals, and empty states.
  • Use Case: Design a new admin dashboard, including the sidebar navigation, header, main content area with data tables, and a modal for creating new entries.

Quick Start

Use the page-layouts skill to design a responsive dashboard page with a sidebar and top navigation.

Frequently Asked Questions about page-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a responsive admin dashboard with a sidebar and top navigation?▼

You can design complete responsive web pages and navigation systems by generating frontend layouts for dashboards, sidebars, and top navigation bars. The Skill integrates accessibility and common UI patterns like data tables and modals.

What is the best way to structure authentication flows and settings pages?▼

The best way to structure authentication flows and settings pages is by designing complete UI layouts that incorporate common patterns. This Skill generates authentication flows, settings pages, and onboarding screens while ensuring design system consistency.

Can I use this to generate frontend code for complex UI patterns like empty states and modals?▼

Yes, you can generate frontend code for complex UI patterns like empty states and modals. The Skill utilizes tools for frontend code generation and modification to implement these common interface patterns within your page layouts.

Does this Skill support integrating page layouts with an existing component library?▼

Yes, this Skill supports integrating page layouts with an existing component library. It covers integration with design systems to ensure your generated web pages and navigation elements maintain consistency with your established UI components.

How do I build mobile navigation systems that adapt to different screen sizes?▼

You build mobile navigation systems by designing responsive layouts that adapt to different screen sizes. This Skill generates mobile navigation, footers, and sidebars while adhering to responsive design and accessibility principles.

Related Skills

Explore More Design & Creative Skills→
GunjanGrungeGunjanGrunge
3

frontend-design-spec

Define design tokens, component specs, and GSAP/Framer Motion animations for a content creation platform UI.

Community
Advanced
lobehublobehub
81.4k

react

Guide React component creation and routing for Next.js and React Router.

Official
Basic
Emz1998Emz1998

ux-prototyping

Generate interactive single-file HTML prototypes from UX specifications.

Community
Advanced
YYH211YYH211
274

frontend-design

Build production-grade React or Vue components and HTML/CSS layouts.

Community
Advanced