AgentSkillsCN

Frontend Design

前端设计

SKILL.md

All 6 skill files have been created:

  1. SKILL.md — Quick overview with color palette, common patterns (challenge/response rows, section headers, hover-reveal), and links to references
  2. references/aesthetics.md — Color system (7-level background scale, semantic accents, text hierarchy), typography (Inter + JetBrains Mono, explicit pixel sizes), visual identity, icon system
  3. references/components.md — Toolbar buttons, input/form fields, badges/indicators, type indicator, checklist item row anatomy, anti-pattern for modifying shadcn/ui
  4. references/layouts.md — 4-panel IDE layout structure, panel sizing (260/280/flex-1/280), title bar, toolbar, status bar, responsive behavior, flex layout pitfalls
  5. references/motion.md — Transition timing table, CSS transitions (hover-reveal, chevron rotation), modal animations, collapse/expand, drag-and-drop motion, anti-pattern for over-animating
  6. references/patterns.md — Design rules, 6 DO/DON'T pairs, anti-patterns (inline styles, inconsistent headers, missing focus states), new component checklist, IDE density guidelines, indent guide system