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 Aug 25, 2026
Search Tags:#dashboard#tailwind#information architecture#frontend design#responsive layout#ui states#conversion design
One-click install
npx skills add https://github.com/sabiscore/swarmxq --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/swarmxq/tree/main/.ai/skills/frontend-product-design-architect
Command: npx skills add https://github.com/sabiscore/swarmxq --skill frontend-product-design-architect-sabiscore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend surfaces often ship as collections of components without a coherent structure, leaving users unsure of what to do next. This Skill establishes information architecture, content hierarchy, responsive breakpoints, and complete state design before any component code is written. ## Core Features & Use Cases - Information Architecture: Defines reading paths with primary content, proof, one dominant CTA, and trust signals so hierarchy drives the product decision. - Responsive & State Design: Specifies mobile-first breakpoints (320px to 1440px+) and all six UI states (default, loading, empty, error, partial, success) with Tailwind and React patterns. - Use Case: When building a TaxBridge VAT filing form or a SabiScore analytics dashboard, use this Skill to structure the KPI row, chart layout, chunked form fieldsets, and empty states before writing any component code. ## Quick Start Ask the AI to design the information architecture and layout for your dashboard or landing page before any components are written.

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 structure a landing page for better conversion?▼

Structure a hero section with one headline thesis, one concrete proof point, and a single dominant CTA with a secondary ghost action. Follow with supporting evidence and trust signals, never placing two equally weighted actions at the same level.

How to design dashboard layout with React and 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 Tailwind grid classes.

What UI states should every frontend page design include?▼

Every surface needs six states: default, loading skeleton with matching spatial footprint, empty state that teaches and invites, error state with recovery guidance, partial degraded state, and success state. Design all six before implementation.

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

Yes, the workflow defines explicit breakpoints: mobile 320-767px single column, tablet 768-1023px two-column, desktop 1024px+ full layout, and ultra-wide 1440px+ with max-width containers. All patterns use mobile-first Tailwind classes.

When should design happen relative to writing component code?▼

Structure always comes before code. Clarify the user decision, define the information architecture and reading path, set breakpoints, and design all states before any component is written, since hierarchy is the core product decision.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

teach-impeccable

Extract design tokens and brand assets into .impeccable.md.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
windyskywindysky

agency-design-system

Generate a design-spec.md with color tokens, typography scales, spacing, and layout specs.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

bootstrap

Create responsive interfaces with Bootstrap 5 components and Sass theming.

Community
Intermediate