skills.rest
ivanrvpereira
ivanrvpereiraCOMMUNITY
Explore all skills by this author →
𝕏@ivanrvpereiraGitHub

frontend-design

Translate UI intent into production-ready HTML/CSS/JS or framework components.

17|Updated Feb 19, 2026
Search Tags:#accessibility#frontend#react#ui design#css variables#responsive layout#interactive components
One-click install
npx skills add https://github.com/ivanrvpereira/.agents --skill frontend-design-ivanrvpereira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ivanrvpereira/.agents/tree/main/skills/frontend-design
Command: npx skills add https://github.com/ivanrvpereira/.agents --skill frontend-design-ivanrvpereira

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of turning vague frontend ideas into a cohesive, production-ready interface with intentional aesthetics and working code.

Core Features & Use Cases

  • Design direction + execution: Establishes a single bold visual direction and implements it consistently in real, runnable UI code.
  • Accessible, responsive implementation: Produces semantic, keyboard-friendly, responsive layouts with tokenized styling and maintainable structure.
  • Production-ready frontend output: Delivers complete HTML/CSS/JS or framework components (e.g., React/Vue) that run as provided, including meaningful interaction and motion with reduced-motion support.

Quick Start

Ask: "Using a bold editorial/typographic style, design a responsive marketing landing page for a SaaS called Nimbus, with accessible sections, a clear layout hierarchy, and interactive UI states—then output the complete working code."

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn a vague UI idea into production-ready frontend code?▼

To turn a vague UI idea into production-ready frontend code, translate the UI intent into working HTML/CSS/JS or framework components with intentional aesthetics, semantic accessibility, and responsive layout breakpoints.

How do I design responsive React components with tokenized CSS variables?▼

Designing responsive React components with tokenized CSS variables involves establishing a cohesive visual direction and implementing it consistently using semantic, keyboard-friendly layouts, maintainable structure, and tokenized styling.

What is the best way to build accessible interactive UI components?▼

Building accessible interactive UI components requires semantic HTML, keyboard-friendly navigation, meaningful interaction and motion, and reduced-motion support considerations across responsive breakpoints.

Can I use this approach to redesign an existing landing page?▼

Yes, you can use this approach to redesign an existing landing page by applying new typography, layout, and color systems to create a distinctive, production-ready interface with working code.

Does the generated frontend output include reduced-motion support?▼

Yes, the generated frontend output includes reduced-motion support, ensuring that meaningful interactions and motion states are accessible to users who prefer reduced visual movement.

Related Skills

Explore More Design & Creative Skills→
ToqsickToqsick

ui-component-library

Generates UI components from a design system for a specified framework.

Community
Advanced
oguzhanguvenkayaoguzhanguvenkaya

frontend-design

Convert vague frontend requirements into production-ready HTML/CSS/JS components.

Community
Advanced
bergsidebergside
2.3k

pacman

Generate Pac-Man themed UI component rules with tokenized typography, color, spacing, and WCAG 2.2 AA acceptance criteria.

Official
Intermediate
belokonmbelokonm
8

frontend-ui-ux-engineer

Transform basic React components into polished interfaces with typography, color, motion, and accessibility.

Community
Advanced