project-design
Installation
SKILL.md
Project Design Skill
Generate production-grade, visually distinctive web interfaces. Every page must look like it was designed by a professional — not generated by AI.
When to Use
This skill applies whenever you generate HTML/CSS/JS for any visual web output — dashboards, landing pages, web apps, tools, portfolios, or any other page type.
Reference Files
| File | Read When |
|---|---|
| references/aesthetics.md | Building a color palette, choosing typography, designing layout — the methodology for making design decisions |
| references/components.md | Building UI components — navigation, cards, tables, buttons, forms, hero sections, CTAs |
| references/animations.md | Adding motion — scroll reveals, hover effects, modals, drawers, page load sequences |
| references/charts.md | Creating charts — Chart.js/ECharts setup, chart type selection, mock data generation, dashboard layouts |