Frontend Design Skill

This skill provides two distinct workflows for creating production-grade frontend interfaces:

Scenario Detector

Answer this question: Is there an existing codebase with components, pages, or a design system?

✅ YES → Existing Codebase (Most Common)

Use this workflow: EXISTING-CODEBASE-CHECKLIST.md

Purpose: Enforce design language consistency by analyzing existing patterns before implementation.

When to use:

• Adding components to existing project
• Creating new pages in existing app
• Modifying UI in established codebase
• Working with design system

Process: Mandatory 3-phase checklist (Design Analysis → Decisions → Implementation)

✅ NO → New Project (Greenfield)

Use this workflow: NEW-PROJECT-DESIGN.md

Purpose: Create bold, distinctive aesthetic design from scratch.

When to use:

• Starting new projects
• Building standalone components/pages
• No existing design system to match
• Full creative freedom

Process: Design thinking → Aesthetic principles → Implementation

Quick Reference

For consistency in existing codebases: → EXISTING-CODEBASE-CHECKLIST.md

For aesthetic design philosophy: → NEW-PROJECT-DESIGN.md

For real-world examples: → EXAMPLES.md

For deep-dive principles: → REFERENCE.md

Still unsure which scenario applies? Default to EXISTING-CODEBASE-CHECKLIST if there’s any existing code to reference.