fd-patterns

Name: fd-patterns
Availability: InStock
Author: andrewle9510

Design cohesive page patterns for full-page UI experiences.

Updated Jan 17, 2026

Search Tags:#design system #patterns #navigation #user flows #UI patterns #page layouts

Ready to run

npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fd-patterns
Source: https://github.com/andrewle9510/design-skill-orchestrator/tree/main/.opencode/skill/fd-patterns
Command: npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps product and design teams craft cohesive page experiences by outlining reusable patterns for page layouts, navigation, and user flows. It reduces ambiguity and accelerates delivery by providing repeatable templates and guidance.

Core Features & Use Cases

Pattern templates for common pages (landing, detail, listing, profile, settings) that define structure and hierarchy.
Navigation & flow guidance to ensure consistent menus, breadcrumbs, and action sequences across routes.
Reusable compositions that combine components into complete pages and guided user journeys.
Use cases include creating full-page templates, routing patterns, and form flows for dashboards, discovery feeds, and detail views.

Quick Start

Use the fd-patterns skill to draft a complete landing and detail page blueprint for a new film discovery app.

Frequently Asked Questions about fd-patterns

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

FAQPage Schema

When do I need reusable compositions for page layouts?▼

You need reusable compositions for page layouts when creating full-page templates, routing patterns, and form flows for dashboards, discovery feeds, and detail views. They combine individual components into complete pages and guided user journeys to accelerate delivery.

How do I design cohesive page patterns for a React web app?▼

To design cohesive page patterns for a React web app, use predefined templates for navigation, page layouts, and user flows. This approach reduces ambiguity and provides repeatable structures for landing pages, dashboards, and detail views.

What is the best way to structure navigation and form flows in Next.js?▼

The best way to structure navigation and form flows in Next.js is to apply reusable navigation archetypes and form-flow sequences. This ensures consistent menus, breadcrumbs, and action sequences across all application routes.

Can I use these UI patterns with Tailwind CSS and shadcn/ui?▼

Yes, you can use these UI patterns with Tailwind CSS and shadcn/ui. The templates define core page compositions and routing patterns designed specifically for implementation with Tailwind CSS v4 and shadcn/ui components.

What page templates are available for building user interfaces?▼

Available page templates for building user interfaces include structures for landing pages, detail views, listing feeds, profiles, and settings. These templates define the core hierarchy and reusable compositions needed for complete page experiences.

When do I need reusable compositions for page layouts?▼