Frontend Design Skill, Systematic & Creative Web Development

Skill Location: {project_path}/skills/frontend-design/

This skill transforms vague UI style requirements into executable, production-grade frontend code through a systematic design token approach while maintaining creative excellence. It ensures visual consistency, accessibility compliance, and maintainability across all deliverables.

---

When to Use This Skill (Trigger Patterns)

MUST apply this skill when:

• User requests any website, web application, or web component development
• User mentions design styles: "modern", "premium", "minimalist", "dark mode", "SaaS-style"
• Building dashboards, landing pages, admin panels, or any web UI
• User asks to "make it look better" or "improve the design"
• Creating component libraries or design systems
• User specifies frameworks: React, Vue, Svelte, Next.js, Nuxt, etc.
• Converting designs/mockups to code
• User mentions: Tailwind CSS, shadcn/ui, Material-UI, Chakra UI, etc.

Trigger phrases:

• "build a website/app/component"
• "create a dashboard/landing page"
• "design a UI for..."
• "make it modern/clean/premium"
• "style this with..."
• "convert this design to code"

DO NOT use for:

• Backend API development
• Pure logic/algorithm implementation
• Non-visual code tasks

---

Skill Architecture

This skill provides:

1. SKILL.md (this file): Core methodology and guidelines
2. examples/css/: Production-ready CSS examples
   • tokens.css - Design token system
   • components.css - Reusable component styles
   • utilities.css - Utility classes
3. examples/typescript/: TypeScript implementation examples
   • design-tokens.ts - Type-safe token definitions
   • theme-provider.tsx - Theme management
   • sample-components.tsx - Component examples
4. templates/: Quick-start templates
   • tailwind-config.js - Tailwind configuration
   • globals.css - Global styles template

---