skills.rest
timinou
timinouCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate Elm UI v2 interfaces with semantic design system values.

Updated Feb 14, 2026
Search Tags:#web development#frontend#visual design#ui design#ux#elm ui
One-click install
npx skills add https://github.com/timinou/sakya --skill frontend-design-timinou
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/timinou/sakya/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/timinou/sakya --skill frontend-design-timinou

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually distinctive and production-ready frontend interfaces that move beyond generic AI-generated aesthetics, focusing on high design quality and intentionality.

Core Features & Use Cases

  • Elm UI v2 Implementation: Generates code exclusively using native Elm UI v2 helpers for interfaces.
  • Design System Adherence: Emphasizes the use of semantic design system values (colors, typography, spacing) to ensure consistency and maintainability.
  • Aesthetic Direction: Guides the creation of interfaces with a clear, bold aesthetic point-of-view, ranging from minimalist to maximalist.
  • Use Case: A user wants to design a new dashboard for a SaaS product. They can use this skill to generate a unique, branded UI that reflects their product's identity, incorporating custom animations and a refined color palette.

Quick Start

Use the frontend-design skill to create a responsive pricing page with a minimalist aesthetic using Elm UI v2.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate production-grade Elm UI v2 interfaces that avoid generic aesthetics?▼

To generate production-grade Elm UI v2 interfaces that avoid generic aesthetics, define a bold aesthetic point-of-view and apply actionable design principles using native Elm UI v2 helpers for visually striking, meticulously refined code.

What is the best way to build a SaaS dashboard using Elm UI v2?▼

The best way to build a SaaS dashboard using Elm UI v2 is to establish semantic design system values for colors, typography, and spacing, ensuring a unique, branded interface that reflects your product identity.

Can I use semantic design system values for spacing and typography in Elm UI?▼

Yes, you can use semantic design system values in Elm UI to ensure consistency and maintainability across components, pages, and applications by prioritizing these values throughout your frontend design.

Does Elm UI v2 support creating responsive frontend pages with custom design directions?▼

Yes, Elm UI v2 supports creating responsive frontend pages with custom design directions by utilizing native helpers to creatively interpret minimalist or maximalist aesthetic points-of-view for your web applications.

Why does my AI-generated frontend interface look generic?▼

Your AI-generated frontend interface looks generic when it lacks intentionality and a clear aesthetic point-of-view, which can be resolved by applying actionable design principles and semantic design system values during generation.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

pulse

Creates a design system with color palettes, typography scales, and spacing guidelines.

Community
Intermediate
AVVlasovAVVlasov

frontend-design

Creates frontend interfaces with intentional design principles and code implementation.

Community
Advanced
isiouisiou

frontend-design

Design distinctive frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
agentik-osagentik-os
10

image-to-code

Translate visual UI designs into modular, responsive frontend code.

Community
Advanced