skills.rest
samuerio
samuerioCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Implement production-ready frontend interfaces with consistent visual direction across HTML/CSS/JS, React, or Vue.

Updated Jul 10, 2022
Search Tags:#typography#frontend#ui-design#aesthetics#responsive-design#design-thinking#color-systems
One-click install
npx skills add https://github.com/samuerio/.dotfiles --skill frontend-design-samuerio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/samuerio/.dotfiles/tree/main/agents/skills/frontend-design
Command: npx skills add https://github.com/samuerio/.dotfiles --skill frontend-design-samuerio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and engineers need to translate briefs into production-ready frontend interfaces that are visually cohesive and technically sound.

Core Features & Use Cases

  • Single, bold aesthetic direction implemented consistently across HTML/CSS/JS, React, Vue, etc.
  • Design system foundations: typography, color, layout, motion, and accessibility guidelines that scale to components and pages.
  • End-to-end delivery: from concept to working code ready for production integration.

Quick Start

Implement a minimal, responsive frontend page that showcases the chosen visual direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-ready frontend interfaces with consistent design systems?▼

Production-ready frontend interfaces apply a bold, consistent visual direction across typography, color, layout, and motion to ensure technical soundness and visual cohesion in HTML/CSS/JS, React, or Vue.

Can I use this to generate a responsive UI design for React or Vue components?▼

Yes, it delivers responsive UI design and implementation-level code for React and Vue, applying intentional design thinking and accessibility guidelines that scale to components and pages.

What's the best way to establish a typography and color system for a new UI page?▼

The best way to establish typography and color systems is by defining design system foundations first, ensuring intentional, accessible, and scalable visual direction before implementing code.

Does this approach handle accessibility and performance considerations for frontend design?▼

Yes, this frontend design approach satisfies requirements for accessibility and performance considerations, ensuring that visual layout, motion, and color choices are intentional and compliant.

How do I redesign an existing component library to have a cohesive aesthetic direction?▼

Redesigning a component library involves applying a single, bold aesthetic direction consistently across the codebase, updating typography, color, and motion to achieve visual cohesion.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
chendongqichendongqi
110

frontend-design

Generates frontend interfaces with HTML/CSS/JS across React, Vue, Angular, or vanilla JS.

Community
Advanced
masang-jgkim2masang-jgkim2

browser-e2e

Automate Playwright headless/headed E2E browser tests for DQPM.

Community
Advanced
maplin-comaplin-co

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Official
Advanced