Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces. It automatically detects the project's existing design system and frontend framework, respects them first, then channels creativity through composition, layout, and motion.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Step 1: Codebase Context Discovery (MANDATORY)

Before writing any code or choosing any aesthetic direction, scan the codebase. This step is non-negotiable and runs every time.

What to Detect

1. Frontend framework — Check package.json (or equivalent) for: react, vue, angular, svelte, next, nuxt, astro, solid-js
2. Component library — Check dependencies for: PrimeVue, shadcn/ui, Vuetify, MUI, Chakra UI, Ant Design, Radix, Mantine, Quasar, Element Plus, Headless UI
3. CSS framework / methodology — Check for:
   • Tailwind: tailwind.config.* files or @tailwind directives
   • CSS Modules: *.module.css files
   • Styled-components / Emotion: imports in component files
   • SCSS/SASS: *.scss files, variable files