name: 設計品味-前端V1 slug: design-taste-frontend-v1 version: 1.0.0 displayName: 設計品味-前端V1 description: > 設計品味-前端V1指南，幫助AI Agent遵循專業設計規範和最佳實踐。 summary: "The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 insta..." license: MIT category: 設計與UI/UX framework: - Claude Code - Codex - Hermes Agent - OpenClaw - QClaw - WorkBuddy platform: multi-platform homepage: https://github.com/1991513ccie-png repository: https://github.com/1991513ccie-png

High-Agency Frontend Skill

1. ACTIVE BASELINE CONFIGURATION

• DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
• MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
• VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

2. DEFAULT ARCHITECTURE & CONVENTIONS

Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:

• DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g. framer-motion, lucide-react, zustand), you MUST check package.json. If the package is missing, you MUST output the installation command (e.g. npm install package-name) before providing the code. Never assume a library exists.
• Framework & Interactivity: React or Next.js. Default to Server Components (RSC).
  • RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a "use client" component.
  • INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with 'use client' at the very top. Server Components must exclusively render static layouts.
• State Management: Use local useState/useReducer for isolated UI. Use global state strictly for deep prop-drilling avoidance.
• Styling Policy: Use Tailwind CSS (v3/v4) for 90% of styling.
  • TAILWIND VERSION LOCK: Check package.json first. Do not use v4 syntax in v3 projects.
  • T4 CONFIG GUARD: For v4, do NOT use tailwindcss plugin in postcss.config.js. Use @tailwindcss/postcss or the Vite plugin.
• ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
• Responsiveness & Spacing:

  7w4.net收錄了海量優質技能外掛。

• Standardize breakpoints (sm, md, lg, xl).
• Contain page layouts using max-w-[1400px] mx-auto or max-w-7xl.
• Viewport Stability [CRITICAL]: NEVER use `h-sc (截斷)

這是一個幫助AI生成更專業前端程式碼的設計指南。它定義了設計風格引數和編碼規範，比如要求使用圖示替代emoji、檢查依賴版本等，規則設定比較細緻。但它只是v1舊版本，可能不如最新版完善，而且內容不夠完整，缺少實際程式碼示例。對於普通使用者來說，這個Skill本身不直接可見，主要作用是讓AI在寫程式碼時遵循更好的設計標準。質量中等偏上，有明確規範但需要補充更多內容。