AgentSkillsCN

Modular Ui Specialist

模块化 UI 专家

SKILL.md

Skill: Modular UI & Shadcn Specialist

Focus: Next.js (App Router), TailwindCSS, Shadcn/UI (Radix UI), and Component Governance.

🎯 Capability Overview

This skill ensures the frontend is built using a "Copy & Adapt" philosophy. It manages the installation, customization, and modular organization of UI primitives and complex features.

🧱 Shadcn/UI Governance

  • •Installation: When adding a new Shadcn component, use the CLI (npx shadcn@latest add [component]).
  • •File Naming: Immediately rename any auto-generated Shadcn files to follow the kebab-case rule.
    • •✅ components/ui/button.tsx, components/ui/dialog-primitive.tsx
    • •❌ components/ui/Button.tsx, components/ui/Dialog.tsx
  • •Customization: Do not modify the original shadcn primitives unless necessary for the Airsoft theme. Instead, wrap them in feature-specific components.

🏗 Component Hierarchy

  1. •Primitives (/components/ui/): Pure Shadcn components (Button, Input, Slider).
  2. •Compound Components (/components/shared/): Combinations of primitives (e.g., user-avatar-with-badge.tsx).
  3. •Feature Components (/components/features/): Domain-specific UI (e.g., features/map/zone-timer.tsx).

🎨 Styling & Theme

  • •Dark Mode First: Airsoft apps are often used in high-contrast environments. Default to a "Tactical Dark Mode".
  • •Dynamic Classes: Use the cn() utility (clsx + tailwind-merge) for all conditional styling.
  • •Accessible Interactions: All Shadcn components must retain their Radix UI accessibility features (keyboard nav, ARIA labels).

🤖 Implementation Instructions

  • •Client Directives: Shadcn components often use Radix (which needs hooks). Ensure 'use client' is at the top of the specific UI file.
  • •Tree Shaking: Only import the specific Shadcn sub-components needed (e.g., DialogHeader, DialogTitle).
  • •Props Standardization: Use TypeScript interfaces from the Library Team to type any custom props added to Shadcn components.

🚫 Forbidden Patterns

  • •No modifying global.css for component-specific styles; use Tailwind.
  • •No bypassing the components/ui/ structure; do not put raw Radix UI code directly into features.