skills.rest
josoroma
josoromaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Define layout hierarchy, responsive behavior, and shadcn composition for generated Next.js app interfaces.

6|Updated Jul 12, 2026
Search Tags:#design#accessibility#frontend#next.js#responsive#shadcn#semantic-classes
One-click install
npx skills add https://github.com/josoroma/AppLoop --skill frontend-design-josoroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/josoroma/AppLoop/tree/main/.hermes/skills/frontend-design
Command: npx skills add https://github.com/josoroma/AppLoop --skill frontend-design-josoroma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Generated app interfaces often lack coherent structure, accessible states, and consistent responsive behavior, forcing implementers to guess at layout decisions. This Skill produces a complete design specification—layout hierarchy, component map, responsive rules, and semantic class names—so the Next.js implementer can build without a second design pass. ## Core Features & Use Cases - Layout & Component Specification: Define page regions in reading order, assign stable semantic class names, and map component responsibilities for shells, features, and primitives. - Responsive & Accessibility Rules: Specify mobile, tablet, and desktop behavior plus keyboard focus, labels, and non-color state signals for every interactive surface. - shadcn Composition & Template Identity: Apply shadcn-compatible primitives, fullscreen modal grid patterns, and per-template visual identities (AI Engineer CV, Deep Research Paper, Luminous Rings, Vestaboard) via the references file. - Use Case: When a user asks for a new dashboard in an AppLoop-generated project, produce the named regions, unique per-instance classnames for inspect mode, dark-container contrast values, and the target template body class before any code is written. ## Quick Start Use the frontend-design skill to define the layout hierarchy, responsive behavior, and semantic class names for a new analytics dashboard page targeting template-default.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I structure a generated Next.js dashboard layout?▼

Start from the primary user workflow and define regions in reading order: shell, navigation, primary work area, secondary panels, and action surfaces. Give each region a stable semantic class name like dashboard-header or task-grid so inspect mode can target it.

How should semantic class names be assigned for element inspection?▼

Repeated elements need a shared base classname plus a unique per-instance classname written last, such as metric-card summary-card metric-revenue. The inspector picks the last classname as the preferred selector, so duplicates cause selection collisions.

When should I use shadcn components versus custom elements?▼

Prefer shadcn-compatible primitives for dialogs, menus, tabs, forms, popovers, tooltips, tables, and command palettes. Avoid nesting cards inside cards, and reserve cards for repeated records, modal surfaces, or framed tools.

Why does text disappear inside dark gradient containers?▼

Bare theme tokens like var(--muted-foreground) blend into dark surfaces. Nested text, icons, and buttons in dark containers must use explicit hardcoded values such as oklch(...) or color-mix(in oklch, white N%, ...).

When should this design skill not be used?▼

Do not use it for pure data-model, API, dependency, or runtime-only changes. It applies only when a page, dashboard, tool, workflow, or visual redesign needs UI structure defined before code changes.

Related Skills

Explore More Design & Creative Skills→
rodrigotoledorodrigotoledo

frontend-design

Generate production-grade frontend interfaces from user briefs with accessible, responsive implementations.

Community
Advanced
fusenginefusengine
1

shadcn-theming

Defines and audits shadcn/ui design tokens using OKLCH colors and dark mode CSS variables.

Community
Intermediate
andrewle9510andrewle9510

fd-color-systems

Generate cohesive color systems with semantic tokens and dark-mode support.

Community
Basic
nexu-ionexu-io
93.2k

design-taste-frontend

Generate premium responsive frontend interfaces by inferring design intent and applying disciplined aesthetic constraints.

Official
Advanced