skills.rest
adampetrovic
adampetrovicCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design and implement production-ready frontend interfaces with HTML/CSS/JS, React, and Vue.

2|Updated Nov 9, 2021
Search Tags:#design#ui#web development#frontend#react#css
One-click install
npx skills add https://github.com/adampetrovic/dotfiles --skill frontend-design-adampetrovic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/adampetrovic/dotfiles/tree/main/dot_pi/agent/skills/frontend-design
Command: npx skills add https://github.com/adampetrovic/dotfiles --skill frontend-design-adampetrovic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill tackles the challenge of creating visually distinctive and highly functional frontend interfaces that go beyond generic templates, ensuring a strong aesthetic direction and production-readiness.

Core Features & Use Cases

  • Aesthetic Direction: Establishes and consistently applies a unique visual style (e.g., Brutalist, Editorial, Retro-futuristic).
  • Code Generation: Produces real, working HTML/CSS/JS, React, or Vue code based on design principles.
  • UI Polish: Enhances typography, layout, color, and motion for a premium feel.
  • Use Case: When asked to design a new landing page for a SaaS product, this Skill will generate a high-fidelity, coded interface with a specific, memorable aesthetic, incorporating custom typography, a defined color system, and thoughtful micro-interactions.

Quick Start

Design a new landing page for a SaaS product with a brutalist aesthetic, focusing on strong typography and a dark color scheme.

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 React UIs with a specific aesthetic direction?▼

Generate production-ready React UIs with a specific aesthetic direction by defining a visual style like Brutalist or Editorial. The system translates brand identity into high-fidelity coded components, applying custom typography, color systems, and intentional layout strategies directly in HTML, CSS, or Vue.

What is the best way to design a SaaS landing page with custom typography and color systems?▼

Designing a SaaS landing page with custom typography and color systems requires specifying a memorable aesthetic during generation. This approach ensures the final UI features strong visual direction, thoughtful micro-interactions, and premium polish rather than generic templates.

Can I use this to build frontend interfaces in both React and Vue?▼

Yes, you can build frontend interfaces in both React and Vue. It supports HTML, CSS, and JavaScript execution alongside these frameworks, ensuring high-fidelity coded UIs maintain strong aesthetic direction and production readiness across different web development stacks.

How do I move beyond generic templates for frontend web development?▼

Move beyond generic templates for frontend web development by establishing a unique visual style like Retro-futuristic. The process focuses on design thinking and execution, translating user needs into distinctive, high-fidelity coded interfaces with intentional layout strategies and UI polish.

Does this approach work for implementing UI polish and micro-interactions in CSS?▼

Yes, this approach works for implementing UI polish and micro-interactions in CSS. It enhances typography, layout, color, and motion to create a premium feel, generating real working code based on solid design principles for your frontend interfaces.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
JetaofgakJetaofgak

frontend-design

Generate production-grade frontend interfaces from user requirements.

Community
Advanced
jokken79jokken79
1

yukyu-ui-ux-master

Design YuKyuDATA interfaces with WCAG accessibility and dark/light mode.

Community
Advanced
czambrczambr

frontend-design

Create production-grade frontend interfaces with distinctive typography, color, and motion.

Community
Advanced