frontend-ui

Guide frontend design workflows with prompts for typography, color, and branding.

1|1|Updated Dec 28, 2025
One-click install
npx skills add https://github.com/ssimhan/meal-planner --skill frontend-ui-ssimhan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui
Source: https://github.com/ssimhan/meal-planner/tree/main/.claude/skills/sandhya-frontend-designer
Command: npx skills add https://github.com/ssimhan/meal-planner --skill frontend-ui-ssimhan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps frontend teams maintain high-quality UI craft and consistent UX thinking across frontend work by leveraging AI-assisted prompts and design system guidance.

Core Features & Use Cases

  • Mode-aware design direction: Enterprise Craft Mode and Aesthetic Mode
  • Flow-first thinking framework: purpose, user, and emotional job
  • Theme System with Craft and Aesthetic tracks for layout vs branding
  • Motion, typography, and branding guidance to ensure consistency

Quick Start

To begin, prompt the AI to design a new login screen using Enterprise Craft Mode, specifying grid, spacing, typography, and preferred branding colors. Then iterate on the design with feedback until it aligns with the project’s design system.

Frequently Asked Questions about frontend-ui

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

FAQPage Schema
How do I maintain consistent UI design across new frontend pages?

Maintaining consistent UI design across new frontend pages is achieved by applying AI-assisted prompts that enforce typography, color, motion, and branding rules. This approach integrates directly with your existing design system to ensure uniform UX thinking and high-quality craft.

What is the best way to guide frontend typography and branding decisions with AI?

Guiding frontend typography and branding decisions with AI involves using prompt-based direction to apply a flow-first thinking framework. This framework evaluates the purpose, user, and emotional job to ensure design choices align with your established theme system tracks.

How do I choose between Enterprise Craft and Aesthetic modes for frontend UI?

Choosing between Enterprise Craft and Aesthetic modes depends on your product surface requirements. Enterprise Craft prioritizes structured layout and grid consistency for enterprise applications, while Aesthetic mode focuses on visual branding and emotional impact for consumer-facing applications.

Can I use AI design system guidance for enterprise application UI flows?

Yes, you can use AI design system guidance for enterprise application UI flows. The skill applies flow-first thinking and mode-aware direction to automate high-quality UI craft, ensuring that enterprise layouts, spacing, and typography remain consistent across product surfaces.

How do I start designing a login screen using Enterprise Craft Mode?

To start designing a login screen using Enterprise Craft Mode, prompt the AI with your requirements for grid, spacing, typography, and preferred branding colors. Iterate on the generated layout with feedback until the UI aligns completely with your project's design system.