skills.rest
potatsukki
potatsukkiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate frontend requirements into cohesive HTML/CSS/JS or React/Vue components.

2|Updated Feb 16, 2026
Search Tags:#design#ui#frontend#react#component#guidelines#aesthetics
One-click install
npx skills add https://github.com/potatsukki/rmv-web --skill frontend-design-potatsukki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/potatsukki/rmv-web/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/potatsukki/rmv-web --skill frontend-design-potatsukki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Produces distinctive, production-grade frontend interfaces with bold aesthetic direction, avoiding generic AI aesthetics and ensuring real, working code with careful visual detail.

Core Features & Use Cases

  • Design Thinking-driven guidance to align purpose, tone, constraints, and differentiation.
  • Production-ready front-end code across HTML/CSS/JS or modern frameworks (React, Vue) with careful typography, color, motion, and layout decisions.
  • Use cases include building websites, dashboards, UI kits, or applications that are memorable and cohesive.

Quick Start

Provide a frontend requirement (component, page, or interface) and your preferred tech stack, and I will generate a distinctive, production-grade UI plan with ready-to-run code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create distinctive frontend interfaces that avoid generic AI aesthetics?▼

To create distinctive frontend interfaces, apply a design thinking process that translates requirements into cohesive aesthetic concepts with bold visual direction. This ensures production-ready code avoids generic patterns through careful typography, color, motion, and layout decisions.

Can I generate production-ready React components with proper typography and color guidelines?▼

Yes, you can generate production-ready React components that follow strict typography, color, motion, and layout guidelines. The process outputs ready-to-run framework components ensuring high visual polish and code-quality constraints.

What is the best way to build a UI kit that is memorable and cohesive?▼

The best way to build a cohesive UI kit is to drive development with design thinking steps that align purpose and differentiation. This produces distinctive, production-grade component code maintaining careful visual detail and accessibility considerations.

Does this frontend design approach support both plain HTML/CSS/JS and modern frameworks like Vue?▼

Yes, this frontend design approach supports both plain HTML/CSS/JS and modern frameworks like Vue. It produces ready-to-run code or framework components tailored to your preferred tech stack while maintaining cohesive aesthetic concepts and accessibility.

How do I include accessibility considerations when translating requirements into frontend code?▼

To include accessibility considerations when translating requirements into frontend code, follow a structured design process that explicitly integrates accessibility checks. This ensures production-grade interfaces meet necessary access constraints alongside code-quality requirements.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

frontend-design

Define and craft distinctive frontend interfaces across HTML/CSS, React, or Next.js.

Community
Advanced
DigitalCreationsCoDigitalCreationsCo
4

frontend-design

Design and generate frontend components, pages, or applications with a distinctive visual direction.

Community
Advanced
Design-System-ETDesign-System-ET

fullstack-guardian

Build security-focused full-stack web applications with layered frontend and backend protections.

Official
Advanced
timothyfroehlichtimothyfroehlich

pinpoint-ui

Create accessible shadcn/ui interfaces with Tailwind CSS v4 patterns.

Community
Basic