skills.rest
tylermorganme
tylermorganmeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui

Reuse established UI patterns from repository references in Next.js projects.

Updated Aug 27, 2026
Search Tags:#design#frontend#next.js#ui-patterns#reference-guidance#pattern-reuse
One-click install
npx skills add https://github.com/tylermorganme/crop_plan_2025 --skill ui-tylermorganme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/tylermorganme/crop_plan_2025/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/tylermorganme/crop_plan_2025 --skill ui-tylermorganme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI work often drifts from established patterns, causing inconsistent look-and-feel and wasted effort. This Skill provides a discipline to reuse existing templates and patterns rather than starting from scratch.

Core Features & Use Cases

  • Pattern Reuse: Locate and copy existing component and page structures to ensure visual and interaction consistency.
  • Reference-Driven Development: Follow references like src/app/varieties/page.tsx and src/components/PlantingInspectorPanel.tsx to implement new UI with proven patterns.
  • Use Case: When creating a new form page, search for an existing form pattern and replicate its layout and styling exactly.

Quick Start

  • Find an existing pattern (for example src/app/varieties/page.tsx) and copy its toolbar, content region, and styling to your new UI piece.
  • Use the reference guide to ensure classNames and component structure match the chosen pattern exactly.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I reuse existing UI patterns instead of creating new designs in Next.js?▼

Reuse UI patterns by locating existing component files like src/app/varieties/page.tsx, copying their exact layout and styling structures, and applying them to new pages to ensure visual consistency without reinventing designs.

What is reference-driven frontend development and how does it maintain UI consistency?▼

Reference-driven frontend development maintains UI consistency by requiring developers to copy exact structures and classNames from established pattern files, ensuring new components strictly align with existing project conventions.

How do I find and replicate form layouts for new pages in a Next.js project?▼

To find and replicate form layouts, search the repository for an existing form pattern like src/components/PlantingInspectorPanel.tsx, then copy its exact toolbar, content region, and styling to build your new page consistently.

Can I use this UI pattern reuse approach for components other than full pages?▼

Yes, you can apply this pattern reuse approach to individual components by locating existing component files, copying their exact structures, and adhering to the project's established UI conventions for consistent interactions.

Why does my frontend UI drift from established patterns and cause inconsistent look-and-feel?▼

Frontend UI drifts when developers start designing from scratch instead of copying established templates, which causes inconsistent look-and-feel and wasted effort across the Next.js project.

What are the limitations of enforcing strict UI pattern reuse for frontend development?▼

Strict UI pattern reuse requires finding exact matching pattern files in the repository and demands strict adherence to existing classNames and structures, which may restrict creative or highly customized design solutions.

Related Skills

Explore More Design & Creative Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
kubermatickubermatic
1

quieter

Reduce visual intensity in UI designs by softening colors and contrasts.

Official
Intermediate
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
jeannotlemaire-uxjeannotlemaire-ux

minimalist-ui

Generates ultra-minimalist web interfaces with strict design constraints.

Community
Advanced