skills.rest
armanisadeghi
armanisadeghiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

modern-web-design-expert

Align admin UI components with Next.js best practices and project conventions.

2|1|Updated Aug 24, 2024
Search Tags:#accessibility#nextjs#tailwind#ui-design#responsive-design#design-patterns#frontend-development
One-click install
npx skills add https://github.com/armanisadeghi/ai-matrx --skill modern-web-design-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modern-web-design-expert
Source: https://github.com/armanisadeghi/ai-matrx/tree/main/.cursor/skills/modern-web-design-expert
Command: npx skills add https://github.com/armanisadeghi/ai-matrx --skill modern-web-design-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Project-specific web design governance for the AI Matrx Admin, extending the global Next.js best practices to align local conventions, migration state, and project-specific patterns. This guide helps teams converge on a consistent UI approach across components, styles, and responsive layouts.

Core Features & Use Cases

  • Provides migration guidance for typography, animations, and component wrappers within the admin interface.
  • Documents project conventions, alignment with design tokens, responsive patterns, and accessibility standards.
  • Enables auditing and enforcement of best practices across UI components to ensure consistent UX.

Quick Start

Review the project-specific conventions and migrate components to follow the documented guidelines.

Frequently Asked Questions about modern-web-design-expert

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

FAQPage Schema
How do I standardize UI components in a Next.js admin dashboard?▼

Standardize Next.js admin dashboards by aligning project-specific UI design with global best practices. This enforces consistent local conventions, typography, responsive layouts, and accessibility standards across all components.

What are the best practices for migrating typography and animations in Tailwind?▼

Migrate Tailwind typography and animations using documented project conventions and explicit migration priorities. This ensures component wrappers and entrance animations align with established design tokens for consistent UX.

How do I manage responsive design tokens and container queries in Next.js?▼

Manage responsive design tokens and container queries in Next.js by applying documented project conventions. This approach handles local conventions and ensures accessible, adaptive layouts across your admin interface.

Does this approach support auditing accessibility standards across frontend components?▼

Yes, this approach enables auditing and enforcement of accessibility standards across frontend components. It documents project conventions to ensure your admin interface maintains consistent UX and compliance.

When should I apply project-specific design patterns instead of global Next.js conventions?▼

Apply project-specific design patterns when handling migration state and local conventions that global Next.js practices do not cover. This ensures your admin dashboard maintains UI consistency during transitions.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
HAR5HA-7663HAR5HA-7663

normalize

Audit and realign UI features to design system standards.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

Community
Intermediate
Muath2000Muath2000

frontend-design

Design accessible, responsive frontend interfaces with design tokens and WCAG 2.2 AA compliance.

Community
Advanced