Agent skill · design visual · sundial-org
frontend-design-2
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Why this skill is useful
Provides specific design patterns, theme guidelines, and animation rules that enhance UI design beyond general knowledge.
What it needs
About 3k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
Frontend Design Skill Use this skill when creating UI components, landing pages, dashboards, or any frontend design work. Design Workflow Follow this structured approach for UI design: 1. Layout Design — Think through component structure, create ASCII wireframes 2. Theme Design — Define colors, fonts, spacing, shadows 3. Animation Design — Plan micro-interactions and transitions 4. Implementation — Generate the actual code 1. Layout Design Before coding, sketch the layout in ASCII format: 2. Theme Guidelines Color Rules: NEVER use generic bootstrap-style blue (#007bff) — it looks dated Prefer oklch() for modern color definitions Use semantic color variables (--primary, --secondary, --muted, etc.) Consider both light and dark mode from the start Font Selection (Google Fonts): Spacing & Shadows: Use consistent spacing scale (0.25rem base) Shadows should be subtle — avoid heavy drop shadows Consider using oklch() for shadow colors too 3. Theme Patterns Modern Dark Mode (Vercel/Linear style): Neo-Brutalism (90s web revival): Glassmorphism: 4. Animation Guidelines Micro-syntax for planning: Common patterns: Entry animations: 300-500ms, ease-out Hover states: 150-200ms Button press: 100-150ms Page transitions: 300-400ms 5. Implementation Rules Tailwind CSS: Flowbite (component library): Icons (Lucide): Images: Use real placeholder services: Unsplash, placehold.co Never make up image URLs Example: https://images.unsplash.com/photo-xxx?w=800&h=600 6. Responsive Design Always design mobile-first and responsive: 7. Accessibility Use semantic HTML (header, main, nav, section, article) Include proper heading hierarchy (h1 → h2 → h3) Add aria-labels to interactive elements Ensure sufficient color contrast (4.5:1 minimum) Support keyboard navigation 8. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/frontend-design-2