frontend-design

Name: frontend-design
Availability: InStock
Author: endlessblink

Design web interfaces with typography, color systems, and motion guidelines.

Updated Nov 29, 2025

Search Tags:#typography #css #ui-design #aesthetics #motion #web-components #frontend-design

Ready to run

npx skills add https://github.com/endlessblink/flow-state --skill frontend-design-endlessblink

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/endlessblink/flow-state --skill frontend-design-endlessblink

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive and production-grade frontend interfaces are hard to achieve with generic tooling; this skill guides a clear design direction and implementation approach to produce visually compelling, high-quality UI across web apps.

Core Features & Use Cases

Clear aesthetic direction: establish purpose-driven visuals, typography, color systems, and motion.
Production-ready outputs: deliver ready-to-use HTML/CSS/JS or framework components (React, Vue) that align with the chosen aesthetic.
Cross-project consistency: reusable design patterns and components for dashboards, landing pages, and apps.

Quick Start

Define the target aesthetic and deliver a ready-to-run frontend component or page that matches it.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I establish a consistent typography and color system for a web UI?▼

To establish a consistent typography and color system for a web UI, define purpose-driven visual guidelines that enforce aesthetic direction and accessibility across all frontend components. This approach ensures reusable design patterns for cross-project consistency.

Can I generate production-ready React or Vue components for a landing page?▼

Yes, you can generate production-ready React or Vue components for a landing page. The process delivers ready-to-run framework components that align with your chosen aesthetic and component-driven architecture, ensuring visual impact and usability.

What is the best way to design a distinctive dashboard interface without generic tooling?▼

The best way to design a distinctive dashboard interface without generic tooling is to apply clear design direction guidelines that produce visually compelling, high-quality UI tailored to your specific web app context, improving overall visual impact and usability.

Does this approach work with vanilla HTML and CSS or only specific web frameworks?▼

This approach works with vanilla HTML and CSS as well as specific web frameworks like React, Vue, and Angular. It delivers ready-to-use outputs that enforce guidelines for motion and accessibility across all environments, ensuring production-grade frontend interfaces.

How do I add motion and accessibility guidelines to my frontend design system?▼

To add motion and accessibility guidelines to your frontend design system, enforce specific rules for visual interactions and component-driven architecture that maintain high-quality UI standards across dashboards and applications, ensuring cross-project consistency.