skills.rest
sabiscore
sabiscoreCOMMUNITY
Explore all skills by this author →
GitHub

frontend-product-design-architect

Designs frontend information architecture, responsive layouts, and UI states for product surfaces.

1|Updated Sep 3, 2026
Search Tags:#tailwind#information architecture#visual hierarchy#frontend design#responsive layout#dashboard design#ui states
One-click install
npx skills add https://github.com/sabiscore/the-yap-engine --skill frontend-product-design-architect-sabiscore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-product-design-architect
Source: https://github.com/sabiscore/the-yap-engine/tree/main/.ai/skills/frontend-product-design-architect
Command: npx skills add https://github.com/sabiscore/the-yap-engine --skill frontend-product-design-architect-sabiscore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend surfaces often ship as functional but unstructured screens with weak hierarchy, missing states, and no clear primary action. This Skill structures the design process before any component code is written, covering information architecture, responsive breakpoints, state design, and section composition. ## Core Features & Use Cases - Information Architecture: Defines reading paths with primary content, proof, one dominant CTA, and trust signals before visual styling. - Responsive & State Design: Specifies mobile-first Tailwind breakpoints (320px to 1440px+) and all six UI states (default, loading, empty, error, partial, success) with TSX patterns. - Vertical Patterns: Provides composition guidance for TaxBridge tax forms (₦ currency, FIRS trust signals), SabiScore analytics dashboards, and SwarmX agent UIs. - Use Case: When asked to design a landing page or dashboard, apply the workflow to produce a hero section with one thesis and one CTA, a KPI-first dashboard layout, and designed empty/error states. ## Quick Start Use the frontend-product-design-architect skill to design the layout and information architecture for my analytics dashboard before writing any components.

Frequently Asked Questions about frontend-product-design-architect

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

FAQPage Schema
How do I design a landing page with clear visual hierarchy?▼

Start with information architecture before styling: primary content first, supporting proof second, then one dominant CTA with a secondary action and trust signals. Never place two equally weighted actions at the same level, and keep one H1 per page.

How to structure a dashboard layout in React with Tailwind?▼

Lead with a scannable KPI row, follow with charts in a responsive grid, and place detail tables last for deep readers. Use a persistent sidebar so users always know their location, with mobile-first classes like grid-cols-1 lg:grid-cols-2.

What UI states should every frontend page design include?▼

Design six states before implementation: default, loading skeleton with matching spatial footprint, empty state that teaches and invites, error state with recovery guidance, partial degraded state, and success state. A universal state wrapper component can switch between them.

Does this design approach work for mobile-first responsive layouts?▼

Yes, breakpoints are designed explicitly at mobile (320-767px), tablet (768-1023px), desktop (1024px+), and ultra-wide (1440px+). Tailwind patterns are always mobile-first, and layouts must tolerate copy 30% longer for localization.

When should design structure happen relative to writing components?▼

Structure always comes before code. Clarify the user decision, success criteria, and primary persona first, then define the reading path and states. Only after layout approval should any component be written.

Related Skills

Explore More Design & Creative Skills→
bennybennisonbennybennison

workflow-discovery

Identify and document user workflows into a structured WorkflowBrief before design work.

Community
Basic
5onyy5onyy

frontend-developer

Builds React and Next.js components with responsive layouts and client-side state management.

Community
Intermediate
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
Haohao-endHaohao-end
779

frontend-skill

Plan and implement front-end UI designs with hierarchy, spacing, and motion.

Community
Basic