skills.rest
endlessblink
endlessblinkCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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
One-click install
npx skills add https://github.com/endlessblink/flow-state --skill frontend-design-endlessblink
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
kirvinkirvin

frontend-design

Create distinctive frontend interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
RedWoodOGRedWoodOG
174

frontend-design

Design accessible, responsive frontend components for React, Vue, Svelte, or vanilla HTML/CSS/JS.

Community
Advanced
act70255act70255

frontend-design

Design distinctive frontend interfaces with intentional design systems and functional code.

Community
Advanced