skills.rest
yuki-yano
yuki-yanoCOMMUNITY
Explore all skills by this author →
𝕏@yuki_ycinoGitHub

frontend-design

Convert frontend requirements into accessible React, Vue, or HTML/CSS/JS interfaces.

64|2|Updated Feb 8, 2018
Search Tags:#typography#design#accessibility#frontend#responsive#aesthetics#ui-component
One-click install
npx skills add https://github.com/yuki-yano/dotfiles --skill frontend-design-yuki-yano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yuki-yano/dotfiles/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/yuki-yano/dotfiles --skill frontend-design-yuki-yano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Users often need highly tailored frontend interfaces that are production-ready, visually distinctive, and cohesive across components, but lack a clear design-to-code workflow.

Core Features & Use Cases

  • Design-to-Code Workflow: Translate bold aesthetic direction into reusable UI components, pages, and layouts.
  • Framework-agnostic Guidance: Produce specs and reusable assets compatible with React, Vue, or vanilla HTML/CSS/JS.
  • Quality & Accessibility: Enforce typography, color systems, responsive layouts, motion, and accessibility best practices across projects.
  • Use Case: Create a landing page with a unique visual identity, plus a component library and responsive design system ready for production.

Quick Start

Provide a clear brief (purpose, audience, constraints) and I will generate a production-ready frontend module with polished visuals and accessible code.

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-ready frontend UI from a design brief?▼

To generate production-ready frontend UI, provide a clear brief covering purpose, audience, and constraints. The system translates this into distinctive, reusable HTML, CSS, or JS components with cohesive typography and responsive layouts.

What is the best way to build a responsive design system with React or Vue?▼

Building a responsive design system with React or Vue is best achieved by enforcing a design-to-code workflow. This approach ensures cohesive typography, color systems, and accessibility standards across reusable UI components.

Can I create accessible vanilla HTML and CSS components with a bold aesthetic?▼

Yes, you can create accessible vanilla HTML and CSS components with a bold aesthetic. The system applies framework-agnostic guidance to enforce accessibility best practices while delivering distinctive visual identities.

Does this frontend design workflow enforce accessibility and motion performance?▼

Yes, the frontend design workflow enforces accessibility and motion performance. It ensures typography, color systems, and responsive layouts meet accessibility best practices while delivering ready-to-use code artifacts.

Related Skills

Explore More Design & Creative Skills→
avoajaugochukwuavoajaugochukwu

frontend-design

Design and code frontend interfaces with specified aesthetic direction and technical constraints.

Community
Advanced
IntellifillIntellifill
1

frontend-design

Convert vague frontend requests into production-grade React, Vue, or Svelte interfaces.

Official
Advanced
gtpgg1013gtpgg1013

design-taste-frontend

Enforce premium frontend design standards for React/Next.js projects.

Community
Advanced
spqwspqw

observable-framework-lib-generators

Provides DOM event, timer, and MQTT generators for Blazor hybrid apps.

Community
Intermediate