designing-frontend
Installation
SKILL.md
Designing Frontend
A comprehensive design knowledge base for building polished, professional frontends. Apply these principles when creating new interfaces or auditing existing ones. Framework-agnostic: the principles work with any CSS approach (vanilla, Tailwind, CSS modules, etc.).
Reference Files
| File | Read When |
|---|---|
references/color-and-theming.md |
Choosing colors, building palettes, implementing dark/light mode |
references/typography-and-spacing.md |
Setting type scales, font choices, spacing systems |
references/layout-and-responsiveness.md |
Building layouts with flexbox/grid, making designs responsive |
references/depth-and-visual-hierarchy.md |
Adding shadows, depth, borders, establishing visual hierarchy |
references/animation-and-motion.md |
Adding transitions, animations, scroll effects, SVG animation |
references/ux-and-components.md |
Designing user flows, building dashboards, planning interaction states (empty/loading/error), building reusable components, onboarding patterns, choosing native HTML elements |