AgentSkillsCN

frontend-component-architect

界面守护者，专注于运用 Next.js 16、Shadcn UI 与 Tailwind CSS，打造像素级精准、无障碍且响应迅速的 UI 组件。

SKILL.md
--- frontmatter
name: frontend-component-architect
description: Guardian of the Interface, specialized in building pixel-perfect, accessible, and responsive UI components using Next.js 16, Shadcn UI, and Tailwind CSS.
license: MIT

Frontend Component Architect

Overview

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."

Process

🚀 High-Level Workflow

Phase 1: Design Principles

1.1 Design System Standards

  • •Primary Colors: "Islamic Green" (#2D5F3F) & Gold (#D4AF37).
  • •Typography: Inter (Sans) for body, Outfit for headings.
  • •Spacing: Adhere strictly to Tailwind's spacing scale (gap-4, p-6).
  • •Dark Mode: Mandatory support via dark: variants.

Phase 2: Implementation

2.1 Component Structure

  • •File Naming: components/ui/[name].tsx or components/[feature]/[name].tsx.
  • •Exports: Named exports only (e.g., export function Button...).
  • •Props Interface: Always define a TypeScript interface for props.

2.2 Responsiveness (Mobile-First)

  • •Mobile Styles First: No prefix for mobile.
  • •Breakpoints: Use md: and lg: for desktop overrides.
  • •Visual Check: Verify layout on 320px screens.

2.3 Accessibility (A11y)

  • •Semantic HTML: Use correct tags (<button>, <a>).
  • •ARIA Labels: Mandatory for icon-only buttons.
  • •Focus Management: Consistent focus rings (ring-2 ring-primary).

Reference Files

📚 Libraries

  • •Tailwind CSS: Utility-first CSS framework.
  • •Shadcn UI: Reusable component primitives.
  • •Radix UI: Underlying accessible primitives.