skills.rest
Tehminanaz
TehminanazCOMMUNITY
Explore all skills by this author →
GitHub

frontend-component-architect

Design and implement pixel-perfect UI components for Next.js 16 with Tailwind CSS and Shadcn UI.

1|Updated Dec 4, 2025
Search Tags:#a11y#frontend#react#nextjs#tailwind#design-system#ui-components
One-click install
npx skills add https://github.com/Tehminanaz/Evolution-of-Todo --skill frontend-component-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-component-architect
Source: https://github.com/Tehminanaz/Evolution-of-Todo/tree/main/.claude/skills/frontend-component-architect
Command: npx skills add https://github.com/Tehminanaz/Evolution-of-Todo --skill frontend-component-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a specialized persona for building the frontend visual layer using Next.js 16, Shadcn UI, and Tailwind CSS. It acts as the "Guardian of the Interface."

Core Features & Use Cases

  • Phase 1: Design Principles
  • 1.1 Design System Standards: Primary Colors, Typography, Spacing, and Dark Mode guidelines.
  • Phase 2: Implementation
  • 2.1 Component Structure, Exports, and Props Interfaces.
  • 2.2 Responsiveness (Mobile-First) with md: and lg: breakpoints; 320px layout checks.
  • 2.3 Accessibility (A11y) with semantic HTML, ARIA labels, and focus management.

Quick Start

Provide a ready-to-use Next.js 16 UI component scaffold following the design principles and accessibility guidelines.

Frequently Asked Questions about frontend-component-architect

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

FAQPage Schema
How do I build accessible UI components in Next.js 16?▼

Build accessible UI components in Next.js 16 by applying semantic HTML, ARIA labels, and focus management. This ensures your interface meets A11y standards while maintaining pixel-perfect design and responsiveness.

What is the best way to structure React component props for a Tailwind CSS design system?▼

Structure React component props using TypeScript interfaces. This enforces consistent export naming conventions and prop validation across your Tailwind CSS design system, ensuring reliable component integration.

How do I ensure responsive layouts with Shadcn UI and Tailwind CSS?▼

Ensure responsive layouts with Shadcn UI by adopting a mobile-first approach. Apply md: and lg: Tailwind CSS breakpoints and perform 320px layout checks to verify rendering across screen sizes.

Can I use this approach to scaffold a complete component library?▼

Yes, you can scaffold a complete component library using these design system standards. It provides primary colors, typography, spacing, and dark mode guidelines for building modern, design-system-driven web apps.

Why does my Tailwind CSS component break at 320px screen width?▼

Tailwind CSS components break at 320px when mobile-first responsive breakpoints like md: and lg: are misconfigured. Perform explicit 320px layout checks to identify and fix responsive design failures.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced
nattergabrielnattergabriel
2

accessibility

Identify and resolve accessibility gaps in web user interfaces using ARIA guidelines.

Community
Intermediate
Sir-chawakornSir-chawakorn
33

screenshot-to-code

Convert UI screenshots and design mockups into HTML, CSS, and React components.

Community
Intermediate